Récemment, le projet est assez occupé. Je dois aller travailler pendant la journée et revenir la nuit et je dois encore faire du point de connaissance angulaire PPT pour mes collègues. Après tout, je démissionnerai à la fin de l'année, et quelqu'un devra toujours reprendre le développement ultérieur du projet, il faut donc un temps pour étudier la nuit. Je n'ai jamais prévu d'écrire des notes d'étude pour ces plug-ins tiers, mais je pense que c'est vraiment un avantage pour charger le module à la demande et l'utiliser avec succès, donc je devrais l'enregistrer. Parce que cette bête n'a pas utilisé les besoins en profondeur, cette bête ne connaît donc pas la différence entre cela et les exigences, et ne peut pas expliquer clairement si cela est considéré comme le chargement à la demande d'Angular.
Afin d'atteindre l'effet de ce point de connaissance de la note d'étude, nous devons utiliser:
Angular: https: //github.com/angular/angular.js
Ui-Router: https: //github.com/angular-ui/ui-router
Oclazyload: https: //github.com/ocombe/oclazyload
Sans plus tarder, j'arriverai au point ...
Tout d'abord, regardons la structure des fichiers:
Angular-Oclazyload --- Demo Folder Scripts --- Framework and Regran-In dossier Angular-1.4.7 --- Angular n'explique pas angulaire-Ui-Router --- uirouter n'explique pas oclazé Angular-Bootstrap --- Angular-bootstrap n'explique pas le dossier JS --- JS Folder JS Écrit pour les contrôleurs de démon oclazyload.config.js --- Chargez le code de configuration du module Route.config.js --- Vues de la configuration et de chargement de la route --- Folder de page html angulaire-arche-control.html --- Page de plug-in-control angulaire default.html --- Page de défaut Ng-Table.html --- Ng-Table Page de plug-ing. uibootstrap Perg-In Effet Page Index.html --- Page principale
Remarque: Cette démo ne fait pas de routage imbriqué, il implémente simplement le routage à vue unique pour afficher l'effet.
Regardons le code de la page principale:
<! Doctype html> <html lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> <adread> <meta charset = "utf-8" /> <tone> </ title> <lien 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 / version / 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 / oclazyload.config.js"> </ script> src = "js / root.config.js"> </ script> </ head> <body> <div ng-app = "templateApp"> <div> <a href = "# / default"> home </a> <a href = "# / uibootstrap"> ui-boottrap </a> <a href = "# / ngTable"> ng-table </a> <a href = "# / ngTable"> ng-table </a> <a href = "# / ngTable"> ng-table </a> <a href = "# / ngTable"> ng-table </a> <a href = "# / ngTable"> ng-table </a> <a href = "# / ngTable "> href = "# / ngtree"> angular-Tree-Control </a> </div> <div ui-view> </div> </div> </ody> </html>
Dans cette page, nous ne chargeons que CSS de bootstrap, Angular JS, UI-Router JS, Oclazyload JS et 3 fichiers JS configurés.
Jetons un coup d'œil au code HTML des quatre pages:
Page d'effet de contrôle des arbres angulaires
<TreEControl Tree-Model = "ngTree.TreeData" Options = "ngtree.treeOptions"> {{node.title}} </ treeControl>Il y a une commande sur la page pour utiliser le plug-in.
page par défaut
<div> {{default.value}} </div>Ici, nous l'utilisons simplement pour prouver que le chargement et l'exécution de Default.js correctement.
page d'effet ng-table
<div> <div> <h3> ng-table </h3> </div> <Button ng-Click = "ngTable.TableParams.sorting ({})"> Clear Triting </ Button> <p> <strong> Triting: </strong> {{ngTable.TablePars.Sortting () | json}} </p> <pable ng-table = "ngTable.TableParams"> <tr ng-repeat = "User dans $ data"> <td data-title = "'name'" sortable = "'name'"> {{user.name}} </td> <td data-title = "'age'" Sorable = "'Age"> {{user.age} </ table> </div>Voici quelques effets ng-tables simples.
Page d'effet UI-Bootstrap
<span uib-dropdown> <a href id = "Simple-dropdown" uib-dropdown-toggle> till-down box déclencheur </a> <ul aria-labelledby = "Simple-Dropdown"> Contenu de la boîte pull-down. Écrivez une preuve d'effet ici pour obtenir un chargement dynamique </ul> </span>
Voici seulement un effet de boîte déroulant pour prouver que le plug-in est chargé correctement et utilisé.
Ok, après avoir lu le HTML, regardons la configuration de chargement et la configuration de routage:
"Utiliser strict" var tempapp = angular.module ("templateApp", ["ui.router", "occ.lazyload"]). Config (["$ fournis", "$ compileprovider", "$ contrôleurProvider", "$ FilterProvider", fonction ($ fournis, compleprovider = $ contrôleur $ ControllerProvider.Register;Le code ci-dessus s'appuie uniquement sur UI.Router et OC.lazyload pour l'enregistrement du module. La configuration est simplement configurée pour configurer le module afin que le JS suivant puisse reconnaître la méthode sur TempApp.
Ensuite, jetons un coup d'œil à la configuration du module de chargement Oclazyload:
"Utiliser Strict" tempapp.constant ("modules_config", [{name: "ngTable", module: true, fichiers: ["scripts / ng-table / dist / ng-table.min.css" "Scripts / Angular-Bootstrap / UI-Bootstrap-TPLS-0.14.3.min.js"]}, {nom: "TreeControl", module: true, fichiers: ["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 (["$ oclazé RouteFn ($ oclazyloadProvider, modules_config) {$ oclazyloadProvider.config ({debug: false, événements: false, modules: modules_config});};Configuration du routage:
"Utiliser Strict" tempapp.config (["$ stateprovider", "$ urlrouterprovider", routefn]); fonction RouteFn ($ stateProvider, $ urlrouterprovider) {$ urlrouterprovider.wore ("/ default"); $ StateProvider .State ("Default", {URL: "/ Default", templateUrl: "Views / Default.html", contrôleur: "DefaultCtrl", Controlleras: "Default", Résolve: {Deps: [$ oclazyload ", fonction ($ oclazyload) {return $ oclazé. .State ("uibootstrap", {url: "/ uibootstrap", templateUrl: "vues / ui-bootstrap.html", résoudre: {deps: ["$ oclazyload", function ($ oclazyload) {return $ oclazyload.load ("ui.bootsstrap");}]}}}}}}}}}}}}}}}}}}}}}}}). URL: "/ ngTable", templateUrl: "vues / ng-table.html", contrôleur: "ngTableCtrl", contrôleras: "ngTable", résoule: {deps: ["$ oclazyload", function ($ oclazyload) {return $ oclazyload.load ("ngTable"). $ oclazyload.load ("js / contrôleurs / ng-table.js");});}]}}) .state ("NgTree", {url: "/ ngTree", TemplateUrl: " Deps: ["$ oclazyload", fonction ($ oclazyload) {return $ oclazyload.load ("treeControl"). alors (fonction () {return $ oclazyload.load ("js / contrôlers / angular-are-control.js");});L'implémentation simple de la boîte déroulante de UI-Bootstrap ne nécessite pas de contrôleur, alors regardons uniquement le contrôleur JS de Ng-Table et Angular-Tree-Control:
ng-table.js
(function () {"Utiliser strict" tempapp.Controller ("ngTableCtrl", ["$ emplacement", "ngTableParams", "$ filter", ngTableCrectlfn]); fonction ngTablectlfn ($ localisation, ngTableParams, $ filter) {// data var data = [{nom: "Moroni", Age: 50} "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: "Néphi", âge: 29}, {nom: "Enos", âge: 34}]; Total: Data.Length, // Total Data GetData: Fonction ($ Defer, Params) {$ localisation.Search (paramrs.Url ()); $ defer.resolve (ordonnancedData.slice ((paramrs.page () - 1) * params.Count (), params.page () * params.Count ()));}});};}) ();Angular-Tree-Control.js
(function () {"Utiliser Strict" tempApp.Controller ("ngTreectl", ngtrectrlfn); fonction ngtrectrlfn () {// arbre data this.treedata = [{id: "1", title: "tag1", childlist: [{id: "1-1", "child1", childlist: [{id: "1-1-", title: "child1", childlist: [{id: "1-", " Titre: "Child1", ChildList: [{id: "1-1-1", Titre: "Child1", ChildList: [{id: "1-2", titre: "Child2", Childlist: [{id: "1-2-1", titre: "Child2", Childlist: [{id: "1-2-1", Title: "Child2", childlist: [{id: "1-2 }]}]}, {id: "1-3", titre: "Child Level 3", ChildList: []}]}, {id: "2", titre: "Tag 2", childlist: [{id: "2-1", "Child Level 1", childlist: []}, {id: "2-2", "Child Level 2", childlist: [}, id: "3-", title: kildge Titre: "Child1", ChildList: []}, {id: "3-2", titre: "Child2", ChildList: []}, {id: "3-3", titre: "Child3", ChildList: []}]}];Ignorons default.js, après tout, il n'y a que "bonjour wrold".
URL github: https://github.com/program-monkey/angular-oclazyload-demo
Ce qui précède est une collection d'informations sur le module de chargement dynamique AngularJS et les dépendances. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!