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 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>
<p ng-app="templateApp">
 <p>
 <a href="#/default">主页</a>
 <a href="#/uibootstrap" >ui-bootstrap</a>
 <a href="#/ngtable">ng-table</a>
 <a href="#/ngtree">angular-tree-control</a>
 </p>
 <p ui-view></p>
</p>
</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页面

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

这里我们只是用来证明加载并正确执行default.js。

ng-table效果页面

<p class="ng-cloak">
 <p class="p-h-md p-v bg-white box-shadow pos-rlt">
 <h3 class="no-margin">ng-table</h3>
 </p>
 <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>
</p>

这里写了些简单的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"。

更多AngularJs 动态加载模块和依赖相关文章请关注PHP中文网！

AngularJS实现动态编译添加到dom中的方法

AngularJS动态生成div的ID

AngularJS实现给动态生成的元素绑定事件的方法