AngularJs 動(dòng)態(tài)加載模塊和依賴
更新時(shí)間：2016年09月15日 14:18:37 作者：野獸''
這篇文章主要介紹了AngularJs 動(dòng)態(tài)加載模塊和依賴方法的相關(guān)資料,需要的朋友可以參考下
最近項(xiàng)目比較忙額，白天要上班，晚上回來(lái)還需要做Angular知識(shí)點(diǎn)的ppt給同事，畢竟年底要辭職了，項(xiàng)目的后續(xù)開(kāi)發(fā)還是需要有人接手的，所以就占用了晚上學(xué)習(xí)的時(shí)間。本來(lái)一直不打算寫(xiě)這些第三方插件的學(xué)習(xí)筆記，不過(guò)覺(jué)得按需加載模塊并且成功使用這個(gè)確實(shí)是個(gè)好處，還是記錄下來(lái)吧。基于本獸沒(méi)怎么深入的使用requireJs，所以本獸不知道這個(gè)和requireJs有什么區(qū)別，也不能清晰的說(shuō)明這到底算不算Angular的按需加載。
為了實(shí)現(xiàn)這篇學(xué)習(xí)筆記知識(shí)點(diǎn)的效果，我們需要用到：
angular:https://github.com/angular/angular.js
ui-router:https://github.com/angular-ui/ui-router
ocLazyLoad:https://github.com/ocombe/ocLazyLoad
廢話不多說(shuō)，進(jìn)入正題...
首先我們看下文件結(jié)構(gòu)：
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文件夾 針對(duì)demo寫(xiě)的js文件
controllers --- 頁(yè)面控制器文件夾
angular-tree-control.js --- angular-tree-control控制器代碼
default.js --- default控制器代碼
ng-table.js --- ng-table控制器代碼
app.config.js --- 模塊注冊(cè)及配置代碼
oclazyload.config.js --- 加載模塊配置代碼
route.config.js --- 路由配置及加載代碼
views --- html頁(yè)面文件夾
angular-tree-control.html --- angular-tree-control插件的效果頁(yè)面
default.html --- default頁(yè)面
ng-table.html --- ng-table插件效果頁(yè)面
ui-bootstrap.html --- uibootstrap插件效果頁(yè)面
index.html --- 主頁(yè)面
注意：這個(gè)demo沒(méi)做嵌套路由，只是簡(jiǎn)單實(shí)現(xiàn)單視圖的路由以展示效果。
我們來(lái)看主頁(yè)面的代碼：
<!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">主頁(yè)</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>
在這個(gè)頁(yè)面，我們只加載了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js，以及3個(gè)配置的js文件。
再看看四個(gè)頁(yè)面的html代碼：
angular-tree-control效果頁(yè)面
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
{{node.title}}
</treecontrol>
頁(yè)面上有個(gè)使用該插件對(duì)應(yīng)的指令。
default頁(yè)面
<div class="ng-cloak">
{{default.value}}
</div>
這里我們只是用來(lái)證明加載并正確執(zhí)行default.js。
ng-table效果頁(yè)面
<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>
這里寫(xiě)了些簡(jiǎn)單的ng-table效果。
ui-bootstrap效果頁(yè)面
<span uib-dropdown class="ng-cloak">
<a href id="simple-dropdown" uib-dropdown-toggle>
下拉框觸發(fā)
</a>
<ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
下拉框內(nèi)容.這里寫(xiě)個(gè)效果證明實(shí)現(xiàn)動(dòng)態(tài)加載即可
</ul>
</span>
這里僅寫(xiě)了個(gè)下拉框效果，證明正確加載并使用該插件。
好了，看完了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;
}]);
以上代碼對(duì)模塊的注冊(cè)，僅僅依賴了ui.router和oc.LazyLoad。配置也只是簡(jiǎn)單配置了模塊，以便在后面的js能識(shí)別到tempApp上的方法。
然后我們?cè)倏纯磑cLazyLoad加載模塊的配置：
"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的下拉框簡(jiǎn)單的實(shí)現(xiàn)不需要控制器，那么我們就只看看ng-table和angular-tree-control的控制器js吧：
ng-table.js
(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
//數(shù)據(jù)
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( // 合并默認(rèn)的配置和url參數(shù)
angular.extend({
page: 1, // 第一頁(yè)
count: 10, // 每頁(yè)的數(shù)據(jù)量
sorting: {
name: 'asc' // 默認(rèn)排序
}
},
$location.search())
,{
total: data.length, // 數(shù)據(jù)總數(shù)
getData: function ($defer, params) {
$location.search(params.url()); // 將參數(shù)放到url上，實(shí)現(xiàn)刷新頁(yè)面不會(huì)跳回第一頁(yè)和默認(rèn)配置
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(){
//樹(shù)數(shù)據(jù)
this.treeData = [
{
id:"1",
title:"標(biāo)簽1",
childList:[
{
id:"1-1",
title:"子級(jí)1",
childList:[
{
id:"1-1-1",
title:"再子級(jí)1",
childList:[]
}
]
},
{
id:"1-2",
title:"子級(jí)2",
childList:[
{
id:"1-2-1",
title:"再子級(jí)2",
childList:[
{
id:"1-2-1-1",
title:"再再子級(jí)1",
childList:[]
}
]
}
]
},
{
id:"1-3",
title:"子級(jí)3",
childList:[]
}
]
},
{
id:"2",
title:"標(biāo)簽2",
childList:[
{
id:"2-1",
title:"子級(jí)1",
childList:[]
},
{
id:"2-2",
title:"子級(jí)2",
childList:[]
},
{
id:"2-3",
title:"子級(jí)3",
childList:[]
}
]}
,
{
id:"3",
title:"標(biāo)簽3",
childList:[
{
id:"3-1",
title:"子級(jí)1",
childList:[]
},
{
id:"3-2",
title:"子級(jí)2",
childList:[]
},
{
id:"3-3",
title:"子級(jí)3",
childList:[]
}
]
}
];
//樹(shù)配置
this.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
};
};
})();
讓我們忽略default.js吧，畢竟里面只有個(gè)"Hello Wrold"。
github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
以上就是對(duì)AngularJS 動(dòng)態(tài)加載模塊和依賴的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！
相關(guān)文章
angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-10-10
angular6根據(jù)environments配置文件更改開(kāi)發(fā)所需要的環(huán)境的方法
這篇文章主要介紹了angular6根據(jù)environments配置文件更改開(kāi)發(fā)所需要的環(huán)境的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
對(duì)angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對(duì)angularjs框架下controller間的傳值方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angular實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
詳談angularjs中路由頁(yè)面強(qiáng)制更新的問(wèn)題
下面小編就為大家?guī)?lái)一篇詳談angularjs中路由頁(yè)面強(qiáng)制更新的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
AngularJS入門(mén)教程之AngularJS 模板
本文主要介紹AngularJS 模板，這里整理了詳細(xì)相關(guān)資料，并附示例代碼，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了Angular2 (RC4) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09
angular.JS實(shí)現(xiàn)網(wǎng)頁(yè)禁用調(diào)試、復(fù)制和剪切
這篇文章主要給大家介紹了angular.JS實(shí)現(xiàn)網(wǎng)頁(yè)禁用調(diào)試、復(fù)制和剪切的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了淺談angular2路由預(yù)加載策略，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
AngularJS入門(mén)教程之過(guò)濾器用法示例
這篇文章主要介紹了AngularJS過(guò)濾器用法,結(jié)合實(shí)例形式簡(jiǎn)單的分析了AngularJS過(guò)濾器的功能及基本用法,并舉例說(shuō)明了自定義過(guò)濾器的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-11-11