爱创课堂 前端教程angular 教程 Ui路由参数 子视图
Ui路由参数
定义路由路径通过 /path
定义动态路径 /:path
为路径定义类型 /{path:type}
Type可以是正则可以是字符串类型（int，string，date）
定义query（query不是必须拥有的） ?query1&query2
这种方式与动态路径的区别是
动态路径一定在hash中设置
Query不一定在hash设置，并且可以添加未定义的字段，但是在$stateParams中是获取不到的
$stateParams中只能获取路由中配置的字段数据
|
1 * url:
"/users/:userid"
2 * url: "/books/{bookid:[a-zA-Z_-]}"
3 * url: "/books/{categoryid:int}"
4 * url: "/books/{publishername:string}/{categoryid:int}"
5 * url: "/messages?before&after"
6 * url: "/messages?{before:date}&{after:date}"
7 * url: "/messages/:mailboxid?{before:date}&{after:date}"
|
多视图的渲染
Ui-view指令可以定义视图名称，这些名称我们可以在页面中渲染，通过状态对象中views属性配置
$urlRouterProvider
$urlRouterProvider
做url转化的
When做重定向
将第一个参数路由从定向到第二个参数路由
Otherwise 设置默认路由，
参数就是默认路由
|
1 <div
ng-app="app">
2 <div class="header"
ui-view="header"></div>
3 <div class="container">
4 <div class="content"
ui-view="content"></div>
5 <div class="slider"
ui-view="slider"></div>
6 </div>
7 </div>
8
9 angular.module('app', ['ui.router'])
10 .config(function ($stateProvider, $urlRouterProvider) {
11 console.log($urlRouterProvider)
12 var header = {
13 template: '<h1>header</h1>'
14 }
15 // 定义根路由
16 $stateProvider
17 .state('home', {
18 url: '/',
19 views: {
20 header: header,
21 content: {
22 template: '<h1>content</h1>'
23 },
24 slider: {
25 template: '<h1>slider</h1>'
26 }
27 }
28 })
29 // 定义movie
30 .state('movie', {
31 url: '/movie',
32 views: {
33 // header: {
34 // template: '<h1>movie header</h1>'
35 // },
36 header: header,
37 content: {
38 template: '<h1>movie content</h1>'
39 },
40 // slider: {
41 // template: '<h1>movie slider</h1>'
42 // }
43 }
44 })
45 // 将 /food => /movie
46 $urlRouterProvider
47 .when('/food', '/movie')
48 // 定义默认留有 #/
49 .otherwise('/color')
50 })
|
子视图
在一个视图中可以嵌套另外一个视图，通过ui-view指令实现的
$stateChangeStart
事件回调函数有五个参数
第一个表示事件对象
第二个参数表示当前状态对象
第三个参数当前路由参数对象
第四个参数表示前一个状态对象
第五个参数表示前一个路由参数对象
|
1 app.config(function
($stateProvider) {
2 // console.log($stateProvider)
3 // 定根路由
4 $stateProvider
5 .state('home', {
6 url: '/home',
7 template: '<h1>hello <div ui-view></div></h1>'
8 })
9 // /home/color
10 .state('home.color', {
11 url: '/color/:c',
12 template: '<h2>child view</h2>'
13 })
14 // /home/mvoie
15 .state('home.movie', {
16 url: '/movie/:m',
17 template: '<h3>movie view</h3>'
18 })
19 })
|
|
