angular-ui-router 学习笔记
2017-05-24 本文已影响1326人
angelwgh
基本用法
基本用法跟angular-router类似
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>welcome</h1>
<div ui-view></div>
<script type="text/javascript" src="../../bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="../../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
var app = angular.module('app', ['ui.router'])
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/head');//在请求无效路由时使用的路径
$stateProvider.state('head',{ //设置路由状态
url:'/head', //路径
templateUrl:'tpls/head.html' //加载的模版
})
.state('part1',{
url:'/part1',
templateUrl:'tpls/part1.html'
})
.state('part2',{
url:'/part2',
templateUrl:'tpls/part2.html'
})
.state('part3',{
url:'/part3',
templateUrl:'tpls/part3.html'
})
})
路由之间的跳转
<a ui-sref="head">首页</a>
把a标签链接绑定到路由状态(state),如果这个路由状态(state)关联了一个有效的URL,ui-sref就会通过 $state.href() 方法自动生成和更新href属性.
还可以在ui-sref中使用相对路径,就像传递给$state.href() 的相对路径一样,只需要确认路径是相对于链接所处的路由状态(state)的,也就是加载的路由状态(state)模版包含这个链接
可以使用ui-sref-opts选择属性指定要传递给$state.go()的选项。选项被限制在location、inherit和reload。
<ul>
<li>
<a ui-sref="head">首页</a>
<a ui-sref="part1">第一部分</a>
<a ui-sref="part2">第二部分</a>
<!-- 跳转到 part3.part4状态,part4是part3的子状态-->
<a ui-sref="part3.part4">第三部分</a>
</li>
</ul>
var app = angular.module('app', ['ui.router'])
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/head');
$stateProvider.state('head',{
url:'/head',
templateUrl:'tpls/head.html'
})
.state('part1',{
url:'/part1',
templateUrl:'tpls/part1.html'
})
.state('part2',{
url:'/part2',
templateUrl:'tpls/part2.html'
})
.state('part3',{
url:'/part3',
templateUrl:'tpls/part3.html'
})
.state('part3.part4',{
url:'/part4',
templateUrl:'tpls/part4.html'
})
})
多个view以及state嵌套
有时候一个页面可能有多个view,一个view可以匿名也可以命名,但在同一个模版中只能有一个匿名view.
<!-- 匿名-->
<div ui-view></div>
<!-- 命名-->
<div ui-view="viewName"></div>
如果只有一个单一的匿名view,可以这样写
<div ui-view></div>
$stateProvider.state("home", {
template: "<h1>HELLO!</h1>"
})
也可以显式的指定一个views属性
$stateProvider.state("home", {
views: {
"": {
template: "<h1>HELLO!</h1>"
}
}
})
在同一个模版中如果给view命名了或者有多个view,则只能使用views属性,当只有一个view时候可以命名也可以匿名
<div ui-view="main"></div>
$stateProvider.state("home", {
views: {
"main": {
template: "<h1>HELLO!</h1>"
}
}
})
多视图嵌套
index.html
<div ui-view></div>
content.html
<div ui-view="header"></div>
<div ui-view="body"></div>
head.html
<ul class="nav nav-pills">
<li>
<a ui-sref="state.part1">首页</a>
</li>
<li><a ui-sref="state.part1">第一部分</a></li>
<li><a ui-sref="state.part2">第二部分</a></li>
<li><a ui-sref="state.part3.part4">第三部分</a></li>
</ul>
part3.html
<div>第三部分</div>
<a ui-sref=".part4">第四部分</a>
<div ui-view></div>
main.js
var app = angular.module('app', ['ui.router'])
app.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/part1');
$stateProvider
.state('state',{
url:'/',
views:{
"@":{
templateUrl:'tpls/content.html'
},
"header@state":{ //加载content中的header视图
templateUrl:'tpls/head.html'
}
}
})
.state('state.part1',{
url:'part1',
views:{
"body@state":{//state里name为body的view加载模版
templateUrl:'tpls/part1.html'
}
}
})
.state('state.part2',{
url:'part2',
views:{
"body@state":{//state里name为body的view加载模版
templateUrl:'tpls/part2.html'
}
}
})
.state('state.part3',{
url:'part3',
views:{
"body@state":{ //state里name为body的view加载模版
templateUrl:'tpls/part3.html'
}
}
})
.state('state.part3.part4',{
url:'/part4',
views:{
"":{ //part3(part4的父级state)的匿名view加载模版
templateUrl:'tpls/part4.html'
}
}
})
})
$stateProvider.state(name,stateConfig)参数
var app = angular.module('app', ['ui.router'])
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state(
'states',//一个合法statename,或者父/子state,如'states.home','states.about'
{
//template:字符串或函数,路由html模版,如果是函数,那么函数的参数是从当前 `$location.path()`提取到的状态参数
//templateUrl:字符串或函数.路由模版路径
//templateProvider:返回HTML字符串的函数
//controller:我们既可以通过控制器的名字来关联一个预定义的控制器，也可以直接创建一个控制器函数来处理。
//controllerProvider:一个函数,返回实际控制器
//controllerAs:控制器别名
//parent:可选定当前state的父state
//resolve:{
// key:value
// }为控制器提供可选的依赖对象,key是被注入控制器的依赖的名称,value如果是一个字符串，就试图用这个字符串来匹配当前已经注册的服务名称，如果是一个函数，执行这个函数，返回的值就是依赖。如果函数返回一个 promise，在控制器被实例化之前，将会被 resolved，返回的值被注入到 controller 中。
//url:带有可选参数的url片段,当一个state被激活,$stateParams服务将被传入的参数填充
//views:定义视图
//Params:参数名称或者正则的数组。它不能合并 url 选项，当状态激活的时候，应用会使用这些参数填充 $stateParams 服务。
//Abstract:我们永远不能直接激活抽象模板，但是，可以通过派生模板来激活.抽象模板提供封装命名视图的模板，可以传递 $scope 对象给派生子模板。可以通过它解决依赖问题，或者特定数据处理，或者简单地同样的 url 来嵌套多个路由
//onEnter, onExit 在应用进入或者退出视图的时候，会调用这些回调函数。它们都可以设置回调函数；函数可以访问获取的数据。
//data：数据不会被注入到控制器中，用途是从父状态传递数据到子状态。
}
)
})
