English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Recentemente il progetto è molto impegnativo, devo lavorare di giorno e tornare a casa di sera per fare presentazioni di punti di conoscenza Angular per i miei colleghi, dopo tutto, sto per dimettermi alla fine dell'anno, lo sviluppo successivo del progetto deve essere assunto da qualcun altro, quindi ho utilizzato il mio tempo di studio serale. Originariamente non avevo intenzione di scrivere queste note di studio delle estensioni di terze parti, ma ho pensato che caricare i moduli su richiesta e usarli con successo è davvero utile, quindi le ho registrate. Poiché questo animale non ha utilizzato molto deeply requireJs, non sa cosa c'è di diverso tra questi due e non può spiegare chiaramente se questo è davvero un caricamento su richiesta di Angular.
Per ottenere l'effetto del punto di apprendimento di questa nota, dobbiamo utilizzare:
angular:https://github.com/angular/angular.js
ui-router:https://github.com/angular-ui/ui-router
ocLazyLoad:https://github.com/ocombe/ocLazyLoad
Non c'è bisogno di inutili parole, andiamo direttamente al punto...
Prima di tutto, diamo un'occhiata alla struttura dei file:
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 --- Codice di registrazione e configurazione dei moduli
oclazyload.config.js --- Codice di configurazione del caricamento dei moduli
route.config.js --- Codice di configurazione e caricamento delle rotte
views --- Cartella delle pagine html
angular-tree-control.html --- Pagina dell'effetto del plugin angular-tree-control
default.html --- Pagina predefinita
ng-table.html --- Pagina dell'effetto del plugin ng-table
ui-bootstrap.html --- Pagina dell'effetto del plugin uibootstrap
index.html --- Pagina principale
Attenzione: questo demo non ha implementato il routing annidato, ma ha semplicemente realizzato il routing di una singola vista per mostrare l'effetto.
Vediamo il codice della pagina principale:
<!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">Pagina principale</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>
In questa pagina, abbiamo caricato solo i file css di bootstrap, i file js di angular, i file js di ui-router, i file js di ocLazyLoad e 3 file di configurazione.
Guardiamo ora il codice HTML delle quattro pagine:
Pagina dell'effetto angular-tree-control
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
{{node.title}}
</treecontrol>
Sulla pagina ci sono delle istruzioni corrispondenti a questo plugin.
Pagina default
<div class="ng-cloak">
{{default.value}}
</div>
Qui serviamo solo a dimostrare che il file default.js è stato caricato e eseguito correttamente.
Pagina dell'effetto 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">Annulla ordinamento</button>
<p>
<strong>Ordinamento:</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="[#1#]" sortable="'name'">
{{user.name}}
</td>
<td data-title="[#2#]" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
</div>
Ecco alcuni effetti semplici di ng-table.
Pagina degli effetti ui-bootstrap
<span uib-dropdown class="ng-cloak">
<a href id="simple-dropdown" uib-dropdown-toggle>
Trigger del menu a discesa
</a>
<ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
Contenuto del menu a discesa. Scrivi un effetto per dimostrare che il caricamento dinamico è stato implementato.
</ul>
</span>
Qui è stato scritto solo un effetto di menu a discesa per dimostrare che il plugin è stato caricato e utilizzato correttamente.
Bene, abbiamo visto l'html, ora guardiamo la configurazione di caricamento e la configurazione delle rotte:
"uso severo"
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;
});
Il codice sopra registrato i moduli dipende solo da ui.router e oc.LazyLoad. La configurazione è anche semplicemente configurata per i moduli, in modo che i metodi su tempApp possano essere riconosciuti nei js successivi.
Poi vediamo la configurazione del modulo caricato da ocLazyLoad:
"uso severo"
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
});
};
路由的配置：
"uso severo"
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");
}
);
}]
}
)
};
L'implementazione semplice della casella a discesa di ui-bootstrap non richiede un controller, quindi vediamo solo i controller js di ng-table e angular-tree-control:
ng-table.js
(function(){
"uso severo"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
//dati
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( // combina la configurazione predefinita e i parametri dell'URL
angular.extend({
page: 1, // prima pagina
count: 10, // numero di dati per pagina
sorting: {
name: 'asc' // ordinamento predefinito
}
}
$location.search())
,{
total: data.length, // numero totale dei dati
getData: function ($defer, params) {
$location.search(params.url()); // aggiungi i parametri all'URL per evitare di tornare alla prima pagina e alle impostazioni predefinite
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(){
"uso severo"
tempApp
.controller("ngTreeCtrl",ngTreeCtrlFn);
function ngTreeCtrlFn(){
//dati dell'albero
this.treeData = [
{
id: "1",
title: "etichetta1",
childList:[
{
id:"1-1"
title:"Livello figlio 1",
childList:[
{
id:"1-1-1",
title:"Livello superiore figlio 1",
childList:[]
}
]
}
{
id:"1-2",
title:"Livello figlio 2",
childList:[
{
id:"1-2-1",
title:"Livello superiore figlio 2",
childList:[
{
id:"1-2-1-1",
title:"Livello superiore figlio 1",
childList:[]
}
]
}
]
}
{
id:"1-3",
title:"Livello figlio 3",
childList:[]
}
]
}
{
id:"2",
title:"Etichetta 2",
childList:[
{
id:"2-1",
title:"Livello figlio 1",
childList:[]
}
{
id:"2-2",
title:"Livello figlio 2",
childList:[]
}
{
id:"2-3",
title:"Livello figlio 3",
childList:[]
}
}]
,
{
id:"3",
title:"Etichetta 3",
childList:[
{
id:"3-1",
title:"Livello figlio 1",
childList:[]
}
{
id:"3-2",
title:"Livello figlio 2",
childList:[]
}
{
id:"3-3",
title:"Livello figlio 3",
childList:[]
}
]
}
];
//Configurazione dell'albero
this.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
};
};
})();
Ignoriamo il file default.js, dopo tutto, contiene solo "Hello World".
url github: https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
Ecco la raccolta di materiali relativi al caricamento dinamico dei moduli e delle dipendenze di AngularJS, continueremo a integrare ulteriori materiali, grazie per il supporto della nostra comunità!
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è dell'autore originale, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.