ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建)。它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的URL路由。
ocLoayLoad是AngularJS的模块按需加载器。按需加载的对象
,简单说就是哪个页面需要什么资源,在加载哪个页面的时候在加载,而不是把所有的资源放在模板里。
,三个主要文件
& lt;脚本src=" https://www.yisu.com/zixun/angular/1.4.8/angular/angular.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/angular/ui-router/release/angular-ui-router.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/angular/oclazyload/src/ocLazyLoad.min.js "祝辞& lt;/script>
推荐
1:首先下载插件可以百度搜索,这里我推荐在线测试的https://www.bootcdn.cn/angular-ui-router/
2: github的url: https://github.com/366065186/angularjs-oclazyload
,,3:Angularjs https://code.angularjs.org/
html文件(部分代码)简单说明
1:首先页面引入上面三个文件
2:在标签中写入ui-sref=的链接路径的标签
2:在页面定义一块区域用于显示链接内容& lt; ui-view> & lt;/ui-view>
, js代码:
首先在模块中注入
的ui。路由器”、“oc.lazyLoad”然后在通过配置进行路由配置。
(函数(){
应用var=角。模块(“应用程序”,[' ui。路由器”、“oc.lazyLoad '])//配置路由
app.config(函数(stateProvider美元){
stateProvider美元//个人中心主页
.state (admin/索引,{
url:“/admin/指数”,
templateUrl:“/admin/指数”,//加载页面需要的js
解决:负载(['/静态/js/转移/adminlte/index.js '])
})//分类管理列表
.state(“类/指数”,{
url:“/类/指数”,
templateUrl:“/类/指数”,
解决:负载(
'/静态/js/转移/adminlte/分类/index.js”
])
})//轮播图列表
.state(“滚”,{
url:/卷,
templateUrl:“/卷”,
解决:负载(
'/静态/js/转移/adminlte/broadcat.js '
])
})//验证码列表
.state(“代码”,{
url:“/代码”,
templateUrl:“/代码”,
解决:负载(
'/静态/js/转移/adminlte/code.js '
])
})//电影列表
.state(“电影”,{
url:“/电影”,
templateUrl:电影“/?
解决:负载(
'/静态/js/转移/adminlte/电影/movie.js '
])
})//电影编辑
.state(电影/编辑,{
url:/电影/编辑,
templateUrl:“/电影/编辑”,
解决:负载(
'/静态/js/转移/adminlte/电影/movieedit.js '
])
})
});//在加载该模块的时候调用美元state.go (“admin/指数”);,以激活admin/索引状态。
app.run(函数(状态){
美元state.go (“admin/指数”);
});/*
*通过美元ocLazyLoad加载页面对应的所需的JS数据
*通过美元问异步加载JS文件数据其中使用的是承诺【保护模式】
*/回调函数加载(src) {
返回{
deps:(
“ocLazyLoad美元”、“问”美元,
函数(ocLazyLoad,问美元){
var延迟=$ q.defer ();
var=false承诺;
src=angular.isArray (src) & # 63;src: srcs.split (/\ s +/;
如果(承诺){
承诺=deferred.promise;
}
angular.forEach (src,
函数(src) {=承诺的承诺。然后(函数(){
angular.forEach ([],
函数(模块){
如果(module.name===src) {
src=https://www.yisu.com/zixun/module.module ?module.name: module.files;
}
});
返回ocLazyLoad.load美元(src);
});
});
deferred.resolve ();
还回调?的承诺。然后(函数(){
回调();
}):承诺;
}
]
};
}
})();
<强> AngularJS路由设置对象参数规则:
<强>属性
<强>类型
<强>描述
模板
字符串
在ng-view中插入简单的html内容
templateUrl
字符串
在ng-view中插入html模版文件
控制器
字符串,函数/数组
在当前模版上执行的控制器函数
controllerAs
字符串
为控制器指定别名
redirectTo
字符串,函数
重定向的地址
解决
对象
指定当前控制器所依赖的其他模块
