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_272_403@(){
  
  @H_403_408@"use strict"
  
  
controller mainCtrlFn);
  
  
{
  
  
thisvalue "Hello World"}
  
  
}())
 
 

adminUser.js

 * adminUserCtrlFn
  
  
'adminUserCtrl'adminUserCtrlFn);
  
  
 adminUserCtrlFn{
  
  
"welcome to admin user"}());