最近項目比較忙額，白天要上班，晚上回來還需要做Angular知識點的ppt給同事，畢竟年底要辭職了，項目的後續開發還是需要有人接手的，所以就佔用了晚上學習的時間。本來一直不打算寫這些第三方外掛程式的學習筆記，不過覺得按需載入模組並且成功使用這個確實是個好處，還是記錄下來吧。基於本獸沒怎麼深入的使用requireJs，所以本獸不知道這個和requireJs有什麼區別，也不能清晰的說明這到底算不算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檔案夾 Scripts --- 架構及外掛程式檔案夾 angular-1.4.7 --- angular 不解釋 angular-ui-router --- uirouter 不解釋 oclazyload --- ocLazyload 不解釋 bootstrap --- bootstrap 不解釋 angular-tree-control-master --- angular-tree-control-master 不解釋 ng-table --- ng-table 不解釋 angular-bootstrap --- angular-bootstrap 不解釋 js --- js檔案夾 針對demo寫的js檔案 controllers --- 頁面控制器檔案夾 angular-tree-control.js --- angular-tree-control控制器代碼 default.js --- default控制器代碼 ng-table.js --- ng-table控制器代碼 app.config.js --- 模組註冊及配置代碼 oclazyload.config.js --- 載入模組配置代碼 route.config.js --- 路由配置及載入代碼 views --- html分頁檔夾 angular-tree-control.html --- angular-tree-control外掛程式的效果頁面 default.html --- default頁面 ng-table.html --- ng-table外掛程式效果頁面 ui-bootstrap.html --- uibootstrap外掛程式效果頁面 index.html --- 首頁面
注意：這個demo沒做嵌套路由，只是簡單實現單視圖的路由以展示效果。
我們來看首頁面的代碼：
<!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"></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/oclazyload.config.js"></script> <script src="js/route.config.js"></script></head><body><div ng-app="templateApp"> <div> <a href="#/default">首頁</a> <a href="#/uibootstrap" >ui-bootstrap</a> <a href="#/ngtable">ng-table</a> <a href="#/ngtree">angular-tree-control</a> </div> <div ui-view></div></div></body></html>
在這個頁面，我們只載入了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js，以及3個配置的js檔案。
再看看四個頁面的html代碼：
angular-tree-control效果頁面
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions"> {{node.title}} </treecontrol>
頁面上有個使用該外掛程式對應的指令。
default頁面
<div class="ng-cloak"> {{default.value}} </div>
這裡我們只是用來證明載入並正確執行default.js。
ng-table效果頁面
<div class="ng-cloak"> <div class="p-h-md p-v bg-white box-shadow pos-rlt"> <h3 class="no-margin">ng-table</h3> </div> <button ng-click="ngtable.tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button> <p> <strong>Sorting:</strong> {{ngtable.tableParams.sorting()|json}} </p> <table ng-table="ngtable.tableParams" class="table table-bordered table-striped"> <tr ng-repeat="user in $data"> <td data-title="'Name'" sortable="'name'"> {{user.name}} </td> <td data-title="'Age'" sortable="'age'"> {{user.age}} </td> </tr> </table></div>
這裡寫了些簡單的ng-table效果。
ui-bootstrap效果頁面
<span uib-dropdown class="ng-cloak"> <a href id="simple-dropdown" uib-dropdown-toggle> 下拉框觸發 </a> <ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown"> 下拉框內容.這裡寫個效果證明實現動態載入即可 </ul> </span>
這裡僅寫了個下拉框效果，證明正確載入並使用該外掛程式。
好了，看完了html，我們看下載入配置和路由配置：
"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; tempApp.directive = $compileProvider.directive; tempApp.filter = $filterProvider.register; tempApp.factory = $provide.factory; tempApp.service =$provide.service; tempApp.constant = $provide.constant; }]);
以上代碼對模組的註冊，僅僅依賴了ui.router和oc.LazyLoad。配置也只是簡單配置了模組，以便在後面的js能識別到tempApp上的方法。
然後我們再看看ocLazyLoad載入模組的配置：
"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" ] }, { name:"treeControl", module:true, files:[ "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(["$ocLazyLoadProvider","Modules_Config",routeFn]);function routeFn($ocLazyLoadProvider,Modules_Config){ $ocLazyLoadProvider.config({ debug:false, events:false, modules:Modules_Config });};
路由的配置：
"use strict"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:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("js/controllers/default.js"); }] } }) .state("uibootstrap",{ url:"/uibootstrap", templateUrl:"views/ui-bootstrap.html", resolve:{ deps:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("ui.bootstrap"); }] } }) .state("ngtable",{ url:"/ngtable", templateUrl:"views/ng-table.html", controller:"ngTableCtrl", controllerAs:"ngtable", resolve:{ deps:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("ngTable").then( function(){ return $ocLazyLoad.load("js/controllers/ng-table.js"); } ); }] } }) .state("ngtree",{ url:"/ngtree", templateUrl:"views/angular-tree-control.html", controller:"ngTreeCtrl", controllerAs:"ngtree", resolve:{ deps:["$ocLazyLoad",function($ocLazyLoad){ return $ocLazyLoad.load("treeControl").then( function(){ return $ocLazyLoad.load("js/controllers/angular-tree-control.js"); } ); }] } })};
ui-bootstrap的下拉框簡單的實現不需要控制器，那麼我們就只看看ng-table和angular-tree-control的控制器js吧：
ng-table.js
(function(){"use strict"tempApp.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);function ngTableCtrlFn($location,NgTableParams,$filter){ //資料 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", age: 29 }, { name: "Enos", age: 34 }]; this.tableParams = new NgTableParams( // 合并預設的配置和url參數 angular.extend({ page: 1, // 第一頁 count: 10, // 每頁的資料量 sorting: { name: 'asc' // 預設排序 } }, $location.search()) ,{ total: data.length, // 資料總數 getData: function ($defer, params) { $location.search(params.url()); // 將參數放到url上，實現重新整理頁面不會跳回第一頁和預設配置 var orderedData = params.sorting ? $filter('orderBy')(data, params.orderBy()) :data; $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); } } );};})();
angular-tree-control.js
(function(){"use strict"tempApp.controller("ngTreeCtrl",ngTreeCtrlFn);function ngTreeCtrlFn(){ //樹資料 this.treeData = [ { id:"1", title:"標籤1", childList:[ { id:"1-1", title:"子級1", childList:[ { id:"1-1-1", title:"再子級1", childList:[] } ] }, { id:"1-2", title:"子級2", childList:[ { id:"1-2-1", title:"再子級2", childList:[ { id:"1-2-1-1", title:"再再子級1", childList:[] } ] } ] }, { id:"1-3", title:"子級3", childList:[] } ] }, { id:"2", title:"標籤2", childList:[ { id:"2-1", title:"子級1", childList:[] }, { id:"2-2", title:"子級2", childList:[] }, { id:"2-3", title:"子級3", childList:[] } ]} , { id:"3", title:"標籤3", childList:[ { id:"3-1", title:"子級1", childList:[] }, { id:"3-2", title:"子級2", childList:[] }, { id:"3-3", title:"子級3", childList:[] } ] } ]; //樹配置 this.treeOptions = { nodeChildren:"childList", dirSelectable:false };};})();
讓我們忽略default.js吧，畢竟裡面只有個"Hello Wrold"。
github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
以上就是對AngularJS 動態載入模組和依賴的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
