详解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 保存数组到Cookie的代码
Apr 14 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
利用javaScript处理常用事件详解
Apr 14 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
PHP ajax 分页类代码
2008/11/13 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php注册登录系统简化版
2020/12/28 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
python中list循环语句用法实例
2014/11/10 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python框架中flask知识点总结
2018/08/17 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
基于python实现复制文件并重命名
2020/09/16 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
儿童生日会策划方案
2014/05/15 职场文书
小学优秀教师材料
2014/12/15 职场文书
小升初自荐信范文
2015/03/05 职场文书
护士实习自荐信
2015/03/06 职场文书
学校推普周活动总结
2015/05/07 职场文书
催款律师函范文
2015/05/27 职场文书
刮痧观后感
2015/06/05 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
初中政治教师教学反思
2016/02/23 职场文书