Angular-ui-router + oclazyload + requirejs实现资源随rou

　　 刚开始用angularjs做项目的时候，我用的是ng-router，觉得加载并不好。所以就用了ui-router，考虑到在app上网页加载速度太慢，所以我就想到了用懒加载，看下是否能提升性能，提高加载速度。 那使用懒加载，就要对项目进行进一步的拆分，我觉得这个拆分，可以提高我对angularjs的理解。

　　

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

问题

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

build时利用grunt-contrib-requirejs提取合并文件，减少http请求，但是存在问题：build后文件大；线上调试不方便，尤其在html2js后问题更明显。 开发中尽量在原有文件里进行新业务添加，不增加额外的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，强大的多。

 

 

文章来自：http://www.cnblogs.com/pengjv/p/4205962.html

查看更多关于Angular-ui-router + oclazyload + requirejs实现资源随rou的详细内容...