废话不多说，进入正题...
首先我们看下文件结构：
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没做嵌套路由，只是简单实现单视图的路由以展示效果。
我们来看主页面的代码：
主页 ui-bootstrap ng-table angular-tree-control

在这个页面，我们只加载了bootstrap的css、angular的js、ui-router的js、oclazyload的js，以及3个配置的js文件。
再看看四个页面的html代码：
angular-tree-control效果页面
{{node.title}}
页面上有个使用该插件对应的指令。
default页面
{{default.value}}

这里我们只是用来证明加载并正确执行default.js。
ng-table效果页面
ng-table
clear sorting sorting: {{ngtable.tableparams.sorting()|json}}
{{user.name}} {{user.age}}

这里写了些简单的ng-table效果。
ui-bootstrap效果页面
下拉框触发 下拉框内容.这里写个效果证明实现动态加载即可
这里仅写了个下拉框效果，证明正确加载并使用该插件。
好了，看完了html，我们看下加载配置和路由配置：
use strictvar 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.register; tempapp.filter = $filterprovider.register; tempapp.factory = $provide.factory; tempapp.service =$provide.service; tempapp.constant = $provide.constant; }]);
以上代码对模块的注册，仅仅依赖了ui.router和oc.lazyload。配置也只是简单配置了模块，以便在后面的js能识别到tempapp上的方法。
然后我们再看看oclazyload加载模块的配置：
use stricttempapp.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 stricttempapp.config([$stateprovider,$urlrouterprovider,$locationprovider,routefn]);function routefn($stateprovider,$urlrouterprovider,$locationprovider){ $urlrouterprovider.otherwise(/default); $stateprovider .state(default,{ url:/default, views:{ :{ templateurl:views/default.html, controller:defaultctrl, controlleras:default } }, resolve:{ deps:[$oclazyload,function($oclazyload){ return $oclazyload.load(js/controllers/default.js); }] } }) .state(uibootstrap,{ url:/uibootstrap, views:{ :{ templateurl:views/ui-bootstrap.html } }, resolve:{ deps:[$oclazyload,function($oclazyload){ return $oclazyload.load(ui.bootstrap); }] } }) .state(ngtable,{ url:/ngtable, views:{ :{ 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, views:{ :{ 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 stricttempapp.controller(ngtablectrl,[$location,ngtableparams,$filter,ngtablectrlfn]);function ngtablectrlfn($location,ngtableparams,$filter){ var vm = this; //数据 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 }]; vm.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 stricttempapp.controller(ngtreectrl,ngtreectrlfn);function ngtreectrlfn(){ var vm = this; //树数据 vm.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:[] } ] } ]; //树配置 vm.treeoptions = { nodechildren:childlist, dirselectable:false };};})();
让我们忽略default.js吧，毕竟里面只有个hello wrold。
以上就是本文的全部内容，希望对大家的学习有所帮助。