基于requirejs实现angular的按需加载

Requirejs配置

由于requirejs官方提供的功能是不能加载css样式功能的，许多第三方和官网也都提供了插件实现，不过我在这里要用的是一个很不错的样式模块加载器require-css，其官网地址为：

https://github.com/guybedford/require-css。

使用方法参考：http://segmentfault.com/a/1190000002390643

这里我不会详细介绍如何使用requirejs，不懂的地方请自行查阅资料

启动应用首先要先配置好requirejs的入口文件

require.config( {
    paths : {
        angular : 'vendor/angular/angular',
        'angular-route': 'vendor/angular-ui-router/angular-ui-router'
    } ,
    shim : {
        angular : {
            exports : 'angular' ,
            init : function () {
                var _module = angular.module;
                angular.module = function () {
                    var newModule = _module.apply( angular , arguments );
                    if ( arguments.length >= 2 ) {
                        newModule.config( [
                            '$controllerProvider' ,
                            '$compileProvider' ,
                            '$filterProvider' ,
                            '$provide' ,
                            function ( $controllerProvider , $compileProvider , $filterProvider , $provide ) {
                                newModule.controller = function () {
                                    $controllerProvider.register.apply( this , arguments );
                                    return this;
                                };
                                newModule.directive = function () {
                                    $compileProvider.directive.apply( this , arguments );
                                    return this;
                                };
                                newModule.filter = function () {
                                    $filterProvider.register.apply( this , arguments );
                                    return this;
                                };
                                newModule.factory = function () {
                                    $provide.factory.apply( this , arguments );
                                    return this;
                                };
                                newModule.service = function () {
                                    $provide.service.apply( this , arguments );
                                    return this;
                                };
                                newModule.provider = function () {
                                    $provide.provider.apply( this , arguments );
                                    return this;
                                };
                                newModule.value = function () {
                                    $provide.value.apply( this , arguments );
                                    return this;
                                };
                                newModule.constant = function () {
                                    $provide.constant.apply( this , arguments );
                                    return this;
                                };
                                newModule.decorator = function () {
                                    $provide.decorator.apply( this , arguments );
                                    return this;
                                };
                            }
                        ] );
                    }
                    return newModule;
                };
            }
        } ,
        "angular-route": {
            deps: ["angular"],
            exports: "angular-route"
        },
    map : {
        '*' : {
            'css' : 'vendor/require/css'
        }
    }
} );

require( [
    'angular' ,

    // 第三方库只需要列在这里就可以了
    'angular-route',
    // 别忘了依赖 app 模块
    './app' , 
    // 公用的服务和指令列在之后。
] , function ( angular ) {
    angular.module( 'bootstrap' ,[ 'ui.router','app' ]);// 注意：app 模块只能放在最后一个，因为它依赖前面的第三方模块！
    angular.bootstrap( document , [ 'bootstrap' ] );
} );

入口文件配置好后，需要在路由的app.js中添加一个辅助加载的函数

function loadDeps(deps) {
    return [
            '$q',
            function($q) {
                    var def = $q.defer();
                    require(deps, function() {
                    def.resolve();
                        });
                        return def.promise;
                        }
                    ];
                }

配置好之后就可以在路由里使用加载函数来加载依赖

使用方法如下：

define([
    'angular'
], function(angular) {
    return angular.module('app', [])
        .config([
            '$stateProvider', '$locationProvider'
            function($stateProvider, $locationProvider,) {
                // 设置路由
                $stateProvider.state('login', {
                        url: '/login',
                        templateUrl: 'modules/login/login.html',
                        controller: 'loginCtrl',
                        resolve: {
                            load: loadDeps([
                                'modules/login/module',
                                'css!./styles/login.css'
                            ])
                        }
                    })     
                $stateProvider.state('otherwise', {
                    url: '*path',
                    template: '',
                    controller: [
                        '$state',
                        function($state) {
                            $state.go('login');
                        }
                    ]
                });

                /**
                 * 加载依赖的辅助函数
                 * @param deps
                 * @returns {*[]}
                 */
                function loadDeps(deps) {
                    return [
                        '$q',
                        function($q) {
                            var def = $q.defer();
                            require(deps, function() {
                                def.resolve();
                            });
                            return def.promise;
                        }
                    ];
                }

            }
        ]);
});

到此即可简单实现angular路由跳转时按需加载需要的文件