详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖
最近在使用AngularJS，发现AngularJS菜鸟教程上的东西太过于基础，很多东西都没有提及，比如今天的一个关于前端的优化问题，懒加载。通过路由实现地址分发的时候，再通过懒加载模式加载你所需的文件，比如是相关的controller，就是js，这样有利于提高首次加载的负担。
下面就是一个懒加载的实现过程。
实现的过程主要是引用3个主要的JS文件：
<scriptsrc="angular/1.4.8/angular/angular.min.js"></script> <scriptsrc="angular/ui-router/release/angular-ui-router.min.js"></script> <scriptsrc="angular/oclazyload/src/ocLazyLoad.min.js"></script>
然后通过APP配置，将依赖的脚本进行注入操作：
varapp=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]);
functionrouteFn($ocLazyLoadProvider,Modules_Config){
$ocLazyLoadProvider.config({
debug:false,
events:false,
modules:Modules_Config
});
};
以上是初始化动态加载的配置过程。
接着是建立路由：
"usestrict"
app.config(["$stateProvider","$urlRouterProvider",routeFn]);
functionrouteFn($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
*Createdbypkcms.cnon2016/6/24.
*/
(function(){
"usestrict"
app.controller("mainCtrl",mainCtrlFn);
functionmainCtrlFn(){
this.value="HelloWorld";
}
}())
adminUser.js
/**
*adminUserCtrlFn
*Createdbypkcms.cnon2016/6/24.
*/
(function(){
app.controller('adminUserCtrl',adminUserCtrlFn);
functionadminUserCtrlFn(){
this.value="welcometoadminuser";
}
}());
demo下载:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。