AngularJs 实现动态（懒）加载主要是依赖于3个主JS文件和一段依赖的脚本。
实现的过程主要是引用3个主要的JS文件
- <script src="angular/1.4.8/angular/angular.min.js"></script>
- "angular/ui-router/release/angular-ui-router.min.js"></script>
- "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){
appcontroller register;
directive directive;
filter ;
factory $providefactory;
service service;
constant constant;
}]);
// 按模块化加载其他的脚本文件
'Modules_Config'[
name:'treeControl' serietrue files[
"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
]
}
]);
"$ocLazyLoadProvider""Modules_Config"routeFn routeFn$ocLazyLoadProviderModules_Config){
$ocLazyLoadProvider({
debug:false events modules:Modules_Config
});
};
以上是初始化动态加载的配置过程。
接着是建立路由
"use strict"
"$stateProvider""$urlRouterProvider"]);
$stateProvider$urlRouterProvider){
$urlRouterProviderotherwise"/main");
$stateProvider
state"main" url: templateUrl"views/main.html" controller"mainCtrl" controllerAs resolve:{
deps:["$ocLazyLoad"function$ocLazyLoadreturn $ocLazyLoadload"controllers/main.js");
}]
}
})
"adminUser""/adminUser""views/adminUser.html""adminUserCtrl":{
"controllers/adminUser.js"}]
}
})
最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
main.html
<div>
{{main.value}}
</div>
adminUser.html
{{adminUser.value}}
main.js
/**
* mainCtrl
* Created by pkcms.cn on 2016/6/24.
*/
(@H_224_403@(){
"use strict"
controller mainCtrlFn);
{
thisvalue "Hello World"}
}())
adminUser.js
* adminUserCtrlFn
'adminUserCtrl'adminUserCtrlFn);
adminUserCtrlFn{
"welcome to admin user"}());
