首页 > 代码库 > Angular-ui-router + oclazyload + requirejs实现资源随route懒加载
Angular-ui-router + oclazyload + requirejs实现资源随route懒加载
本文主要说明在用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,强大的多。
Angular-ui-router + oclazyload + requirejs实现资源随route懒加载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。