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 ---
주의: 이 데모는 플러그인 루트를 만들지 않았습니다. 단지 단시도의 루트를 간단하게 실현하여 효과를 나타낼 뿐입니다.
홈 페이지 코드를 살펴보겠습니다.
<link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css"/>
<script src="Scripts/angular-1.4.7/angular.js"/>
<script src="Scripts/angular-ui-router/release/angular-ui-router.min.js"/>
<script src="Scripts/oclazyload/dist/ocLazyLoad.min.js"/>
<script src="js/app.config.js"/>
<script src="js/oclazyload.config.js"/>
<script src="js/route.config.js"/>
<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>
</code></pre>
</div>
<p> ， bootstrap css、angular js、ui-router js、ocLazyLoad js， 3 js 。<br/> html ：</p>
<p><strong>angular-tree-control </strong><br/> </p>
<div class="jb51code">
<pre><code>
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
{{node.title}}
</treecontrol></code></pre>
</div>
<p> 。</p>
<p><strong>default <br/> </strong></p>
<div class="jb51code">
<pre><code>
<div class="ng-cloak">
{{default.value}}
</div>
</code></pre>
</div>
<p> default.js。</p>
<p><strong>ng-table </strong><br/> </p>
<div class="jb51code">
<pre><code>
<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>
</code></pre>
</div>
<p> ng-table 。</p>
<p><strong>ui-bootstrap </strong><br/> </p>
<div class="jb51code">
<pre><code>
<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></code></pre>
</div>
<p> ， 。<br/> ， html， ：<br/> </p>
<div class="jb51code">
<pre><code>
"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;
}]);
</code></pre>
</div>
<p> ， ui.router oc.LazyLoad。 ， js tempApp 。<br/> ocLazyLoad ：<br/> </p>
<div class="jb51code">
<pre><code>
"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
});
};
</code></pre>
</div>
<p><strong> ：<br/> </strong></p>
<div class="jb51code">
<pre><code>
"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");
}
);
}]
}
})
};
</code></pre>
</div>
<p>ui-bootstrap ， ng-table angular-tree-control js ：</p>
<p><strong>ng-table.js</strong><br/> </p>
<div class="jb51code">
<pre><code>
(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()));
}
}
);
};
})();
</code></pre>
</div>
<p><strong>angular-tree-control.js<br/> </strong></p>
<div class="jb51code">
<pre><code>
(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
};
};
})();
</code></pre>
</div>
<p> default.js ， "Hello Wrold"。</p>
<p> ， 。</p>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
