AngularJs动态加载模块和依赖注入详解
废话不多说，进入正题...
首先我们看下文件结构：
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没做嵌套路由，只是简单实现单视图的路由以展示效果。
我们来看主页面的代码：
<html> <head> <metacharset="utf-8"/> <title></title> <linkrel="stylesheet"href="Scripts/bootstrap/dist/css/bootstrap.min.css"/> <scriptsrc="Scripts/angular-1.4.7/angular.js"></script> <scriptsrc="Scripts/angular-ui-router/release/angular-ui-router.min.js"></script> <scriptsrc="Scripts/oclazyload/dist/ocLazyLoad.min.js"></script> <scriptsrc="js/app.config.js"></script> <scriptsrc="js/oclazyload.config.js"></script> <scriptsrc="js/route.config.js"></script> </head> <body> <divng-app="templateApp"> <div> <ahref="#/default">主页</a> <ahref="#/uibootstrap">ui-bootstrap</a> <ahref="#/ngtable">ng-table</a> <ahref="#/ngtree">angular-tree-control</a> </div> <divui-view></div> </div> </body> </html>
在这个页面，我们只加载了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js，以及3个配置的js文件。
再看看四个页面的html代码：
angular-tree-control效果页面
<treecontroltree-model="ngtree.treeData"class="tree-classicng-cloak"options="ngtree.treeOptions">
{{node.title}}
</treecontrol>
页面上有个使用该插件对应的指令。
default页面
<divclass="ng-cloak">
{{default.value}}
</div>
这里我们只是用来证明加载并正确执行default.js。
ng-table效果页面
<divclass="ng-cloak">
<divclass="p-h-mdp-vbg-whitebox-shadowpos-rlt">
<h3class="no-margin">ng-table</h3>
</div>
<buttonng-click="ngtable.tableParams.sorting({})"class="btnbtn-defaultpull-right">Clearsorting</button>
<p>
<strong>Sorting:</strong>{{ngtable.tableParams.sorting()|json}}
</p>
<tableng-table="ngtable.tableParams"class="tabletable-borderedtable-striped">
<trng-repeat="userin$data">
<tddata-title="'Name'"sortable="'name'">
{{user.name}}
</td>
<tddata-title="'Age'"sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
</div>
这里写了些简单的ng-table效果。
ui-bootstrap效果页面
<spanuib-dropdownclass="ng-cloak"> <ahrefid="simple-dropdown"uib-dropdown-toggle> 下拉框触发 </a> <ulclass="uib-dropdown-menudropdown-menu"aria-labelledby="simple-dropdown"> 下拉框内容.这里写个效果证明实现动态加载即可 </ul> </span>
这里仅写了个下拉框效果，证明正确加载并使用该插件。
好了，看完了html，我们看下加载配置和路由配置：
"usestrict"
vartempApp=angular.module("templateApp",["ui.router","oc.lazyLoad"])
.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",
function($provide,$compileProvider,$controllerProvider,$filterProvider){
tempApp.controller=$controllerProvider.register;
tempApp.directive=$compileProvider.register;
tempApp.filter=$filterProvider.register;
tempApp.factory=$provide.factory;
tempApp.service=$provide.service;
tempApp.constant=$provide.constant;
}]);
以上代码对模块的注册，仅仅依赖了ui.router和oc.LazyLoad。配置也只是简单配置了模块，以便在后面的js能识别到tempApp上的方法。
然后我们再看看ocLazyLoad加载模块的配置：
"usestrict"
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]);
functionrouteFn($ocLazyLoadProvider,Modules_Config){
$ocLazyLoadProvider.config({
debug:false,
events:false,
modules:Modules_Config
});
};
路由的配置：
"usestrict"
tempApp.config(["$stateProvider","$urlRouterProvider","$locationProvider",routeFn]);
functionrouteFn($stateProvider,$urlRouterProvider,$locationProvider){
$urlRouterProvider.otherwise("/default");
$stateProvider
.state("default",{
url:"/default",
views:{
"":{
templateUrl:"views/default.html",
controller:"defaultCtrl",
controllerAs:"default"
}
},
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return$ocLazyLoad.load("js/controllers/default.js");
}]
}
})
.state("uibootstrap",{
url:"/uibootstrap",
views:{
"":{
templateUrl:"views/ui-bootstrap.html"
}
},
resolve:{
deps:["$ocLazyLoad",function($ocLazyLoad){
return$ocLazyLoad.load("ui.bootstrap");
}]
}
})
.state("ngtable",{
url:"/ngtable",
views:{
"":{
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",
views:{
"":{
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(){
"usestrict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
functionngTableCtrlFn($location,NgTableParams,$filter){
varvm=this;
//数据
vardata=[{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}];
vm.tableParams=newNgTableParams(//合并默认的配置和url参数
angular.extend({
page:1,//第一页
count:10,//每页的数据量
sorting:{
name:'asc'//默认排序
}
},
$location.search())
,{
total:data.length,//数据总数
getData:function($defer,params){
$location.search(params.url());//将参数放到url上，实现刷新页面不会跳回第一页和默认配置
varorderedData=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(){
"usestrict"
tempApp
.controller("ngTreeCtrl",ngTreeCtrlFn);
functionngTreeCtrlFn(){
varvm=this;
//树数据
vm.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:[]
}
]
}
];
//树配置
vm.treeOptions={
nodeChildren:"childList",
dirSelectable:false
};
};
})();
让我们忽略default.js吧，毕竟里面只有个"HelloWrold"。
以上就是本文的全部内容，希望对大家的学习有所帮助。