基于requirejs实现angular的按需加载

来源：互联网发布：软件工程项目明细编辑：程序博客网时间：2024/06/05 19:56

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路由跳转时按需加载需要的文件

0 0