脚本宝典收集整理的这篇文章主要介绍了angular按需加载的运用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在用angular做一些比较大的项目的时候,如果像以前一样,在首页引入一大堆js文件话,无疑会造成首次加载消耗很多的时间,对用户体验非常不好,所以按需加载就应运而生了,在需要用的时候才加载,这样很高效。有些js框架可以实现,比图RequireJS ,seaJS。是一个根据需要来加载 js文件的 JavaScript框架,可避免不必要的js文件加载,提升网页浏览速度。
但是今天给大家介绍另外一个基于angular的插件,ocLazyLoadjs,同样可以实现按需加载。在angular中运用ocLazyLoadjs实现按需加载,可以在一下几个方面进行运用:
1)在ui-route路由配置中加载
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return $ocLazyLoad.load([所需加载的文件]);//路径一定要正确
}]
}
2)在控制器中动态加载,需要引入$ocLazyLoad
$ocLazyLoad.load([所需加载的文件]);
3)依赖加载
angular.module('myapp', [[
所需加载的文件
]])
4)在模板template中加载
<div oc-lazy-load="lazyload"></div>
$ocLazyLoadProvider.config({
modules: [{
name: 'lazyload',
files: [
'所需加载的文件'
]
}]
})
下面结合一个dome,详细说说
目录如下:
index.htML