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

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.