English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In letzter Zeit bin ich sehr beschäftigt mit Projekten, tagsüber arbeite ich, und abends komme ich noch nach Hause, um den Kollegen PPTs zu Angular-Kenntnissen zu machen. Schließlich mache ich Ende des Jahres einen Rücktritt, die weitere Entwicklung des Projekts muss jemand übernehmen, daher habe ich die Zeit zum Lernen abends beansprucht. Ich hatte ursprünglich nicht vor, diese Lernnotizen zu den Drittanbieter-Plugins zu schreiben, aber ich fand es nützlich, Module nach Bedarf zu laden und erfolgreich zu verwenden, daher habe ich es aufgeschrieben. Da ich nicht tief in requireJs eingetaucht bin, weiß ich nicht, was der Unterschied zwischen diesem und requireJs ist, und kann nicht klar sagen, ob dies wirklich die On-Demand-Loading von Angular ist.
Um die Wirkung dieser Lernnotizen zu erreichen, müssen wir verwenden:
angular:https://github.com/angular/angular.js
ui-router:https://github.com/angular-ui/ui-router
ocLazyLoad:https://github.com/ocombe/ocLazyLoad
Worte sind nicht wichtig, wir kommen direkt zum Punkt...
Zunächst sehen wir uns die Datei Struktur an:
Angular-ocLazyLoad --- demo Ordner
Scripts --- Framewerk und Plugin Ordner
angular-1.4.7 --- angular Ohne Erklärung
angular-ui-router --- uirouter Ohne Erklärung
oclazyload --- ocLazyload Ohne Erklärung
bootstrap --- bootstrap Ohne Erklärung
angular-tree-control-master --- angular-tree-control-master Ohne Erklärung
ng-table --- ng-table Ohne Erklärung
angular-bootstrap --- angular-bootstrap Ohne Erklärung
js --- js Ordner JS-Dateien, die für das Demo geschrieben wurden
controllers --- Seite Controller Ordner
angular-tree-control.js --- angular-tree-control Controller Code
default.js --- default Controller Code
ng-table.js --- ng-table Controller Code
app.config.js --- Modulregistrierungs- und Konfigurations-Code
oclazyload.config.js --- Modulkonfigurations-Code laden
route.config.js --- Routenkonfiguration und Lade-Code
views --- html Seite Ordner
angular-tree-control.html --- angular-tree-control Plugin Effektseite
default.html --- Default-Seite
ng-table.html --- ng-table Plugin Effektseite
ui-bootstrap.html --- uibootstrap Plugin Effektseite
index.html --- Startseite
Hinweis: Dieser Demo hat keine Nested Routen implementiert, sondern nur eine einfache Single-View-Route, um die Wirkung zu zeigen.
Lassen Sie uns den Code der Startseite betrachten:
<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8-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">Startseite</a>
<a href="#/uibootstrap" >ui-bootstrap</a>
<a href="#/ngtable">ng-Tabelle</a>
<a href="#/ngtree">angular-tree-control</a>
</div>
<div ui-view></div>
</div>
</body>
</html>
Auf dieser Seite laden wir nur Bootstrap CSS, Angular JS, ui-Router JS, ocLazyLoad JS, sowie3konfigurierten JS-Dateien.
Sehen wir uns den HTML-Code der vier Seiten an:
angular-tree-Kontrolleffekt-Seite
<treecontrol Baum-modell="ngtree.treeData" class="Baum"-klassischer ng-cloak" optionen="ngtree.treeOptions">
{{node.title}}
</treecontrol>
Auf dieser Seite befindet sich eine Anweisung, die diesem Plugin entspricht.
Default-Seite
<div class="ng-cloak">
{{default.value}}
</div>
Wir verwenden dies nur, um zu beweisen, dass default.js geladen und korrekt ausgeführt wird.
ng-Tabelle-Effekt-Seite
<div class="ng-cloak">
<div class="p-h-md p-v bg-weiße Box-Schatten position-rlt">
<h3 class="ohne"-Rand">ng-Tabelle</h3>
</div>
<button ng-click="ngtable.tableParams.sorting({})" class="btn btn"-Standard nach links-rechts">Lösche Sortierung</button>
<p>
<strong> Sorting:</<strong> {{ngtable.tableParams.sorting()|json}} </strong>
</p>
<table ng-table="ngtable.tableParams" class="Tabelle Tabelle"-gezeichnete Tabelle-gezeichnet">
<tr ng-wiederhole="user in $data">
<td data-title="[#1#]" sortierbar="'name'">
{{user.name}}
</td>
<td data-title="[#2#]" sortierbar="'age'">
{{user.age}}
</td>
</tr>
</table>
</div>
Hier sind einige einfache ng-Tabelle-Effekt.
ui-Bootstrap-Effekt-Seite
<span uib"-dropdown class="ng"-cloak">
<a href id="simple"}-dropdown" uib-dropdown-toggle>
Trigger des Dropdowns
</a>
<ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
Inhalt des Dropdowns. Hier wird ein Effekt geschrieben, um zu beweisen, dass die dynamische Ladung realisiert wurde
</ul>
</span>
Hier wurde nur ein Dropdown-Effect geschrieben, um zu beweisen, dass das Plugin korrekt geladen und verwendet wird.
Nun, nachdem wir den html-Code angesehen haben, schauen wir uns die Konfiguration der Load- und Routing-Konfigurationen an:
"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;
]);
Der obige Code für die Registrierung des Moduls basiert nur auf ui.router und oc.LazyLoad. Die Konfiguration selbst ist nur eine einfache Konfiguration des Moduls, um sicherzustellen, dass die Methoden auf tempApp im nachfolgenden js erkannt werden können.
Dann schauen wir uns die Konfiguration der ocLazyLoad-Module an:
"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的下拉框简单实现不需要控制器，那么我们就只看看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 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( // 合并默认配置和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(){
//Baumdaten
this.treeData = [
{
"id:"1"
title:"Etikett"1"
childList:[
{
"id:"1-1"
title:"Untergliederung"1"
childList:[
{
"id:"1-1-1"
title:"Wieder Untergliederung"1"
childList:[]
}
]
},
{
"id:"1-2"
title:"Untergliederung"2"
childList:[
{
"id:"1-2-1"
title:"Wieder Untergliederung"2"
childList:[
{
"id:"1-2-1-1"
title:"Wieder Untergliederung"1"
childList:[]
}
]
}
]
},
{
"id:"1-3"
title:"Untergliederung"3"
childList:[]
}
]
},
{
"id:"2"
title:"Etikett"2"
childList:[
{
"id:"2-1"
title:"Untergliederung"1"
childList:[]
},
{
"id:"2-2"
title:"Untergliederung"2"
childList:[]
},
{
"id:"2-3"
title:"Untergliederung"3"
childList:[]
}
}]
,
{
"id:"3"
title:"Etikett"3"
childList:[
{
"id:"3-1"
title:"Untergliederung"1"
childList:[]
},
{
"id:"3-2"
title:"Untergliederung"2"
childList:[]
},
{
"id:"3-3"
title:"Untergliederung"3"
childList:[]
}
]
}
];
//Baumkonfiguration
this.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
};
};
})();
Lassen Sie uns default.js ignorieren, schließlich enthält es nur "Hello World".
github-URL: https://github.com/Programm-Monkey/Angular-ocLazyLoad-Demo
Dies ist die Zusammenstellung der Materialien zu AngularJS-Modulen und Abhängigkeiten. Weitere Informationen werden später hinzugefügt. Vielen Dank für Ihre Unterstützung dieser Seite!
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Seite besitzt keine Eigentumsrechte, hat den Inhalt nicht von Hand bearbeitet und trägt keine rechtlichen Verantwortlichkeiten. Wenn Sie beanstandete Inhalte finden, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine Meldung senden, und geben Sie relevante Beweise an. Sobald die Beanstandung bestätigt wird, wird diese Seite die beanstandeten Inhalte sofort löschen.)