Vor kurzem ist das Projekt ziemlich beschäftigt. Ich muss tagsüber zur Arbeit gehen und nachts zurückkommen und ich muss immer noch Angular Knowledge Point PPT für meine Kollegen machen. Immerhin werde ich Ende des Jahres zurücktreten, und jemand muss noch die anschließende Entwicklung des Projekts übernehmen, daher braucht es Zeit für das Studium nachts. Ich habe noch nie geplant, Studiennotizen für diese Plug-Ins von Drittanbietern zu schreiben, aber ich denke, es ist wirklich ein Vorteil, das Modul auf Bedarf zu laden und es erfolgreich zu verwenden, also sollte ich es aufzeichnen. Da dieses Biest nicht eingehalten hat, kennt dieses Biest den Unterschied zwischen diesem und Anforderungen nicht und kann nicht klar erklären, ob dies als Ansprüche von Angular angesehen wird.
Um die Wirkung dieser Studie zu erreichen, müssen wir: Wir müssen verwenden:
Angular: https: //github.com/angular/angular.js
UI-Router: https: //github.com/angular-ui/ui-router
Oclazyload: https: //github.com/ocombe/oclazyload
Ohne weiteres komme ich auf den Punkt ...
Schauen wir uns zunächst die Dateistruktur an:
Angular-ocLazyLoad --- demo folder Scripts --- Framework and plug-in folder angular-1.4.7 --- angular Not explain angular-ui-router --- uirouter Not explain oclazyload --- ocLazyload Not explain bootstrap --- bootstrap Not explain angular-tree-control-master --- angular-tree-control-master Not explain ng-table --- ng-table Not explain angular-bootstrap --- angular-bootstrap Not explain js --- js folder js files written for demo controllers --- page controller folder angular-tree-control.js --- angular-tree-control controller code default.js --- default controller code ng-table.js --- ng-table controller code app.config.js --- module registration and configuration code oclazyload.config.js --- Lademodul-Konfigurationscode Route UiBootStrap-Plug-in-Effekt-Seite Index.html --- Hauptseite
Hinweis: Diese Demo wird nicht verschachtelt, sondern implementiert lediglich das Routing von Einzelansicht, um den Effekt anzuzeigen.
Schauen wir uns den Code der Hauptseite an:
<! DocType html> <html Lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> <kopf> <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-ui-router.min 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/roye src = "js/route href = "#/ngtree"> Angular-Tree-Control </a> </div> <div ui-view> </div> </div> </body> </html>
Auf dieser Seite laden wir nur die CSS, Angular JS, UI-Router JS, Oclazyload JS und 3 konfigurierte JS-Dateien.
Schauen wir uns den HTML -Code der vier Seiten an:
ANGular-Tree-Kontroll-Effekt-Seite
<TreeControl Tree-Model = "ngtree.treedata" options = "ngtree.treeoptions"> {{node.title}} </treecontrol>Auf der Seite gibt es einen Befehl zur Verwendung des Plug-Ins.
Standardseite
<div> {{default.value}} </div>Hier verwenden wir es nur, um zu beweisen, dass das Laden und Ausführen von Standard.js korrekt ausführt.
Seite ng-table Effekt
<div> <div> <h3> ng-table </h3> </div> <button ng-klick = "ngtable ng-table = "ngtable.tableparams"> <tr ng-Repeat = "Benutzer in $ data"> <td data-title = "name ' </table> </div>
Hier sind einige einfache NG-Tisch-Effekte.
UI-Bootstrap-Effektseite
<span uib-dropdown> <a href id = "Simple-dropdown" uib-dropdown-toggle> Pulldown-Box-Auslöser </a> <ul aria-labelledby = "Simple-Dropdown"> Pulldown-Box-Inhalt. Schreiben Sie hier einen Effektnachweis, um dynamisches Laden </ul> </span> zu erreichen
Hier ist nur ein Dropdown-Box-Effekt, um zu beweisen, dass das Plug-In richtig geladen und verwendet wird.
OK, nach dem Lesen der HTML schauen wir uns die Konfigurations- und Routing -Konfiguration 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;Der obige Code basiert nur auf UI.router und OC.Lazyload für die Modulregistrierung. Die Konfiguration ist einfach so konfiguriert, dass das Modul so konfiguriert ist, dass die nachfolgenden JS die Methode auf TempApp erkennen können.
Schauen wir uns dann die Konfiguration des Oclazyload -Load -Moduls an:
"Strict" tempapp.constant ("modules_config", [{name: "ngtable", modul: true, Dateien: ["Skripte/ng-table/dist/ng-table.min.css", "Skripts/ng-table/distel/ng-table.min "Skripts/Angular-Bootstrap/Ui-Bootstrap-TPLS-0.14.3.Min.js"]}, {Name: "Treecontrol", Modul: True, Dateien: ["Skripts/Angular-Tree-Kontroll-Master/CSS/Baumcontrol.css", "Skripte/Angular-Tree-Control-Master/CSS/Baumkontroll-Attribute.css", "Skripte/Angular-Tree-Kontroll-Master/Angular-Tree-Control.js"]}]. Konfiguration (["$ OclazyloadProvider", modules_confrig ", Routefn); Routefn ($ oclazyloadProvider, modules_config) {$ oclazyloadProvider.config ({Debug: Falsch, Ereignisse: false, modules: modules_config});};Routing -Konfiguration:
"Strict" tempapp.config (["$ stateProvider", "$ urlrouterProvider", Routefn]); Funktion Routefn ($ stateProvider, $ urlrouterProvider) {$ urlrouterProvider.Otherwise ("/Default"); $ stateProvider .State ("Standard", {url: "/default", templateurl: "Ansichten/default.html", Controller: "DefaultCtrl", Controlleras: "Standard", Auflösung: {Deps: ["$ OclazyLode", Funktion ($ oclazy lode) {js $ $ $ $ olazy.. "Js/js/controllers/; }}) .State ("UiBootStrap", {url: "/uibootStrap", templateurl: "Ansichten/Ui-Bootstrap.html", Resolve: {deps: ["$ oclazyload", function ($ oclazyload) {return $ oclazy loa. .State ("ngtable", {url: "/ngtable", templateurl: "views/ng-table $ oclazyload.load ("JS/Controller/ng-table.js"); DEPS: ["$ oclazyload", Funktion ($ oclazyload) {return $ oclazyload.load ("TreeControl"). Dann (Funktion () {return $ oclazyload.load ("js/controller/eckel-tree-control.js");});Die einfache Implementierung des Dropdown-Box mit UI-Bootstrap erfordert keinen Controller. Schauen wir uns daher nur den Controller JS von Ng-Table und Winkelbaumkontrolle an:
ng-table.js
(function(){"use strict"tempApp.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);function ngTableCtrlFn($location,NgTableParams,$filter){ //Data 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", Alter: 29}, {Name: "Enos", Alter: 34}]; , {Total: Data.Length, Total Data getData: Funktion ($ Defer, Params) {$ location.Search (Params.Url ()); $ defer.resolve (OrderedData.slice ((params.Page () - 1) * params.count (), params.Page () * params.count ());Winkelbaumkontroll.js
(function () {"Strict" tempapp.controller ("ngTreectrl", ngreectrlfn); Funktion ngTreectrlfn () {// Baumdaten this.treedata = [{id: "1", Titel: "Tag1", Childlist: [{id: 1-1-1-1-1- "," title: "," title: "," title: " title:"Child1", childList:[ { id:"1-1-1", title:"Child1", childList:[ { id:"1-2", title:"Child2", childList:[ { id:"1-2-1", title:"Child2", childList:[ { id:"1-2-1", title:"Child2", childList:[ { id:"1-2-1-1", title:"Child level 1", 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", Titel: "Child1", Childlist: []}, {id: "3-2", Titel: "Child2", Childlist: []}, {id: "3-3", Titel: "Child3", Childlist: []}]}];Lassen Sie uns schließlich default.js ignorieren, da ist nur "Hallo Wrold" drin.
Github URL: https://github.com/program-monkey/angular-oclazyload-demo
Das obige ist eine Sammlung von Informationen zum AngularJS Dynamic Lademodul und zum Abhängigkeit. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!