AngularJs 实现动态（懒）加载主要是依赖于3个主JS文件和一段依赖的脚本。

实现的过程主要是引用3个主要的JS文件

 
 

  
  
<script src="angular/1.4.8/angular/angular.min.js"></script>@H_403_21@
  
  
"angular/ui-router/release/angular-ui-router.min.js"></script>@H_403_21@
  
  
"angular/oclazyload/src/ocLazyLoad.min.js"></script>@H_403_21@
 
 

然后通过 APP 配置，将依赖的脚本进行注入操作

var app = angular.module('pkcms', ["ui.router" "oc.lazyLoad"]);@H_403_21@
  
  
app.config(["$provide""$compileProvider""$controllerProvider""$filterProvider"403_21@
  
  
 function($provide $compileProvider $controllerProvider $filterProvider){@H_403_21@
  
  
 appcontroller register;@H_403_21@
  
  
directive directive;@H_403_21@
  
  
filter ;@H_403_21@
  
  
factory  $providefactory;@H_403_21@
  
  
service service;@H_403_21@
  
  
constant constant;@H_403_21@
  
  
}]);@H_403_21@
  
  
// 按模块化加载其他的脚本文件@H_403_21@
  
  
'Modules_Config'[@H_403_21@
  
  
 name:'treeControl'403_21@
  
  
 serietrue403_21@
  
  
 files[@H_403_21@
  
  
"Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"@H_403_21@
  
  
]@H_403_21@
  
  
}@H_403_21@
  
  
]);@H_403_21@
  
  
"$ocLazyLoadProvider""Modules_Config"routeFn routeFn$ocLazyLoadProviderModules_Config){@H_403_21@
  
  
 $ocLazyLoadProvider({@H_403_21@
  
  
 debug:false events modules:Modules_Config@H_403_21@
  
  
});@H_403_21@
  
  
};@H_403_21@
 
 

以上是初始化动态加载的配置过程。

接着是建立路由

"use strict"@H_403_21@
  
  
"$stateProvider""$urlRouterProvider"]);@H_403_21@
  
  
$stateProvider$urlRouterProvider){@H_403_21@
  
  
 $urlRouterProviderotherwise"/main");@H_403_21@
  
  
 $stateProvider@H_403_21@
  
  
state"main"403_21@
  
  
 url:403_21@
  
  
 templateUrl"views/main.html"403_21@
  
  
 controller"mainCtrl"403_21@
  
  
 controllerAs403_21@
  
  
 resolve:{@H_403_21@
  
  
 deps:["$ocLazyLoad"function$ocLazyLoadreturn $ocLazyLoadload"controllers/main.js");@H_403_21@
  
  
}]@H_403_21@
  
  
}@H_403_21@
  
  
})@H_403_21@
  
  
"adminUser"403_21@
  
  
"/adminUser""views/adminUser.html""adminUserCtrl"403_21@
  
  
:{@H_403_21@
  
  
"controllers/adminUser.js"}]@H_403_21@
  
  
}@H_403_21@
  
  
})@H_403_21@
  
  
 最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
 main.html
 
<div>@H_403_21@
  
  
 {{main.value}}@H_403_21@
  
  
</div>@H_403_21@
 
 
 
 adminUser.html
 
 {{adminUser.value}}@H_403_21@
  
  
 main.js
 
/**@H_403_21@
  
  
 * mainCtrl@H_403_21@
  
  
 * Created by pkcms.cn on 2016/6/24.@H_403_21@
  
  
 */@H_403_21@
  
  
(@H_559_403@(){@H_403_21@
  
  
"use strict"@H_403_21@
  
  
controller mainCtrlFn);@H_403_21@
  
  
{@H_403_21@
  
  
thisvalue "Hello World"}@H_403_21@
  
  
}())@H_403_21@
 
 
 
 adminUser.js
 
 * adminUserCtrlFn@H_403_21@
  
  
'adminUserCtrl'adminUserCtrlFn);@H_403_21@
  
  
 adminUserCtrlFn{@H_403_21@
  
  
"welcome to admin user"}());@H_403_21@