AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

最近一直在学习 AngularJS 的实践过程中，之前虽然也在学，但总因为工作方面的各种原因一直是断断续续的，虽然之前也一直看但总找不到入手的感觉，可能是自己的心太高想着一下子就能掌握，还有一个原因是之前用习惯了 jQuery 的模式，在 AngularJs 下不太适应所以在学习过程中就遇到许多问题，就像今天解决的动态加载问题，在 AngularJs 常规的教程书籍中很少有提到，有的甚至都没有，都是用常规的一次性的加载方式，这种方式只适合用在教学和小型项目中，在中大型项目中不推荐使用，最好是使用动态（懒）加载的方式。这种方式的好处就不用说有经验的程序员都知道。

今天是下了决心把这个问题给解决了，这个解决的过程还得感谢我之前的一位做前端的同事，他比我早学习 AngularJs。虽然他在自己的博客上也记录，但他上面的记录含有一些 C#语言的元素在里面会有看不明白的情况，我这里直接用纯前端语言做下整理。

好了，现进入正题，在 AngularJs 实现动态（懒）加载主要是依赖于3个主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" ] }]);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"; }}());

github url :https://github.com/366065186/angularjs-oclazyload