时间：2021-07-01 10:21:17 帮助过：38人阅读
首先我们看下文件结构：
注意：这个demo没做嵌套路由，只是简单实现单视图的路由以展示效果。
我们来看主页面的代码：
在这个页面，我们只加载了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js，以及3个配置的js文件。
再看看四个页面的html代码：
angular-tree-control效果页面
页面上有个使用该插件对应的指令。
default页面
这里我们只是用来证明加载并正确执行default.js。
ng-table效果页面
ng-table
Sorting: {{ngtable.tableParams.sorting()|json}}
{{user.name}} {{user.age}}
这里写了些简单的ng-table效果。
ui-bootstrap效果页面
下拉框触发
这里仅写了个下拉框效果，证明正确加载并使用该插件。
好了，看完了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.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 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
});
};
路由的配置：
ui-bootstrap的下拉框简单的实现不需要控制器，那么我们就只看看ng-table和angular-tree-control的控制器js吧：
ng-table.js
angular-tree-control.js
让我们忽略default.js吧，毕竟里面只有个"Hello Wrold"。
以上就是本文的全部内容，希望对大家的学习有所帮助。