AngularJs 动态加载模块和依赖

最近项目比较忙额，白天要上班，晚上回来还需要做Angular知识点的ppt给同事，毕竟年底要辞职了，项目的后续开发还是需要有人接手的，所以就占用了晚上学习的时间。本来一直不打算写这些第三方插件的学习笔记，不过觉得按需加载模块并且成功使用这个确实是个好处，还是记录下来吧。基于本兽没怎么深入的使用requireJs，所以本兽不知道这个和requireJs有什么区别，也不能清晰的说明这到底算不算Angular的按需加载。
为了实现这篇学习笔记知识点的效果，我们需要用到：
angular:https://github.com/angular/angular.js
ui-router:https://github.com/angular-ui/ui-router
ocLazyLoad:https://github.com/ocombe/ocLazyLoad
废话不多说，进入正题...
首先我们看下文件结构：

Angular-ocLazyLoad --- demo文件夹Scripts --- 框架及插件文件夹angular-1.4.7--- angular 不解释angular-ui-router--- uirouter 不解释oclazyload --- ocLazyload 不解释bootstrap--- bootstrap 不解释angular-tree-control-master --- angular-tree-control-master 不解释ng-table--- ng-table 不解释angular-bootstrap--- angular-bootstrap 不解释js --- js文件夹 针对demo写的js文件controllers --- 页面控制器文件夹angular-tree-control.js --- angular-tree-control控制器代码default.js --- default控制器代码ng-table.js --- ng-table控制器代码app.config.js--- 模块注册及配置代码oclazyload.config.js--- 加载模块配置代码route.config.js --- 路由配置及加载代码views--- html页面文件夹angular-tree-control.html--- angular-tree-control插件的效果页面default.html--- default页面ng-table.html--- ng-table插件效果页面ui-bootstrap.html--- uibootstrap插件效果页面index.html --- 主页面

注意：这个demo没做嵌套路由，只是简单实现单视图的路由以展示效果。
我们来看主页面的代码：

<！DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css" /><script src="Scripts/angular-1.4.7/angular.js"></script><script src="Scripts/angular-ui-router/release/angular-ui-router.min.js"></script><script src="Scripts/oclazyload/dist/ocLazyLoad.min.js"></script><script src="js/app.config.js"></script><script src="js/oclazyload.config.js"></script><script src="js/route.config.js"></script></head><body><div ng-app="templateApp"><div><a href="#/default">主页</a><a href="#/uibootstrap" >ui-bootstrap</a><a href="#/ngtable">ng-table</a><a href="#/ngtree">angular-tree-control</a></div><div ui-view></div></div></body></html>

在这个页面，我们只加载了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js，以及3个配置的js文件。
再看看四个页面的html代码：
angular-tree-control效果页面

<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions"> {{node.title}} </treecontrol>

页面上有个使用该插件对应的指令。
default页面

<div class="ng-cloak"> {{default.value}} </div>

这里我们只是用来证明加载并正确执行default.js。
ng-table效果页面

<div class="ng-cloak"><div class="p-h-md p-v bg-white box-shadow pos-rlt"><h3 class="no-margin">ng-table</h3></div><button ng-click="ngtable.tableParams.sorting（{}）" class="btn btn-default pull-right">Clear sorting</button><p><strong>Sorting:</strong> {{ngtable.tableParams.sorting（）|json}}</p><table ng-table="ngtable.tableParams" class="table table-bordered table-striped"><tr ng-repeat="user in $data"><td data-title=""Name"" sortable=""name"">{{user.name}}</td><td data-title=""Age"" sortable=""age"">{{user.age}}</td></tr></table></div>

这里写了些简单的ng-table效果。
ui-bootstrap效果页面

<span uib-dropdown class="ng-cloak"> <a href id="simple-dropdown" uib-dropdown-toggle> 下拉框触发 </a> <ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown"> 下拉框内容.这里写个效果证明实现动态加载即可 </ul> </span>

这里仅写了个下拉框效果，证明正确加载并使用该插件。
好了，看完了html，我们看下加载配置和路由配置：

"use strict"var tempApp = angular.module（"templateApp",["ui.router","oc.lazyLoad"]）.config（["$provide","$compileProvider","$controllerProvider","$filterProvider",function（$provide,$compileProvider,$controllerProvider,$filterProvider）{tempApp.controller = $controllerProvider.register;tempApp.directive = $compileProvider.directive;tempApp.filter = $filterProvider.register;tempApp.factory = $provide.factory;tempApp.service =$provide.service;tempApp.constant = $provide.constant;}]）;

以上代码对模块的注册，仅仅依赖了ui.router和oc.LazyLoad。配置也只是简单配置了模块，以便在后面的js能识别到tempApp上的方法。
然后我们再看看ocLazyLoad加载模块的配置：

"use strict"tempApp.constant（"Modules_Config",[{name:"ngTable",module:true,files:["Scripts/ng-table/dist/ng-table.min.css","Scripts/ng-table/dist/ng-table.min.js"]},{name:"ui.bootstrap",module:true,files:["Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"]},{name:"treeControl",module:true,files:["Scripts/angular-tree-control-master/css/tree-control.css","Scripts/angular-tree-control-master/css/tree-control-attribute.css","Scripts/angular-tree-control-master/angular-tree-control.js"]}]）.config（["$ocLazyLoadProvider","Modules_Config",routeFn]）;function routeFn（$ocLazyLoadProvider,Modules_Config）{$ocLazyLoadProvider.config（{debug:false,events:false,modules:Modules_Config}）;};

路由的配置：

"use strict"tempApp.config（["$stateProvider","$urlRouterProvider",routeFn]）;function routeFn（$stateProvider,$urlRouterProvider）{$urlRouterProvider.otherwise（"/default"）;$stateProvider.state（"default",{url:"/default",templateUrl:"views/default.html",controller:"defaultCtrl",controllerAs:"default",resolve:{deps:["$ocLazyLoad",function（$ocLazyLoad）{return $ocLazyLoad.load（"js/controllers/default.js"）;}]} }）.state（"uibootstrap",{url:"/uibootstrap",templateUrl:"views/ui-bootstrap.html",resolve:{deps:["$ocLazyLoad",function（$ocLazyLoad）{return $ocLazyLoad.load（"ui.bootstrap"）;}]} }）.state（"ngtable",{url:"/ngtable",templateUrl:"views/ng-table.html",controller:"ngTableCtrl",controllerAs:"ngtable",resolve:{deps:["$ocLazyLoad",function（$ocLazyLoad）{return $ocLazyLoad.load（"ngTable"）.then（function（）{return $ocLazyLoad.load（"js/controllers/ng-table.js"）;}）;}]} }）.state（"ngtree",{url:"/ngtree",templateUrl:"views/angular-tree-control.html",controller:"ngTreeCtrl",controllerAs:"ngtree",resolve:{deps:["$ocLazyLoad",function（$ocLazyLoad）{return $ocLazyLoad.load（"treeControl"）.then（function（）{return $ocLazyLoad.load（"js/controllers/angular-tree-control.js"）;}）;}]} }）};

ui-bootstrap的下拉框简单的实现不需要控制器，那么我们就只看看ng-table和angular-tree-control的控制器js吧：
ng-table.js

（function（）{"use strict"tempApp.controller（"ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]）;function ngTableCtrlFn（$location,NgTableParams,$filter）{//数据var data = [{ name: "Moroni", age: 50 }, { name: "Tiancum ", age: 43 }, { name: "Jacob", age: 27 }, { name: "Nephi", age: 29 }, { name: "Enos", age: 34 }, { name: "Tiancum", age: 43 }, { name: "Jacob", age: 27 }, { name: "Nephi", age: 29 }, { name: "Enos", age: 34 }, { name: "Tiancum", age: 43 }, { name: "Jacob", age: 27 }, { name: "Nephi", age: 29 }, { name: "Enos", age: 34 }, { name: "Tiancum", age: 43 }, { name: "Jacob", age: 27 }, { name: "Nephi", age: 29 }, { name: "Enos", age: 34 }];this.tableParams = new NgTableParams（// 合并默认的配置和url参数angular.extend（{page: 1,// 第一页count: 10, // 每页的数据量sorting: {name: "asc" // 默认排序}},$location.search（））,{total: data.length, // 数据总数getData: function （$defer, params） {$location.search（params.url（））; // 将参数放到url上，实现刷新页面不会跳回第一页和默认配置var orderedData = params.sorting ?$filter（"orderBy"）（data, params.orderBy（）） :data;$defer.resolve（orderedData.slice（（params.page（） - 1） * params.count（）, params.page（） * params.count（）））;}}）;};}）（）;

angular-tree-control.js

（function（）{"use strict"tempApp.controller（"ngTreeCtrl",ngTreeCtrlFn）;function ngTreeCtrlFn（）{//树数据this.treeData = [{id:"1",title:"标签1",childList:[{id:"1-1",title:"子级1",childList:[{id:"1-1-1",title:"再子级1",childList:[]}]},{id:"1-2",title:"子级2",childList:[{id:"1-2-1",title:"再子级2",childList:[{id:"1-2-1-1",title:"再再子级1",childList:[]}]}]},{id:"1-3",title:"子级3",childList:[]}]},{id:"2",title:"标签2",childList:[{id:"2-1",title:"子级1",childList:[]},{id:"2-2",title:"子级2",childList:[]},{id:"2-3",title:"子级3",childList:[]}]},{id:"3",title:"标签3",childList:[{id:"3-1",title:"子级1",childList:[]},{id:"3-2",title:"子级2",childList:[]},{id:"3-3",title:"子级3",childList:[]}]}];//树配置this.treeOptions = {nodeChildren:"childList",dirSelectable:false};};}）（）;

让我们忽略default.js吧，毕竟里面只有个"Hello Wrold"。
github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
以上就是对AngularJS 动态加载模块和依赖的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！