Building modular apps with Angular - Part 2
In a previous post I explained how to start modularizing Angular apps.
I’m going to improve the app I built in my example so it now lazy loads the modules it needs when you change routes. The end result will be the main page only downloading main.js and whenever you change to /yours or /mine, the respective file will be loaded with its corresponding dependencies. This should be an easy task, but angular makes it really complicated.
Lets try the obvious approach. First of all we need to change main to not load mine and yours:
1
2
3
4
5
6
7
8
9
10
11
12
define([], function() {
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({
templateUrl: 'templates/main.html',
controller: 'MainController'
});
}])
.controller('MainController', function() {});
angular.bootstrap(document.getElementsByTagName('html')[0], ['myApp']);
});