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: '
This is my Home
'
  });
}]);

I created a little repository on github to explain this.