Baru -baru ini, proyek ini cukup sibuk. Saya harus pergi bekerja di siang hari dan kembali di malam hari dan saya masih perlu melakukan titik pengetahuan sudut ppt untuk rekan -rekan saya. Lagi pula, saya akan mengundurkan diri pada akhir tahun, dan seseorang masih perlu mengambil alih pengembangan proyek berikutnya, sehingga membutuhkan waktu untuk belajar di malam hari. Saya tidak pernah merencanakan untuk menulis catatan studi untuk plug-in pihak ketiga ini, tapi saya pikir itu benar-benar bermanfaat untuk memuat modul sesuai permintaan dan menggunakannya dengan sukses, jadi saya harus merekamnya. Karena binatang buas ini belum menggunakan persyaratan secara mendalam, jadi binatang buas ini tidak tahu perbedaan antara ini dan persyaratan, dan tidak dapat menjelaskan dengan jelas apakah ini dianggap sebagai pemuatan sesuai permintaan Angular.
Untuk mencapai efek dari studi ini Catatan Poin Pengetahuan, kita perlu menggunakan:
Angular: https: //github.com/angular/angular.js
UI-Router: https: //github.com/angular-ui/ui-router
Oclazyload: https: //github.com/ocombe/oclazyload
Tanpa basa -basi lagi, saya akan sampai pada intinya ...
Pertama, mari kita lihat struktur file:
Angular-OCLAZYLOAD --- Demo Folder Scripts --- Framework dan plug-in folder Angular-1.4.7 --- Angular Tidak menjelaskan Angular-ui-router --- Uirouter Tidak Menjelaskan OclazyLoad --- OCLAZY tidak menjelaskan bootstrap --- Bootstrap tidak menjelaskan non-tata-control-control-control-master --- Angular-c-cor-cor-cor-control-control-control-control-control-control-control-cor-control-control-control-control-control-cor-control-cor-control-cor-control-cor-control-cor-control-cor-control-cor-control-cor-control-cor-control-cor-cor-cor-control Angular-Bootstrap --- Angular-Bootstrap Tidak menjelaskan JS --- file js js JS yang ditulis untuk pengontrol demo --- pengontrol halaman controller Angular-tree-control.js --- Angular-tree-control Controler Code controler. oClazyload.config.js --- Muat modul konfigurasi rute rute.config.js --- konfigurasi rute dan pemuatan kode pemuatan --- html halaman folder sangular-tree-control.html --- Page-t-control-control-page-troP-inpure-ke-tong-ke-taPLO-INFLO-IND-TOPLE-INFLO-IND-TOPLO-IND-TOPLO-IND-TOPLE- uibootstrap Plug-in Effect Page Index.html --- Halaman Utama
CATATAN: Demo ini tidak melakukan perutean bersarang, itu hanya mengimplementasikan perutean tontonan tunggal untuk menunjukkan efeknya.
Mari kita lihat kode halaman utama:
<! Doctype html> <html lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> <adept> <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/oclazy.config.js"> </script> <script script sript script/route.cconfig.js "> </script> <script> <cript script script script/route.cconf. src = "js/route.config.js"> </script> </head> <body> <v div-app = "TemplateApp"> <sv> <a href = "#/default"> home </a> <a href = "#/uibootstrap"> ui-bootstrap </a> <a href = "#/uibootstrap"> ui-bootstrap </a> <a href = "#/uibootstrap"> ui-bootstrap </a> <a href = "#/uibootstrap"> ui-bootstrap </a> <a href = "#/uibootstrap"> ui-bootstrap </a> <a href = "#/uibootStrap"> ui-bootstrap </a> <a href = "#/uibootstrap"> ui-bootstrap </a> <a href = "#" href = "#/ngtree"> Angular-tree-control </a> </div> <v ui-view> </div> </div> </body> </html>
Di halaman ini, kami hanya memuat CSS Bootstrap, JS Angular, UI-Router JS, Oclazyload JS, dan 3 file JS yang dikonfigurasi.
Mari kita lihat kode HTML dari empat halaman:
Halaman Efek Sudut-Tree-Control
<Treecontrol Tree-Model = "ngtree.treedata" option = "ngtree.treeoptions"> {{node.title}} </treecontrol>Ada perintah pada halaman untuk menggunakan plug-in.
halaman default
<verv> {{default.Value}} </div>Di sini kami hanya menggunakannya untuk membuktikan bahwa memuat dan menjalankan default.js dengan benar.
Halaman Efek NG-Table
<div> <div> <h3> ng-table </h3> </div> <button ng-click = "ngtable.tableparams.sorting ({})"> Clear Sorting </tutpon> <p> <strong> penyortiran: </strong> {{ngtable.tableparams.sorting () | json ng-table = "ngtable.tableParams"> <tr ng-repeat = "user in $ data"> <td data-title = "'name'" sortable = "'name'"> {{user.name}} </td> <td-title = "'' '' '' '' {TD {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {td {TD" </able> </div>Berikut adalah beberapa efek meja NG sederhana.
Halaman Efek Ui-Bootstrap
<span uib-dropdown> <a href id = "simple-dropdown" uib-dropdown-toggle> pemicu kotak pull-down </a> <ul aria-labeledby = "dropdown sederhana"> konten kotak pull-down. Tulis bukti efek di sini untuk mencapai pemuatan dinamis </ul> </span>
Berikut adalah efek kotak drop-down untuk membuktikan bahwa plug-in dimuat dengan benar dan digunakan.
OK, setelah membaca HTML, mari kita lihat konfigurasi pemuatan dan konfigurasi routing:
"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;Kode di atas hanya bergantung pada UI.Router dan OC.Lazyload untuk pendaftaran modul. Konfigurasi hanya dikonfigurasi untuk mengonfigurasi modul sehingga JS selanjutnya dapat mengenali metode pada Tempapp.
Lalu mari kita lihat konfigurasi modul beban muatan oClazy:
"Gunakan ketat" tempapp.constant ("modules_config", [{name: "ngTable", module: true, file: ["skrip/ng-table/dist/ng-table.min.min.css", "name," oP-table/ng-table.min.min.css ", {" uP-table/ng-table. "Script/Angular-Bootstrap/Ui-Bootstrap-Tpls-0.14.3.min.js"]}, {name: "Treecontrol", Modul: Benar, File: ["Script/Angular-Tree-Control-Master/CSS/Tree-Control.CSS", "Script/Angular-Tree-Control-Master/CSS/Tree-Control-Attribute.css", "Scripts/Angular-Tree-Control-Master/Angular-Tree-Control.js"]}]). Config (["$ oCaLAZYProvider", "Modules_fig", routefn])); Function; Function; routefn ($ oClazyLoadProvider, modules_config) {$ oClazyLoadProvider.config ({debug: false, events: false, modules: modules_config});};Konfigurasi Routing:
"Gunakan ketat" 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: "$ oCaLADLOAD", function ($ oCLAZY) {oCOLVE $ oCLAID ("$ oCLAZY", function ($ oCLAZY) {oCOVER $ oCLAID ("$ oCLAZELOAD", function ($ oCLAZY) {oCOVE $ oCLAID/JAULES ("$ oCaLOADLEAD", function ($ oCLAZY) {oCOVER $ oCLAUD/JACH. " }}) .state ("uibootstrap", {url: "/uibootstrap", templateUrl: "view/ui-bootstrap.html", selesaikan: {deps: ["$ oClazy", function ($ oClazy) {return $ oCLAZY.LOADLOAD ("uLia. .state ("ngtable", {url: "/ngtable", templateUrl: "views/ng-table.html", controller: "ngtablectrl", controlleras: "ngtable", resolve: {deps: "$ oclazy", function ($ oCload) {{oLADLEADA ("$ oCLAZELOAD", Fungsi ($ oCLAADLEADLEADLEADLE ($ oLAZLEADA ($ oCLOADLEADA ($ oCLOADLEADA ($ function () {return $ oclazy.load ("js/controllers/ng-table.js"); Resolve: {deps: ["$ oClazyLoad", function ($ oClazy) {return $ oClazy.load ("treecontrol"). Kemudian (function () {return $ oClazy.load ("js/controllers/angular-tree-control.js");});Implementasi sederhana dari kotak drop-down UI-Bootstrap tidak memerlukan pengontrol, jadi mari kita hanya melihat JS controller dari NG-Table dan Angular-Tree-Control:
ng-table.js
(function () {"gunakan ketat" tempaPp.controller ("ngtablectrl", ["$ location", "ngtableparams", "$ filter", ngtablectrlfn]); function ngtablectrlfn ($ location, ngtableParams, $ filter) {// data var data = [$ ": {{" ngtableParams, $ filter) {// Data var data = [$ "{{" {"{" ngtableParams, $ filter) {// data var data "Tiancum", usia: 43}, {name: "jacob", usia: 27}, {name: "nefi", usia: 29}, {name: "eNos", usia: 34}, {name: "tiancum", usia: 43}, {nama: "Jacob", usia: 27 {"Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: "Name:" Name: " "Enos", usia: 34}, {name: "tiancum", usia: 43}, {name: "jacob", usia: 27}, {name: "nefi", usia: 29}, {name: "enge", usia: 34}, {name: "tiancum", usia: 43 {"{" {"{" {"{" {"{" {" "Nefi", usia: 29}, {name: "enos", usia: 34}]; , {Total: Data.length, // Total Data GetData: Function ($ Defer, Params) {$ location.search (params.url ()); $ defer.resolve (ordereddata.slice ((params.page () - 1) * params.count (), params.page () * params.count ()));Angular-tree-control.js
(function () {"gunakan ketat" tempapp.controller ("ngtreectrl", ngtreectrlfn); function ngtreectrlfn () {// data pohon this.treedata = [{id: "1", judul: "tag1", childList: [{id: "1-1," 1 "," tag1 ", childlist: {id:" 1-1, "" 1 "," tag1 ", childList: [{id:" 1-1, "" 1 "," tag1 ", childList: [{id:" 1-1 "," " Judul: "Child1", Childlist: [{Id: "1-1-1", Judul: "Child1", Childlist: [{Id: "1-2", Judul: "Child2", Childlist: [{ID: "1-2-1", Judul: "Child2", Childlist: [{ID: "1-2-1", Judul "," Level2 ", Childlist: [{{id:" 1-2-1 ", judul" ","-N Child2 ", Childlist: [{ID:" 1-2-1 ", judul:" ID2 "," Child2 ", Childlist: [{{ID:" 1-2-1 ", judul", "ID2", "Child2," {{{{{{ID: "1-2-1," 1-2-1, "1-2 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", Judul: "Child1", ChildList: []}, {ID: "3-2", Judul: "Child2", ChildList: []}, {ID: "3-3", Judul: "Child3", Childlist: []}]}]; };};}) ();Lagipula mari kita abaikan default.js, hanya ada "hello wold" di dalamnya.
URL github: https://github.com/program-monkey/angular-oclazyload-demo
Di atas adalah kumpulan informasi tentang modul pemuatan dinamis AngularJS dan dependensi. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!