详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖


Posted in Javascript onMarch 01, 2017

最近在使用AngularJS,发现AngularJS菜鸟教程上的东西太过于基础,很多东西都没有提及,比如今天的一个关于前端的优化问题,懒加载。通过路由实现地址分发的时候,再通过懒加载模式加载你所需的文件,比如是相关的controller,就是js,这样有利于提高首次加载的负担。

下面就是一个懒加载的实现过程。

实现的过程主要是引用3个主要的JS文件:

<script src="angular/1.4.8/angular/angular.min.js"></script>
<script src="angular/ui-router/release/angular-ui-router.min.js"></script>
<script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>

然后通过 APP 配置,将依赖的脚本进行注入操作:

var app = angular.module('pkcms', ["ui.router", "oc.lazyLoad"]);

app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",


 
function ($provide, $compileProvider, $controllerProvider, $filterProvider) {




 app.controller = $controllerProvider.register;




 app.directive = $compileProvider.directive;




 app.filter = $filterProvider.register;




 app.factory = $provide.factory;




 app.service = $provide.service;




 app.constant = $provide.constant;


 
}]);



// 按模块化加载其他的脚本文件




app.constant('Modules_Config', [




 {





 name: 'treeControl',





 serie: true,





 files: [






 "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"





 ]<br>}]);




app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);




function routeFn($ocLazyLoadProvider,Modules_Config){




 $ocLazyLoadProvider.config({




 debug:false,




 events:false,




 modules:Modules_Config


 });

};

以上是初始化动态加载的配置过程。

接着是建立路由:

"use strict"
app.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
 $urlRouterProvider.otherwise("/main");
 $stateProvider
 .state("main",{
 url:"/main",
 templateUrl:"views/main.html",
 controller:"mainCtrl",
 controllerAs:"main",
 resolve:{
 deps:["$ocLazyLoad",function($ocLazyLoad){
 return $ocLazyLoad.load("controllers/main.js");
 }]
 }
 })
 .state("adminUser",{
 url:"/adminUser",
 templateUrl:"views/adminUser.html",
 controller:"adminUserCtrl",
 controllerAs:"adminUser",
 resolve:{
 deps:["$ocLazyLoad",function($ocLazyLoad){
 return $ocLazyLoad.load("controllers/adminUser.js");
 }]
 }
 })
};

最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试

main.html

<div>
 {{main.value}}
</div>

adminUser.html

<div>
 {{adminUser.value}}
</div>

main.js 

/**
 * mainCtrl
 * Created by pkcms.cn on 2016/6/24.
 */
(function () {
 "use strict"
 app.controller("mainCtrl", mainCtrlFn);
 function mainCtrlFn() {
 this.value = "Hello World";
 }
}())

adminUser.js

/**
 * adminUserCtrlFn
 * Created by pkcms.cn on 2016/6/24.
 */
(function () {
 app.controller('adminUserCtrl',adminUserCtrlFn);
 function adminUserCtrlFn() {
 this.value = "welcome to admin user";
 }
}());

demo下载:angularjs-oclazyload_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
Javascript仿京东放大镜的效果
Mar 01 #Javascript
Ajax实现不刷新取最新商品
Mar 01 #Javascript
Angular1.x复杂指令实例详解
Mar 01 #Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 #Javascript
Angular1.x自定义指令实例详解
Mar 01 #Javascript
轻松学习Javascript闭包
Mar 01 #Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 #Javascript
You might like
yii操作cookie实例简介
2014/07/09 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python实现二叉查找树实例代码
2018/02/08 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python 实现绘制整齐的表格
2019/11/18 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
PageFactory设计模式基于python实现
2020/04/14 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
统计系教授推荐信
2014/02/28 职场文书
美食节目策划方案
2014/05/31 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
基层党建工作简报
2015/07/21 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
python flask框架快速入门
2021/05/14 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android