刚开始用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打包后的文件将会异常 ...
-
iOS开发UI篇—懒加载
iOS开发UI篇—懒加载 1.懒加载基本 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
随机推荐
-
PHP实现RESTful风格的API实例(二)
接前一篇PHP实现RESTful风格的API实例(一) Response.php :包含一个Request类,即输出类.根据接收到的Content-Type,将Request类返回的数组拼接成对应的格 ...
-
Flex4/Flash开发在线音乐播放器 , 含演示地址
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
-
tyvj 1153 间谍网络 tarjan有向图强连通
P1153 - 间谍网络 From ForeverBell Normal (OI)总时限:13s 内存限制:128MB 代码长度限制:64KB 描述 Description 由于外国 ...
-
IOS静态库和Framework区别
一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的区别? 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系 ...
-
七牛对用户使用webp图片格式的使用建议
Qiniu 七牛问题解答 Chrome浏览器是可打开WebP格式的.可是并非全部的浏览器都支持webp格式,比如360.ie等浏览器是不支持的. WebP格式,谷歌(google)开发的一种旨在加快图 ...
-
MATLAB编译器
1. mcc filename.cpp 或者mcc filename.c 可以将cpp或者c源程序文件,编译为filename.mexw32(32位系统)或者filename.mexw64(64位系统 ...
-
初识Haskell 三:函数function
对Discrete Mathematics Using a Computer的第一章Introduction to Haskell进行总结.环境Windows 函数毫无疑问是函数式语言的核心. 在Ha ...
-
Jmeter录制手机app脚本
转:http://www.cnblogs.com/yangxia-test/p/5484616.html 环境准备: 1.手机 2.wifi 3.Jmeter 具体步骤: 1.启动Jmeter ...
-
jieba库和好玩的词云
首先,通过pip3 install jieba安装jieba库,随后在网上下载<斗破>. 代码如下: import jieba.analyse path = '小说路径' fp = ope ...
-
Android中的Context(一)
Android中的Context(一) 在Android开发中,Context可以说是我们接触地非常多的一个概念了,也译作"上下文",但是这个上下文到底是什么却并不好理解. 通俗的 ...