English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El proyecto últimamente está muy ocupado, tengo que trabajar durante el día y preparar las presentaciones de puntos de conocimiento de Angular para los colegas por la noche, después de todo, es el final del año y me voy a dar de baja, el desarrollo posterior del proyecto aún necesita alguien para tomar el mando, por lo que ocupé el tiempo de estudio nocturno. Originalmente no tenía la intención de escribir estas notas de aprendizaje de plugins de terceros, pero creo que es útil cargar módulos a pedido y usarlo con éxito, por lo que lo registramos. Dado que no he utilizado mucho requireJs, no sé cuál es la diferencia entre esto y requireJs, ni puedo explicar claramente si esto realmente es una carga a pedido de Angular.
Para lograr el efecto de los puntos de conocimiento de esta nota de aprendizaje, necesitamos usar:
angular:https://github.com/angular/angular.js
ui-router:https://github.com/angular-ui/ui-router
ocLazyLoad:https://github.com/ocombe/ocLazyLoad
No hay tiempo para hablar tonterías, vamos al grano...
Primero, veamos la estructura del archivo:
Angular-ocLazyLoad --- Carpeta demo
Scripts --- Carpeta de framework y plugins
angular-1.4.7 --- angular, no se explica
angular-ui-router --- uirouter, no se explica
oclazyload --- ocLazyload, no se explica
bootstrap --- bootstrap, no se explica
angular-tree-control-master --- angular-tree-control-master, no se explica
ng-table --- ng-table, no se explica
angular-bootstrap --- angular-bootstrap, no se explica
js --- Carpeta js, archivos js escritos para el demo
controllers --- Carpeta de controladores de páginas
angular-tree-control.js --- angular-tree-Código del controlador control
default.js --- Código del controlador default
ng-table.js --- ng-Código del controlador de table
app.config.js --- Código de registro y configuración de módulos
oclazyload.config.js --- Código de configuración de carga de módulos
route.config.js --- Configuración de rutas y código de carga
views --- Carpeta de páginas html
angular-tree-control.html --- angular-tree-Página de efectos del plugin control
default.html --- página default
ng-table.html --- ng-Página de efectos del plugin table
ui-bootstrap.html --- Página de efectos del plugin uibootstrap
index.html --- Página principal
Nota: Este demo no realiza rutas anidadas, solo implementa rutas de vista única para mostrar el efecto.
Vamos a ver el código de la página principal:
<!DOCTYPE html>
<html lang="es" 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">página principal</a>
<a href="#/uibootstrap" >ui-bootstrap</a>
<a href="#/ngtable">ng-tabla</a>
<a href="#/ngtree">angular-tree-control</a>
</div>
<div ui-vista></div>
</div>
</cuerpo>
</html>
en esta página, solo se cargaron css de bootstrap, js de angular, ui-js de router, js de ocLazyLoad, así como3archivos js configurados.
mira el código html de cuatro páginas:
angular-tree-control página de efecto
<treecontrol tree-modelo="ngtree.treeData" clase="árbol-ng clásico-abrigo" opciones="ngtree.treeOptions">
{{node.título}}
</treecontrol>
en la página hay una instrucción correspondiente al plugin.
página default
<div clase="ng-abrigo">
{{default.valor}}
</div>
solo se utiliza para demostrar que se carga y ejecuta correctamente default.js.
ng-página de efecto tabla
<div clase="ng-abrigo">
<div clase="p-h-p md-fondo v-caja blanca-posicion sombra-rlt">
<h3 clase="sin"-margen">ng-tabla</h3>
</div>
<botón ng-hacer clic="ngtable.tableParams.ordenamiento({})" clase="botón btn-por defecto tirar-derecho">Borrar ordenamiento</botón>
<p>
<fuerte> Ordenamiento:</<fuerte> {{ngtable.tableParams.ordenamiento()|json}}
</p>
<tabla ng-tabla="ngtable.tableParams" clase="tabla tabla-tabla con borde-rayado">
<tr ng-repetir="user in $data">
<td data-title="[#1#]" ordenable="'nombre'">
{{user.nombre}}
</td>
<td data-title="[#2#]" ordenable="'edad'">
{{user.edad}}
</td>
</tr>
</tabla>
</div>
aquí se escribió algo simple ng-efecto de tabla.
ui-página de efecto bootstrap
<span uib-desplegable clase="ng"-abrigo">
<a href id="simple"}}-dropdown" uib-dropdown-toggle>
desplegable de abajo
</a>
<ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
Contenido del desplegable. Aquí escriba un efecto para demostrar que se puede cargar dinámicamente.
</ul>
</span>
Aquí solo se escribió un efecto de desplegable para demostrar que se cargó y usó correctamente el complemento.
Bien, después de ver html, veamos la configuración de carga y configuración de rutas:
"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;
});
El código anterior para el registro del módulo solo depende de ui.router y oc.LazyLoad. La configuración es solo una configuración simple del módulo, para que el js pueda identificar los métodos de tempApp en el futuro.
Entonces, veamos la configuración del módulo 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",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 desplegable simple no requiere controlador, por lo que solo veremos ng-table y angular-tree-control del controlador js:
ng-table.js
(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
//Datos
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( // Combinar la configuración predeterminada y los parámetros de la URL
angular.extend({
page: 1, // Primera página
count: 10, // Cantidad de datos por página
sorting: {
name: 'asc' // Ordenación predeterminada
}
},
$location.search())
,{
total: data.length, // Número total de datos
getData: function ($defer, params) {
$location.search(params.url()); // Poner los parámetros en la URL para evitar que la página se retroceda a la primera página y la configuración predeterminada al recargar
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(){
//Datos del árbol
this.treeData = [
{
id:""1"
title:"Etiqueta"1"
childList:[
{
id:""1-1"
title:"Subnivel"1"
childList:[
{
id:""1-1-1"
title:"Subnivel"1"
childList:[]
}
]
},
{
id:""1-2"
title:"Subnivel"2"
childList:[
{
id:""1-2-1"
title:"Subnivel"2"
childList:[
{
id:""1-2-1-1"
title:"Subsubnivel"1"
childList:[]
}
]
}
]
},
{
id:""1-3"
title:"Subnivel"3"
childList:[]
}
]
},
{
id:""2"
title:"Etiqueta"2"
childList:[
{
id:""2-1"
title:"Subnivel"1"
childList:[]
},
{
id:""2-2"
title:"Subnivel"2"
childList:[]
},
{
id:""2-3"
title:"Subnivel"3"
childList:[]
}
]}
,
{
id:""3"
title:"Etiqueta"3"
childList:[
{
id:""3-1"
title:"Subnivel"1"
childList:[]
},
{
id:""3-2"
title:"Subnivel"2"
childList:[]
},
{
id:""3-3"
title:"Subnivel"3"
childList:[]
}
]
}
];
//Configuración de árbol
this.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
};
};
})();
Ignoraremos default.js, después de todo, solo hay un "Hello Wrold" en él.
url de github https://github.com/Programa-Monkey/Angular-ocLazyLoad-Demo
Aquí está la recopilación de información sobre la carga dinámica de módulos y dependencias de AngularJS, continuaremos complementando información relevante, ¡gracias por el apoyo de todos a este sitio!
Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)