Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

传统的 angular 应用不支持异步加载模块，必须在 module 启动的时候，所有模块必须预加载进来。 通过使用 angular-async-loader 库，我们可以使用 requirejs 等加载器，在 module 初始化之后，在动态异步加载其他的 Controller, Services, Filters 等等......

See https://github.com/subchen/angular-async-loader

angular-async-loader

An async loader for angular 1.x application.

Support following components to dynamic register:

• .controller
• .services
• .filter
• .directive
• .value
• .constant
• .provider
• .decorator

Support following amd/cmd loaders:

• Require.js
• Sea.js
• System.js

Support controllerUrl/denpendencies config in angular-ui-router and angular-route:

• $stateProvider.state
• $routeProvider.when

Installation

npm install angular-async-loader

Usage

See Sample: https://github.com/subchen/angular-async-loader/blob/master/sample/

index.html

<script src="assets/requirejs/require.js"></script><script src="bootstrap.js"></script>

bootstrap.js

require.config({    baseUrl: '/',    paths: {        'angular': 'assets/angular/angular.min',        'angular-ui-router': 'assets/angular-ui-router/release/angular-ui-router.min',        'angular-async-loader': 'assets/angular-async-loader/angular-async-loader'    },    shim: {        'angular': {exports: 'angular'},        'angular-ui-router': {deps: ['angular']}    }});require(['angular', './app-routes'], function (angular) {    angular.element(document).ready(function () {        angular.bootstrap(document, ['app']);        angular.element(document).find('html').addClass('ng-app');    });});

app.js

define(function (require, exports, module) {    var angular = require('angular');    var asyncLoader = require('angular-async-loader');    require('angular-ui-router');    var app = angular.module('app', ['ui.router']);    // initialze app module for async loader    asyncLoader.configure(app);    module.exports = app;});

app-routes.js

define(function (require) {    var app = require('./app');    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {        $urlRouterProvider.otherwise('/home');        $stateProvider            .state('home', {                url: '/home',                templateUrl: 'home/home.html',                // new attribute for ajax load controller                controllerUrl: 'home/homeCtrl',                controller: 'homeCtrl'            })            .state('users', app.route({                url: '/users',                templateUrl: 'users/users.html',                // new attribute for ajax load controller                controllerUrl: 'users/usersCtrl',                controller: 'usersCtrl',                // load more controllers, services, filters, ...                dependencies: ['services/usersService']            }));    }]);});

users/usersCtrl.js

define(function (require) {    var app = require('../app');    // dynamic load services here or add into dependencies of state config    // require('../services/usersService');    app.controller('usersCtrl', ['$scope', function ($scope) {        // shortcut to get angular injected service.        var userServices = app.get('usersService');        $scope.userList = usersService.list();    }]);});