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

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');
           });
   
       });
   });