AngularJS loading partial views

Question

I'm developing a modular application with angularJS.

There is a menu that allows navigation through multiple views. (i'm using ngRoute)

Each view is divided in few parts and each part should load an independent module (lets call it "modules" atm). These modules will retrieve dynamic data using an api and these modules could be used in several views.

Which is the best way to do this? Use custom directives with a template and controller for each?

Have you looked here? https://docs.angularjs.org/api/ng/directive/ngInclude or http://stackoverflow.com/questions/13943471/angularjs-ng-include — jcc, Feb 11 '16 at 19:40
I would suggest you to use the new component directive (https://docs.angularjs.org/guide/component) in Angular 1.5. This directive provide you similar features like ui-views and it's built in. — fabwu, Feb 11 '16 at 20:16

score 2 · Accepted Answer · answered Feb 11 '16 at 20:38

I would create the modules with a "module.(module #)" so you can separate all js files. Something like this since you are using ngroute:

MyApp.controller('module.one', function ($scope, $http, $routeParams, moduleOneResource) {...logic... }

Create a factory for each module:

    angular.module('module.one').factory('moduleOneResource', ['$resource', function ($resource) {
      return $resource('/api_root/module/:module_id', {} {
        'save': {
          method: 'POST',
          headers: {"Content-Type": "application/json"},
        'get': {
          method: 'GET',
          headers: {"Content-Type": "application/json"}, 
         }
        }
      });
    }]);

And the config for the module:

angular.module('module.one', []).config(['$routeProvider',
    function($routeProvider) {
    $routeProvider.when('/module/one/new', {templateUrl: 'partials/moduleOne/new.html', controller: 'ModuleOneCtrl'});
    $routeProvider.when('/module/one/list_all', {templateUrl: 'partials/moduleOne/list.html', controller: 'ModuleOneCtrl'});    
    }]);

Then just keep creating each one of these files for each modules, should be 3 files per module... you can include more than one controller for example in one controller file if you want to for one module, same with factories.

angular.module('module.two', []).config([ .... config module for each module with url routes and html source , etc...

score 0 · Answer 2 · answered Feb 11 '16 at 20:09

You could use ng-include for this but I would say its better to use ui-router instead of ngRoute. ui-router allows you to use multiple named views and nested views which could be what you want i think. For example

<body ng-app="myApp">
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>
</body>

in config

var mypApp = angular.module("myApp",[ui-router]);
myApp.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
    .state('empty', {
        url:'/',
        views: {
            'header': {
                templateUrl: 'apps/header.html',
                controller: headController
            },
            'content': {
                templateUrl: 'apps/content.html'.
                controller: contentController
            },
            'footer': {
                templateUrl : 'apps/footer.html',
                controller: footerController
            }
        }
    })
    .state('test',{
        url:'/test',
        views: {
            'header': {
                templateUrl: 'apps/headertest.html'
                controller: headtTestController
            },
            'content': {
                templateUrl: 'apps/contenttest.html',
                controller: contenTesttController
            },
            'footer': {
                templateUrl : 'apps/footertest.html',
                controller: footerTestController
            }
        }
    })
}]);

This is a basic example as to how app is divided into multiple ui-views and you could devide your app similarly with each view having a controller.

AngularJS loading partial views

2 Answers2