Angular-ui-router + oclazyload + requirejs实现资源随route懒加载
刚开始用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实现资源随route懒加载的更多相关文章
- Angular性能优化实践——巧用第三方组件和懒加载技术
应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...
- angular 引入ocLazyLoad实现js、controller懒加载
项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...
- requirejs:性能优化-及早并行加载
为了提高页面的性能,通常情况下,我们希望资源尽可能地早地并行加载.这里有两个要点,首先是尽早,其次是并行. 通过data-main方式加载要尽可能地避免,因为它让requirejs.业务代码不必要地串 ...
- angular懒加载的一些坑
写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...
- angular配置懒加载路由的思路
前言 本人记性不好,对于别人很容易记住的事情,我愣是记不住,所以还是靠烂笔头来帮我长长记性. 参考文章:https://blog.csdn.net/xif3681/article/details/84 ...
- angular懒加载机制 刷新后无法回退解决方案
今天在项目中遇到一个很奇怪的问题,使用oclazyload来懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无 ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- 路由懒加载---Vue Router
一.什么是懒加载? 懒加载也就是延迟加载或者按需加载,即在需要的时候进行加载. 二.为什么在Vue路由中使用懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常 ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
随机推荐
- intellij idea 学习
intellij idea是一个java的ide.由jetbrain开发. intellij idea快捷键 快捷键 说明 备注 Ctrl+N 快速导航到类 类似于Resharper中的C ...
- ASP.NET网站单独
解决ASP.NET网站单独发布指定页面问题 目录 前提 开始 aspx.cs文件放到单独的类库项目 一个可选择勾选页面的发布工具:LimusicAddin 前提 Asp.net 发布分为:动态编译和预 ...
- poj1001求幂
这道题目是实质上就是高精度的乘法,虽然是带小数点的数多少次幂,但是开始我们需要将它变为整数进行求幂,然后再加上小数点,然后要考虑前导0,有效数位问题,做的时候要十分的小心 #include<io ...
- CentOS5、6 NFS的安装配置及mount方法
一.环境介绍: 服务器:centos 192.168.1.225 客户端:centos 192.168.1.226 二.安装: NFS的安装配置:centos 5 : yum -y install n ...
- 对象池化技术 org.apache.commons.pool
恰当地使用对象池化技术,可以有效地减少对象生成和初始化时的消耗,提高系统的运行效率.Jakarta Commons Pool组件提供了一整套用于实现对象池化的框架,以及若干种各具特色的对象池实现,可以 ...
- 向输出到console的文字加样式
Chrome 控制台新玩法-向输出到console的文字加样式 有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的 ...
- JavaEE:Servlet简介及ServletConfig、ServletContext
Servlet简介 1.Servlet是sun公司提供的一门用于开发动态web资源的技术*静态web资源:固定数据文件*动态web资源:通过程序动态生成数据文件2.Servlet技术基于Request ...
- 用aspx文件作为模板
用aspx文件作为模板 首先申明:标题中的如果是可以去掉的. 想写这篇文章很长时间了,一来是跟大家分享一下,别浪费时间在写代码生成器上面了,什么CodeSmith,XXCodeGenerator等等, ...
- Linux epoll总结
Linux epoll总结 Linux epoll epoll是Kernel 2.6后新加入的事件机制,在高并发条件下,远优于select.epoll最大的好处在于它不会随着监听fd数目的增长而降低 ...
- linux nVidia driver 304 319 . installation by hand
It's so painful to install nVidia driver by hand on linux. If you remove it or you want to upgrade b ...