详解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 相关文章推荐
js图片实时加载提供网页打开速度
Sep 11 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
js实现进度条的方法
2015/02/13 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python操作excel的方法
2018/08/16 Python
python中eval与int的区别浅析
2019/08/11 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Python 在函数上添加包装器
2020/07/28 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
CNC数控操作工岗位职责
2013/11/19 职场文书
商务英语广告词大全
2014/03/18 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
白鹤梁导游词
2015/02/06 职场文书
小学体育课教学反思
2016/02/16 职场文书