angular1x初始与架构演进（三）Ui-Router+OcLazyLoad加载模块

七月份的时候有写过一篇OcLazyLoad文章，当时只是初略了解了一下，是为了解决当前项目加载模块过多的问题，但是最后发现项目中模块间耦合性过于复杂，然后项目给出的时间也不是很多，后面就放弃了，这次新项目中使用了。

加载js+css：

angular.module('myRouters', ['ui.router', 'oc.lazyLoad']).config(['$stateProvider', '$urlRouterProvider', '$locationProvider','$ocLazyLoadProvider',function ($stateProvider, $urlRouterProvider, $locationProvider,$ocLazyLoadProvider) {$stateProvider.state('panoramic', {url: '/panoramic',views: {'body': {templateUrl: '../components/panoramic/panoramic.html',},},resolve: {loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {return $ocLazyLoad.load(['css/components/panoramic/panoramic.css','/controllers_panoramic.js']);}]}})}]);

这种写法不支持按需加载指令，指令需要注入模块，模块：

通过OcLazyLoad申明一个模块名，跟引用js

$ocLazyLoadProvider.config({modules: [{name: 'tm.tags',files: ['framework/angular/tm.tags.js']}]});

完整代码：

angular.module('myRouters', ['ui.router', 'oc.lazyLoad']).config(['$stateProvider', '$urlRouterProvider', '$locationProvider','$ocLazyLoadProvider',function ($stateProvider, $urlRouterProvider, $locationProvider,$ocLazyLoadProvider) {$ocLazyLoadProvider.config({modules: [{name: 'tm.tags',files: ['framework/angular/tm.tags.js']}]});$stateProvider.state('panoramic', {url: '/panoramic',views: {'body': {templateUrl: '../components/panoramic/panoramic.html',},},resolve: {loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {return $ocLazyLoad.load(['tm.tags','css/components/panoramic/panoramic.css',js + '/controllers.js',js + '/controllers_panoramic.js']);}]}})}]);

这个就解决了Angular中：指令js、控制器js、样式、第三方库js的按需加载；

但是在实际开发中这样肯定是不满足需求，因为js跟css还是会有缓存

可以通过时间轴来移除这个缓存，下一篇通过gulp来实现

angular1x初始与架构演进（三）Ui-Router+OcLazyLoad加载模块相关推荐

angular1x初始与架构演进（二）
很荣幸第二个项目全权是由我负责的,推进了公司前端技术架构: CDN:js全部cdn通过时间轴来进行区域覆盖更新 OcLazyLoad:Angular按需加载模块js,Angular也可以通过requi ...
angular1x初始与架构演进（一）
angular的亮点:双向数据绑定,指令,路由,服务,过滤器,依赖注入 angular的缺点:相对应学习的东西也过于复杂,不适合seo,虽然可以通过搭建静态服务器来解决这个问题要学会angular最 ...
angular1x初始与架构演进（四）gulp配置+OcLazyLoad中资源MD5时间轴更新
个人不是很喜欢非覆盖式更新这个模式:在一个版本中资源会出现不同的时间轴版本,而且这些版本会一直存在,导致项目越来越大,至于管理这个功能其实git就有提供,webstrom也有提供历史记录,所以这种模式 ...
element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
iOS开发UI篇—懒加载
iOS开发UI篇-懒加载 1.懒加载基本懒加载--也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
awt jtable 多线程加载图片_Java项目实战之天天酷跑（三）：缓冲加载游戏界面
前文,我们完成了开始游戏界面的搭建.本文将实现缓冲加载界面的搭建.并搭建与前面俩界面间的桥梁.实现输入正确用户名密码后,进入开始游戏界面,点击开始游戏按钮后,进入缓冲加载界面的功能. 界面示意图: 具 ...
Qt解决UI界面一次性加载数据过多卡顿的问题
关于Qt如何解决UI界面一次性加载太多数据而卡顿的问题思路分析: 以QTableWidget电子词典为例,每次模糊查询单词时都会产生几十种,几千甚至上万种不同的结果: 例如我们输入a,对a进 ...
学习Mac开发第三弹通过WebView加载网页
学习Mac开发第三弹通过WebView加载网页添加WebKit.framework 关联Delegate 在新建工程的ViewController里拖放一个WebView,并用Autolayou ...
[Aaronyang] 写给自己的WPF4.5 笔记6[三巴掌-大数据加载与WPF4.5 验证体系详解 2/3]
我要做回自己--Aaronyang的博客(www.ayjs.net) 博客摘要: Virtualizing虚拟化DEMO 和大数据加载的思路及相关知识 WPF数据提供者的使用ObjectDataPr ...

angular1x初始与架构演进（三）Ui-Router+OcLazyLoad加载模块

angular1x初始与架构演进（三）Ui-Router+OcLazyLoad加载模块相关推荐

最新文章

热门文章