Angular-ui-router + oclazyload + requirejs实现资源随route懒加载
2015-01-06 14:20
603 查看
本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载。
build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题:build后文件大;线上调试不方便,尤其在html2js后问题更明显。
开发中尽量在原有文件里进行新业务添加,不增加额外的http请求压力,但是存在问题:多人合作时需要经常处理代码冲突;单个文件(control,directive等)很大,看的是眼花缭乱,容易出问题。
工具:Angular-ui-router,oclazyload,requirejs。
配置oclazyload
在引入oclazyload文件后配置主要参数项
配置ui-route
利用angularjs-ui-route配置路由跳转的基本规则和需要懒加载文件
ps:最初用angular-route+oclazyload做时出现:
等问题,不好用,建议使用ui-route,强大的多。
问题
目前大部分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,强大的多。
相关文章推荐
- 第10篇:ui-router+ocLazyLoad实现控制器js文件的按需加载
- Angular-Ui-Router+ocLazyLoad动态加载脚本示例
- AngularJs+ui.route+lazyload按需加载
- Angular-Ui-Router+ocLazyLoad动态加载脚本
- angular.js ui-route 可以实现路由嵌套
- angular+ui-router+requirejs整合demo
- AngularJS ui-router 用resolve、service预先加载数据的正确写法
- angularJS+requireJS实现controller及directive的按需加载
- 【翻译】oc.lazyLoad with Angular ui router(按需加载文件)
- AngularJS + ui-router + RequireJS异步加载注册controller/directive/filter/service
- AngularJS ui-router 用resolve、service预先加载数据写法,属于优化性能方面吧
- AngularJs、RequireJs、AngularAMD、ui-router搭建的JS文件动态加载
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
- angularJS+requireJS实现controller及directive的按需加载
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
- angularJS+requireJS实现controller及directive的按需加载
- angular1x初始与架构演进(三)Ui-Router+OcLazyLoad加载模块
- Angular+Requirejs实现模块按需加载
- angularJS+requireJS实现controller及directive的按需加载示例
- AngularJS+RequireJs实现动态加载JS和页面的方案研究