<table class="text">
<tr class="li1"><td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101 功能，本文就介绍利用此点实现前端资源的懒加载。 问题 目前大部分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: ‘‘, controller: ‘module2Controller‘, resolve : resovleDep({files:[ ‘controllers/module2ListCtrl‘, ‘services/module2Service‘ ]},‘views/list.html‘,‘app.module1‘) }) .state(‘module1.detail‘,{ url: ‘/:id‘, 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，强大的多。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
