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

<scriptsrc="assets/requirejs/require.js"></script>
<scriptsrc="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();
    }]);

});