How to split AngularJS application into smaller modules and handle routing correctly?

Question

What would be the best way to split AngularJS application into smaller pieces/module? For example if I have a blog post and commenting enabled for that, I t

Answer 1

I would divide the app in "view modules" and these sub modules.

Then I use the $routeProvider to switch between the views. I define the different routing config in each module.

If I need further submodules, I load these with ng-include.

/* App Module */

angular.module('MyApp', ['MyApp.home', 'MyApp.blog'])
.config( function myAppConfig ( $routeProvider ) {
    'use strict';
    $routeProvider.otherwise({ redirectTo: '/home' });
});


/* home Module */

angular.module('MyApp.home', [])
.config(['$routeProvider', function config( $routeProvider ) {
  $routeProvider.when('/home', {
    controller: 'HomeController',
    template: '<p>This is my Home</p>'
  });
}]);

I created a little repository on github to explain this.

Answer 2

We're doing something similar with a portal app and sub-apps. A few things we've discovered:

1. Only one "app" can have routes and routeParams. Because of this, if the "sub-app" needs access to the $routeParams, you either have to go "old school" for URL parsing, or use an event service.
2. Speaking of events, there is no Angular service for the apps to communicate, so you'll need to roll your own event service talking to root scope for both apps and inject it into both apps.
3. I can't see where we used ng-view for the "sub-app". Apparently bootstrapping directly to an element works similarly.

4. Because only one app can have routes, the apps should be bootstrapped in order. So something like this:

   $( function () {
   
       $.when(angular.bootstrap($('.post'), ['posts'])).done( function() {
           console.log('POSTS: bootstrapped');
   
           //Manually add the controller to the comments element. (May or may not be  
           //necessary, but we were doing something that required it to work.)
           $('.comments').attr('ng-controller', 'CommentsCtrl');
   
           $.when(angular.bootstrap($('.comments'), ['comments'])).done( function() {
               console.log('COMMENTS: bootstrapped');
           });
   
       });
   });
   

Answer 3

I hope you can use "ui-router" routing module.

Here is good tutorial for this http://www.ng-newsletter.com/posts/angular-ui-router.html

Answer 4

You can define routes in the submodules:

angular.module('app', ['ngRoute', 'app.moduleX'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'partials/home.html',
    controller: 'HomeCtrl'
  });

  //Handle all exceptions
  $routeProvider.otherwise({
    redirectTo: '/home'
  });
})

angular.module('app.moduleX', []).config(function($routeProvider) {
  $routeProvider.when('/settings', {
    templateUrl: 'partials/settings.html',
    controller: 'SettingsCtrl'
  });
})

I also wrote a blog post about this topic.