首页 > 代码库 > Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载。

问题

">问题

目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题。那么问题来了,依赖资源过多时怎么办?

  1. build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题:build后文件大;线上调试不方便,尤其在html2js后问题更明显。
  2. 开发中尽量在原有文件里进行新业务添加,不增加额外的http请求压力,但是存在问题:多人合作时需要经常处理代码冲突;单个文件(control,directive等)很大,看的是眼花缭乱,容易出问题。

解决问题

">解决问题

基本思路:在路由切换时加载所需要资源。
工具:Angular-ui-router,oclazyload,requirejs。

  • 配置oclazyload
    在引入oclazyload文件后配置主要参数项
        app.config([‘$ocLazyLoadProvider‘,function($ocLazyLoadProvider){        $ocLazyLoadProvider.config({            loadedModules: [‘monitorApp‘],//主模块名,和ng.bootstrap(document, [‘monitorApp‘])相同            jsLoader: requirejs, //使用requirejs去加载文件            files: [‘modules/summary‘,‘modules/appEngine‘,‘modules/alarm‘,‘modules/database‘], //主模块需要的资源,这里主要子模块的声明文件            debug: true        });   }]);

     

  • 配置ui-route
    利用angularjs-ui-route配置路由跳转的基本规则和需要懒加载文件
        app.config([‘$stateProvider‘, ‘$urlRouterProvider‘,function($stateProvider, $urlRouterProvider){        var lazyDeferred;        /**         * 路由切换时调用         * @param param.file 懒加载文件数组         * @param tpl 子模块view视图         * @param module 子模块名         */        function resovleDep(param,tpl,module){            var resolves = {                loadMyCtrl: [‘$ocLazyLoad‘, ‘$templateCache‘, ‘$q‘, function($ocLazyLoad,$templateCache,$q) {                    lazyDeferred = $q.defer();                    return $ocLazyLoad.load({                        name : module,                        cache: false,                        files: param.files                    }).then(function() {                        lazyDeferred.resolve($templateCache.get(tpl));                    });                }]            };            return resolves;        };        $urlRouterProvider.otherwise(‘/summary‘);        //路由配置        $stateProvider            .state(‘module1‘, {                url:‘/module1‘,                templateProvider: function() { return lazyDeferred.promise; },                controller: ‘module1Controller‘,                resolve : resovleDep({files:[                    ‘controllers/module1Ctrl‘,                    ‘services/module1Service‘,                    ‘directives/module1Directive‘                ]}, ‘views/module1.html‘, ‘app.module1‘)            })            .state(‘module2‘, {                abstract: true,                url: ‘/module2‘,                templateUrl: ‘views/module2.html‘            })            .state(‘module2.list‘, {                url: ‘‘,                templateProvider: function() { return lazyDeferred.promise; },                controller: ‘module2Controller‘,                resolve : resovleDep({files:[                    ‘controllers/module2ListCtrl‘,                    ‘services/module2Service‘                ]}, ‘views/list.html‘, ‘app.module1‘)            })            .state(‘module1.detail‘, {                url: ‘/:id‘,                templateProvider: function() { return lazyDeferred.promise; },                controller: ‘detailController‘,                resolve : resovleDep({files:[                     ‘controllers/detailCtrl‘,                     ‘services/detailService‘                ]}, ‘views/detail.html‘, ‘app.module2‘)            });    }]);

     

结束

">结束

ok,至此就可以在路由切换时方便的加载子模块和依赖资源,oclazyload和ui-router还有很多可挖掘的,大家可参考api满足需求。
ps:最初用angular-route+oclazyload做时出现:

multiple directives asking for isolated scope on
multiple asking for template

等问题,不好用,建议使用ui-route,强大的多。

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载