Recientemente, el proyecto está bastante ocupado. Tengo que ir a trabajar durante el día y volver por la noche y todavía necesito hacer un PPT de punto de conocimiento angular para mis colegas. Después de todo, renunciaré a fin de año, y alguien aún necesitará hacerse cargo del desarrollo posterior del proyecto, por lo que lleva tiempo para estudiar por la noche. Nunca he planeado escribir notas de estudio para estos complementos de terceros, pero creo que es realmente un beneficio cargar el módulo a pedido y usarlo con éxito, por lo que debería grabarlo. Debido a que esta bestia no ha utilizado en profundidad los requisitos, por lo que esta bestia no sabe la diferencia entre esto y requerir JS, y no puede explicar claramente si esto se considera la carga a pedido de Angular.
Para lograr el efecto de este estudio de Nota de Nota de conocimiento, necesitamos usar:
Angular: https: //github.com/angular/angular.js
UI-Router: https: //github.com/angular-ui/ui-router
oclazyload: https: //github.com/ocombe/oclazyload
Sin más preámbulos, llegaré al punto ...
Primero, veamos la estructura del archivo:
Angular-oclazyload --- scripts de carpeta de demostración --- marco y carpeta de complemento Angular-1.4.7 --- Angular no explica angular-ui-router --- uirouter no explicar oclazyload --- inlazyloadload load no explica bootstrap --- bootstrap no explica angular-tree-control-maestro --- angular-tree-master no explicar ng-table --- ng-table no explique no explicar Angular-Bootstrap --- Angular-Bootstrap no explica JS --- JS Carpeta archivos JS Escritos para controladores de demostración --- Carpeta de controlador de página Angular-tree-Control.js --- Código de controlador de control de tree-tree de forma predeterminada. oclazyload.config.js --- Código de configuración del módulo de carga ruta.config.js --- Configuración de ruta y vistas del código de carga --- carpeta de página html angular-tree-confontrol.html --- angular-tree-confontrol encontrol effect página predeterminado Uibootstrap Page-in Effect Page index.html --- Página principal
Nota: Esta demostración no realiza un enrutamiento anidado, simplemente implementa un enrutamiento de visión única para mostrar el efecto.
Veamos el código de la página principal:
<! 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"> </scritch> <script src = "scripts/angular-ui-router/ralle/angular-ui-router.min.js"> </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/ruta.config.js"> </script> <script> <script> <script> <script> src = "js/ruta.config.js"> </script> </head> <body> <div ng-app = "templataApp"> <div> <a href = "#/default"> home </a> <a href = "#/uiBootStrap"> ui-bootstap </a> <a href = "#/ngtable"> ng-table href = "#/ngtree"> Angular-tree-Control </a> </div> <div Ui-view> </div> </div> </body> </html>
En esta página, solo cargamos el CSS de Bootstrap, Angular JS, UI-Router JS, OclazyLoad JS y 3 archivos JS configurados.
Echemos un vistazo al código HTML de las cuatro páginas:
Página de efecto de control de árboles angulares
<treecontrol tree-model = "ngtree.treedata" options = "ngtree.treeoptions"> {{node.title}} </treecontrol>Hay un comando en la página para usar el complemento.
página predeterminada
<Div> {{default.value}} </div>Aquí solo lo estamos utilizando para demostrar que la carga y ejecución de los default.js correctamente.
Página de efecto Ng-Table
<div> <div> <h3> ng-table </h3> </div> <button ng-click = "ngtable.tableparams.sorting ({})"> claro clasificar </botón> <p> <strong> clasificación: </strong> {{ngtable.tableParams.sorting () | json}} </p> <table <stave ng-table = "ngtable.tableParams"> <tr ng-depheat = "user en $ data"> <td data-title = "name '" sortable = "' name '"> {{user.name}} </td> <td data-title = "' edad '" sortable = "edad"> "{{{{erg.age}}}}}}}}}}}}}}}}} </td> </th/th. </table> </div>Aquí hay algunos efectos simples de la mesa ng.
Página de efecto Ui-Bootstrap
<span uib-dopdown> <a href id = "simple-drown" uib-drown-toggle> activador de caja desplegable </a> <ul Aria-LabelledBy = "Simple-Dropdown"> Contenido de caja desplegable. Escriba una prueba de efecto aquí para lograr una carga dinámica </ul> </span>
Aquí hay solo un efecto de cuadro desplegable para demostrar que el complemento se carga correctamente y se usa.
Ok, después de leer el HTML, veamos la configuración de la configuración de carga y el enrutamiento:
"Use estricto" var temppApp = angular.module ("TemplataApp", ["ui.router", "oc.lazyload"]). config (["$ proporcion", "$ compileprovider", "$ controlerProvider", "$ filtreprovider", function ($ proporcion, $ compopiLeprovider, controlerProvider, $ filtreprovider ", {Tempapp.provider". $ ControlerProvider.Register;El código anterior solo se basa en UI.Router y OC.LazyLoad para el registro del módulo. La configuración simplemente está configurada para configurar el módulo para que el JS posterior pueda reconocer el método en TEMPAPP.
Luego, echemos un vistazo a la configuración del módulo de carga Oculcyload:
"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"]}, {nombre: "treecontrol", módulo: true, archivos: ["scripts/angular-tree-control-master/css/tree-confontrol.css",,,, "Scripts/Angular-tree-Control-Master/CSS/Tree-Control-Attribute.css", "Scripts/Angular-tree-Control-Master/Angular-tree-Control.js"]}]). Config (["$ oclazyloadProvider", "Modules_config", rutefn]); función RouteFn ($ OclayLoadProvider, Modules_Config) {$ oclayLoadProvider.config ({debug: falso, eventos: falso, módulos: módulo_config});};Configuración de enrutamiento:
"Use estricto" tempapp.config (["$ stateProvider", "$ urlrouterProvider", rutinefn]); function rutuFn ($ stateProvider, $ urlrouterProvider) {$ urlrouterProvider.otherwisewise ("/default"); $ stateProvider .state ("default", {url: "/default", templateUrl: "Views/Default.html", controlador: "defaultctrl", controleras: "default", resolve: {deps: ["$ oclazyload", function ($ oclayzyload) {return $ oclazy .state ("uibootstrap", {url: "/uibootStrap", templateUrl: "vistas/ui-bootstrap.html", resolve: {deps: ["$ oclazyload", function ($ oclazeLoad) {return $ oclazyload.load ("ui.boottap");}]}}). url: "/ngtable", templateUrl: "vistas/ng-table.html", controlador: "ngtablectrl", controleras: "ngtable", resolve: {deps: ["$ oclazyload", function ($ oclazyload) {return $ oclazyload.load ("ngtable"). Luego (function () {{{{rethor $ oclazyload.load ("js/controladores/ng-table.js"); Deps: ["$ oclazyload", function ($ oclazyload) {return $ oclazyload.load ("treecontrol"). Entonces (function () {return $ oclazyload.load ("js/controlers/angular-tree-control.js");});La simple implementación del cuadro desplegable de UI-Bootstrap no requiere un controlador, por lo que solo veamos el controlador JS de Ng-Table y Angular-Tree-Control:
ng-table.js
(function () {"use estrict" tempapp.controller ("ngtablectrl", ["$ ubicación", "ngtableParams", "$ filtro", ngtablectrlfn]); function ngtablectrlfn ($ ubicación, ngtableParams, $ filter) {// datos var data = [{name: "Moroni", edad: 50},}, {nombre: {nombre: {nombre: "Tiancum", Age: 43}, {nombre: "jacob", edad: 27}, {name: "nephi", edad: 29}, {nombre: "enos", edad: 34}, {name: "tiancum", edad: 43}, {name: "jacob", edad: 27}, {name: "name:" nhephi ", 29}, 29}, {n. "Enos", Age: 34}, {nombre: "Tiancum", Age: 43}, {name: "jacob", edad: 27}, {name: "nephi", edad: 29}, {name: "eNOS", edad: 34}, {nombre: "tiANCUM", edad: 43}, {nombre: "Nephi", Age: 29}, {nombre: "eNOS", edad: 34}]; Total: Data.length, // Total Data GetData: Function ($ Defer, Params) {$ Ubicación.Search (params.url ()); $ Defer.resolve (ordenedData.slice ((params.page () - 1) * params.count (), params.page () * params.count ()));Angular-tree-Control.js
(function () {"use estrict" tempapp.controller ("ngtreectrl", ngtreectrlfn); function ngtreectrlfn () {// tree data this.treedata = [{id: "1", title: "tag1", childList: [{id: "1-1", title: "Child1", Childlist: [[{it: "1-1", "1-1", "1-1" Título: "Child1", ChildList: [{id: "1-1-1", título: "Child1", ChildList: [{Id: "1-2", Título: "Child2", ChildList: [{Id: "1-2-1", Title: "Child2", ChildList: [{Id: "1-2-1", Título: "Child2" childList:[] } ] } ] }, { id:"1-3", title:"Child level 3", childList:[] } ] }, { id:"2", title:"Tag 2", childList:[ { id:"2-1", title:"Child level 1", childList:[] }, { id:"2-2", title:"Child level 2", childList:[ { id: "3-1", Título: "Child1", ChildList: []}, {id: "3-2", título: "Child2", ChildList: []}, {id: "3-3", Title: "Child3", ChildList: []}]}]; };};}) ();Ignoremos el default.js, después de todo, solo hay "hola Wrold" en él.
URL GitHub: https://github.com/program-monkey/angular-oclazyload-demo
Lo anterior es una recopilación de información sobre el módulo de carga dinámica AngularJS y las dependencias. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!