AngularJs动态加载模块和依赖注入详解
程序员文章站
2023-08-27 18:48:28
废话不多说，进入正题...
首先我们看下文件结构：
angular-oclazyload --- demo文件夹
scripts...
废话不多说，进入正题...
首先我们看下文件结构：
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>
<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.register;
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","$locationprovider",routefn]);
function routefn($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(){
"use strict"
tempapp
.controller("ngtablectrl",["$location","ngtableparams","$filter",ngtablectrlfn]);
function ngtablectrlfn($location,ngtableparams,$filter){
var vm = this;
//数据
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 }];
vm.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(){
var vm = 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吧，毕竟里面只有个"hello wrold"。
以上就是本文的全部内容，希望对大家的学习有所帮助。
上一篇： AngularJS初始化静态模板详解