เมื่อเร็ว ๆ นี้โครงการค่อนข้างยุ่ง ฉันต้องไปทำงานในระหว่างวันและกลับมาตอนกลางคืนและฉันยังต้องทำจุดความรู้เชิงมุม PPT สำหรับเพื่อนร่วมงานของฉัน ท้ายที่สุดฉันจะลาออกในตอนท้ายของปีและบางคนจะยังคงต้องเข้ามามีส่วนร่วมในการพัฒนาโครงการครั้งต่อไปดังนั้นจึงต้องใช้เวลาในการศึกษาตอนกลางคืน ฉันไม่เคยวางแผนที่จะเขียนบันทึกการศึกษาสำหรับปลั๊กอินของบุคคลที่สามเหล่านี้ แต่ฉันคิดว่ามันเป็นประโยชน์อย่างมากในการโหลดโมดูลตามความต้องการและใช้งานได้สำเร็จดังนั้นฉันควรบันทึก เนื่องจากสัตว์ร้ายนี้ไม่ได้ใช้ความต้องการในเชิงลึกดังนั้นสัตว์ร้ายตัวนี้จึงไม่ทราบความแตกต่างระหว่างสิ่งนี้และต้องการ Js และไม่สามารถอธิบายได้อย่างชัดเจนว่าสิ่งนี้ถือว่าเป็นการโหลดตามความต้องการของ Angular หรือไม่
เพื่อให้บรรลุผลของการศึกษานี้บันทึกความรู้เราจำเป็นต้องใช้:
Angular: https: //github.com/angular/angular.js
ui-router: https: //github.com/angular-ui/ui-router
oclazyload: https: //github.com/ocombe/oclazyload
โดยไม่ต้องกังวลใจฉันจะไปถึงจุด ...
ก่อนอื่นมาดูโครงสร้างไฟล์:
Angular-Oclazyload --- สคริปต์โฟลเดอร์ Demo --- เฟรมเวิร์กและปลั๊กอินโฟลเดอร์ Angular-1.4.7 --- Angular ไม่ได้อธิบาย Angular-Ui-Router --- uirouter ไม่ได้อธิบาย oclazyload --- oclazyload ไม่ได้อธิบาย bootstrap --- ไม่ได้อธิบายถึง- Angular-Bootstrap --- Angular-Bootstrap ไม่ได้อธิบาย JS --- JS Folder JS ไฟล์ที่เขียนขึ้นสำหรับคอนโทรลเลอร์สาธิต --- หน้าคอนโทรลเลอร์เพจโฟลเดอร์ Angular-Tree-control.js --- รหัสคอนโทรลเลอร์แบบทรี oclazkload.config.js --- โหลดรหัสการกำหนดค่าโมดูลเส้นทางเส้นทาง. config.js --- การกำหนดค่าเส้นทางและการดูรหัสโหลด --- หน้า html หน้าโฟลเดอร์ Angular-tree-control.html --- plug-table-table-table-table-table uibootstrap plug-in effect page index.html --- หน้าหลัก
หมายเหตุ: การสาธิตนี้ไม่ได้ทำการกำหนดเส้นทางซ้อนกันเพียงแค่ใช้การกำหนดเส้นทางมุมมองเดียวเพื่อแสดงเอฟเฟกต์
มาดูรหัสของหน้าหลัก:
<! doctype html> <html lang = "en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta charset = "utf-8"/> <title> href = "สคริปต์/bootstrap/dist/css/bootstrap.min.css"/> <script src = "สคริปต์/angular-1.4.7/angular.js"> </script> <script src = "scripts/angular-ui-router/release src = "สคริปต์/oclazyload/dist/oclazyload.min.js"> </script> <script src = "js/app.config.js"> </script> <script src = "js/oclazyload.config.js"> </script> src = "js/route.config.js"> </script> </head> <body> <div ng-app = "TemplateApp"> <div> <a href = "#/default"> บ้าน </a> <a href = "#/uibootstrap" href = "#/ngtree"> angular-tree-control </a> </div> <div ui-view> </div> </div> </body> </html>
ในหน้านี้เราจะโหลด CSS ของ Bootstrap, Angular JS, UI-Router JS, Oclazyload JS และ 3 ไฟล์ JS ที่กำหนดค่าไว้
มาดูรหัส HTML ของสี่หน้า:
หน้าเอฟเฟกต์ Angular-Tree-Control
<treecontrol tree-model = "ngtree.treedata" ตัวเลือก = "ngtree.treeoptions"> {{node.title}} </treecontrol>มีคำสั่งบนหน้าเพื่อใช้ปลั๊กอิน
หน้าเริ่มต้น
<div> {{default.value}} </div>ที่นี่เราเพิ่งใช้มันเพื่อพิสูจน์ว่าการโหลดและเรียกใช้งาน default.js อย่างถูกต้อง
หน้าเอฟเฟกต์ NG-TABLE
<div> <div> <h3> ng-table </h3> </div> <ปุ่ม ng-click = "ngtable.tableparams.sorting ({})"> ล้างการเรียงลำดับ </button> <p> <strong> การเรียงลำดับ: </strong> ng-table = "ngtable.tableparams"> <tr ng-repeat = "ผู้ใช้ใน $ data"> <td data-title = "'name'" sortable = "'name'"> {user.name}} </td> <td data-title = "'อายุ' </table> </div>นี่คือเอฟเฟกต์ NG-TABLE อย่างง่าย
หน้าเอฟเฟกต์ ui-bootstrap
<span uib-dropdown> <a href id = "simple-dropdown" uib-dropdown-toggle> ทริกเกอร์กล่องดึงลง </a> <ul aria-labelledby = "simple-dropdown"> เนื้อหากล่องแบบดึงลง เขียนหลักฐานของเอฟเฟกต์ที่นี่เพื่อให้ได้การโหลดแบบไดนามิก </ul> </span>
นี่เป็นเพียงเอฟเฟกต์แบบเลื่อนลงเพื่อพิสูจน์ว่าปลั๊กอินถูกโหลดอย่างถูกต้องและใช้งาน
ตกลงหลังจากอ่าน HTML ให้ดูที่การกำหนดค่าการโหลดและการกำหนดค่าการกำหนดเส้นทาง:
"ใช้" var tempapp = angular.module ("TemplateApp", ["ui.router", "oc.lazyload"]) config ("$ provel", "$ compileProvider", "controllerprovider" $ controllerprovider.register;รหัสข้างต้นขึ้นอยู่กับ UI.Router และ Oc.lazyload สำหรับการลงทะเบียนโมดูลเท่านั้น การกำหนดค่าได้รับการกำหนดค่าเพื่อกำหนดค่าโมดูลเพื่อให้ JS ที่ตามมาสามารถรับรู้วิธีการบน Tempapp
ถ้าอย่างนั้นมาดูการกำหนดค่าของโมดูลโหลด oclazyload:
"ใช้อย่างเข้มงวด" tempapp.constant ("modules_config", [{ชื่อ: "ngtable", โมดูล: จริง, ไฟล์: ["สคริปต์/ng-table/dist/ng-table.min.css", "Scripts/ng-table/dist/ng-table.min.js.js.js.js.js.js "สคริปต์/เชิงมุม-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"]}, {ชื่อ: "treecontrol", โมดูล: จริง, ไฟล์: ["สคริปต์/Angular-tree-control-master/css/control.css "สคริปต์/Angular-Tree-Control-Master/CSS/Tree-Control-attribute.css", "สคริปต์/Angular-Tree-Control-Master/Angular-Tree-Control.js"]}]) config ("$ oclazyloadprovider", "modules_config" Routefn ($ oclazyloadprovider, modules_config) {$ oclazyloadprovider.config ({debug: false, เหตุการณ์: เท็จ, โมดูล: modules_config});};การกำหนดค่าการกำหนดเส้นทาง:
"ใช้อย่างเข้มงวด" tempapp.config (["$ stateprovider", "$ urlrouterprovider", routefn]); ฟังก์ชั่น routefn ($ stateprovider, $ urlrouterprovider) {$ urlrouterprovider.otherwise ("/ค่าเริ่มต้น"); $ stateprovider .state ("ค่าเริ่มต้น", {url: "/ค่าเริ่มต้น", templateurl: "views/default.html", คอนโทรลเลอร์: "defaultCtrl", คอนโทรลเลอร์: "ค่าเริ่มต้น", แก้ไข: {deps: ["$ oclazyload", ฟังก์ชั่น .state ("uibootstrap", {url: "/uibootstrap", templateurl: "views/ui-bootstrap.html", แก้ไข: {deps: ["$ oclazyload", ฟังก์ชั่น url: "/ngtable", templateurl: "views/ng-table.html", คอนโทรลเลอร์: "ngtablectrl", คอนโทรลเลอร์: "ngtable", แก้ไข: {deps: ["$ oclazyload", ฟังก์ชั่น $ oclazyload.load ("js/controllers/ng-table.js");});}]}}) state ("ngtree", {url: "/ngtree" deps: ["$ oclazyload", ฟังก์ชั่น ($ oclazyload) {return $ oclazyload.load ("TreeControl") จากนั้น (ฟังก์ชั่น () {return $ oclazyload.load ("js/controllers/angular-tree-control.js");};การใช้งานอย่างง่าย ๆ ของกล่องดรอปดาวน์ของ Ui-Bootstrap ไม่จำเป็นต้องมีคอนโทรลเลอร์ดังนั้นลองดูที่คอนโทรลเลอร์ JS ของ NG-TABLE และ Angular-Tree-Control เท่านั้น:
ng-table.js
(function () {"ใช้" tempapp.controller ("ngtablectrl", ["$ location", "ngtableparams", "$ ngtablectrl", [" "tiancum", อายุ: 43}, {ชื่อ: "jacob", อายุ: 27}, {ชื่อ: "nephi", อายุ: 29}, {ชื่อ: "enos", อายุ: 34}, {ชื่อ: "tiancum", อายุ: 43}, {ชื่อ: "Enos", อายุ: 34}, {ชื่อ: "tiancum", อายุ: 43}, {ชื่อ: "Jacob", อายุ: 27}, {ชื่อ: "Nephi", อายุ: 29}, {ชื่อ: "enos", อายุ: 34}, {ชื่อ: "Nephi", อายุ: 29}, {ชื่อ: "eNos", อายุ: 34}]; , {Total: data.length, // ข้อมูลทั้งหมด 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 () {"ใช้อย่างเข้มงวด" tempapp.controller ("ngtreectrl", ngtreectrlfn); ฟังก์ชั่น ngtreectrlfn () {// ข้อมูลต้นไม้ this.treedata = [{id: "1", ชื่อ: "tag1" Title: "Child1", ChildList: [{id: "1-1-1", ชื่อเรื่อง: "child1", เด็ก: [{id: "1-2", ชื่อ: "child2", เด็ก: [{id: "1-2-1", ชื่อ: "เด็ก", เด็ก: "-1" ChildList: []}]}]}, {id: "1-3", ชื่อ: "เด็กระดับ 3", เด็ก: []}]}, {id: "2", ชื่อ: "แท็ก 2", เด็ก: [{id: "2-1", ชื่อ: ID: "3-1", ชื่อเรื่อง: "Child1", ChildList: []}, {id: "3-2", ชื่อ: "child2", childlist: []}, {id: "3-3", ชื่อ: "child3", เด็ก: []}]; -ลองเพิกเฉยต่อ default.js หลังจากทั้งหมดมีเพียง "สวัสดี wrold" ในนั้น
GitHub URL: https://github.com/program-monkey/angular-oclazyload-demo
ข้างต้นคือการรวบรวมข้อมูลเกี่ยวกับโมดูลการโหลดแบบไดนามิก AngularJS และการพึ่งพา เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!