AngularJs가 동적으로 로드하는 모듈 및 종속성 주입에 대한 자세한 설명_AngularJS
- WBOY원래의
- 2016-05-16 15:20:391434검색
더 이상 고민하지 않고 본론으로 들어가겠습니다...
먼저 파일 구조를 살펴보겠습니다.
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 --- 主页面
참고: 이 데모는 중첩 라우팅을 구현하지 않고 단순히 단일 보기 라우팅을 구현하여 효과를 보여줍니다.
메인 페이지의 코드를 살펴보겠습니다:
<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 코드를 다시 한 번 살펴보세요.
앵귤러 트리 제어 효과 페이지
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
{{node.title}}
</treecontrol>
페이지에 플러그인 사용 지침이 있습니다.
기본 페이지
<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 및 angle-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"만 있습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.