发表于： 2017-06-03 23:45:57
1 1246
今天完成的事：
学习了ui-router并重写路由。
1，ui-router:
假设有如下文件结构：
main.html>tem(模板文件夹)>tem1.html+tem2.html
各文件如下：
//main.html
<body ng-app="mainApp" ng-controller="mainCtrl">
<ul>
//通过ui-sref设置状态的链接
<a ui-sref="tem1">tem1</a>
<a ui-sref="tem1.tem2">tem2</a></ul>
//通过ui-view设置视图
<div ui-view></div>
</body>
//tem1.html
<div>
<p>这是第一页</p>
<div ui-view></div>
</div>
tem2.html
<div>
<p>这是第二页</p>
<div ui-view></div>
</div>
main文件中配置app.js:
//注入ui.router模块
mainApp=angular.module('mainApp',['ui.router'])
.config(function($urlRouterProvider,$stateProvider){
//默认视图是main.html
$urlRouterProvider.otherwise('/');
$stateProvider
//通过.连接符配置状态
//tem1是状态名，对应ui-sref的值
.state('tem1',{
//url值标记地址栏中的后缀，使用户知道现在在什么状态，可以省略不写。
url:'/a',
//若父模板中有多个ui-view视图，可进一步使用views对象来配置。
views:{
//''之间的值表示对应ui-view的名称，若未命名，则如此设置为空。
'':{
//此模板会被加载到父模板中。
//因为父模板只有一个视图，所以此模板会被加载如这个未命名的视图中。
templateUrl:'tem/tem1.html',
}
}})
//这是状态2
//用.链接符表明了状态间的父子关系，tem2使tem1的子状态。
.state('tem1.tem2',{
在url地址栏中将显示为/a/b
url:'/b',
views:{
//用@符号表示绝对命名
//表示为将此模板加载到tem1的未命名ui-view中。
'@tem1':{
templateUrl:'tem/tem2.html',
}
}
});
});
ui-router结构大致如上图所示，功能在注释中已标出。
其中有一些部分可以替换，如：
//设置默认视图
$urlRouterProvider.when('','/');
2，ui-router与ngRoute的对比：
$when —> $state 路由状态配置的时候
$routeParams —> $stateParams 带参数的时候的配置
$routeProvider —> $stateProvider 依赖注入的模块
<div ng-view></div> —> <div ui-view></div> 页面中绑定的指令
ui-router根据状态(state)配置模板，逻辑更清晰。
3,ui-router有两大优点：
a.ui-router支持嵌套视图，ngRoute不支持
b.ui-router支持多视图，ngRoute不支持
明天计划的事：
集体出游，户外活动。。
遇到的问题：
暂无
收获：
如上
返回列表
评论