查看: 4034|回复: 0

[HTML代码] 爱创课堂 angular教程 课堂笔记 Ui路由参数 子视图

发表于 2018-1-27 09:27:47
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 })



回复

使用道具 举报