"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