一、基本用法
$stateProvider.state(stateName, stateConfig)
stateName是string类型
stateConfig是object类型
statConfig可以为空对象,如$stateProvider.state(“home”,{});
state可以有子父级
$stateProvider.state(“home”,{});
$stateProvider.state(“home.child”,{})
//state可以是链式的
$stateProvider.state(“home”,{}).state(“about”,{}).state(“photos”,{});
stateConfig包含的字段:template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data
$urlRouteProvider.when(whenPath, toPath)
$urlRouterProvider.otherwise(path)
$urlRouteProvider.rule(handler)
$state.go
$state.go(to, [,toParams],[,options])
形参to是string类型,必须,使用”^”或”.”表示相对路径;
形参toParams可空,类型是对象;
形参options可空,类型是对象,字段包括:location为bool类型默认true,inherit为bool类型默认true, relative为对象默认$state.$current,notify为bool类型默认为true, reload为bool类型默认为false
$state.go(‘photos.detail’)
$state.go(‘^’)到上一级,比如从photo.detail到photo
$state.go(‘^.list’)到相邻state,比如从photo.detail到photo.list
$state.go(‘^.detail.comment’)到孙子级state,比如从photo.detail到photo.detial.comment
ui-sref
ui-sref=’stateName’
ui-sref=’stateName({param:value, param:value})’
二、完整实例
目录结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
uitest +--index.html +--app.js +--lib +--angular.js +--angular-ui-router.js +--angular-state-helper.js +--tpls +--content.html +--about.html +--header.html +--home.html ... |
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <head> <title></title> <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"> <script src="./lib/angular.js"></script> <script src="./lib/angular-ui-router.js"></script> <script src="./lib/angular-state-helper.js"></script> <script src="./app.js"></script> </head> <body data-ng-app="myApp"> <div ui-view></div> </body> <html> |
content.html
1 2 |
<div ui-view="header"></div> <div ui-view="body"></div> |
header.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" ui-sref=".home" class="navbar-brand">Home</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a ui-sref=".photos">Photos</a> </li> <li> <a ui-sref=".photos.list">PhotoList</a> </li> <li> <a ui-sref=".about">About</a> </li> </ul> <ul class="nav navbar-nav"> <li> <a ui-sref=".product">Product</a> </li> <li> <a ui-sref=".product.list">ProductList</a> </li> <li> <a ui-sref=".product.detail">ProductDetail</a> </li> </ul> <ul class="nav navbar-nav"> <li> <a ui-sref=".params({id:1,type:'search',repeat:9})">ui-sref传递params</a> </li> </ul> </div> </div> </nav> |
home.html
1 |
<h2>我是content/home</h2> |
params.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h1>各种传参</h1> 访问导航传过来的参数为 <pre> {{params}} </pre> <ul> <li><aui-sref=".test/">params1</a></li> <li><aui-sref=".test/">params2</a></li> <li><aui-sref=".test/">params3</a></li> <li><aui-sref=".test/">params4</a></li> <li><aui-sref=".test/">params5</a></li> <li><aui-sref=".test/">params6</a></li> <li><aui-sref=".test/">params7</a></li> <li><aui-sref=".test/">params8</a></li> <li><aui-sref=".test/">params9</a></li> </ul> |
about.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<h1>各种传参</h1> <p>接收到的参数为<br/>params1:{{params1}},params2:{{params2}}</p> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a ui-sref="^.photos">Photos</a> </li> <li> <a ui-sref="^.photos.list">PhotoList</a> </li> </ul> </div> |
其他页面省略…,功能可根据需要自己写,我只是记笔记。
app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
var myApp = angular.module("myApp", ["ui.router", 'ui.router.stateHelper']); /** * 使用$urlRouterProvider时,url的写法是很随意的 * * 我们现在的定义是content的url为'/' * 而content.home的url为'home' * 当访问content.home是,浏览器的路径便是'/home' * * * 如果我们一开始定义content的url为'/content'或(/index) * 而content.home的url为'/home'或(home) * 当访问content.home是,浏览器的路径便是'/content/home'或(/indexhome) * 如果我们一开始定义content的url为'/content' * 而content.home的url为'home' * 当访问content.home是,浏览器的路径便是'/contenthome'\ * * 意思就是,url是随意的,当每一个state都没有定义url时,访问任何state都是http://127.0.0.1:8080/#! * 当访问嵌套state时,后面部分的url实际上就是从父级到子集定义的url的字符串拼接 * * 但如果我们都不定义url时,别人通过网址的方式访问,程序不知道到底该进入哪个state * 但如果像这样 * stateHelperProvider.state({ name: 'product', parent:'content', url:'product', views:{ "body@content":{templateUrl: 'tpls/product.html'} }, children: [ { name: 'detail', url:'/detail', templateUrl: 'tpls/product-detail.html' }, { name: 'list', url:'/list', templateUrl: 'tpls/product-list.html' } ] }); * 当我们访问/product时,会进入state为product的模块,因为它是父模块 * * 但如果我们像这样定义, * stateHelperProvider.state({ name: 'product', parent:'content', url:'/product', views:{ "body@content":{templateUrl: 'tpls/product.html'} }, children: [ { name: 'detail', url:'/detail', templateUrl: 'tpls/product-detail.html' }, { name: 'list', url:'/detail', templateUrl: 'tpls/product-list.html' } ] }); 当访问/product/detail时,就会出错,因为两个兄弟模块用了同一个url,路由不知道进入哪一个 */ myApp.config(function($stateProvider, $urlRouterProvider,stateHelperProvider){ $urlRouterProvider.otherwise('/home'); $stateProvider.state('content',{ url: '/', //abstract:true, //如果一个state,没有通过链接找到它,那就可以把这个state设置为abstract:true //当一个state设置为抽象,如果通过ui-sref或路由导航到该state会出现什么结果呢? //会导航到默认路由上 views:{ "":{templateUrl: 'tpls/content.html'}, "header@content":{templateUrl: 'tpls/header.html'} } }) .state('content.home',{ url: 'home', views:{ "body@content":{templateUrl: 'tpls/home.html'} } }) .state('content.photos',{ url: 'photos', views:{ "body@content":{templateUrl: 'tpls/photos.html'} } }) .state('content.photos.list',{ url: '/list', templateUrl: 'tpls/photos-list.html' }) .state('content.photos.detail',{ url: '/detail', templateUrl: 'tpls/photos-detail.html', controller: function($scope){ $scope.title = '我是详情页'; } }) .state('content.photos.detail.comment',{ url: '/comment', templateUrl: 'tpls/photos-detail-comment.html', controller: function(){ this.title = '我是详情评论页'; }, controllerAs: 'contact'//为controller取别名 }) //使用stateHelperProvider时,可以不用写url,功能正常,但是地址栏没变化 stateHelperProvider.state({ name: 'product', parent:'content', url:'product', views:{ "body@content":{templateUrl: 'tpls/product.html'} }, children: [ { name: 'detail', url:'/detail', templateUrl: 'tpls/product-detail.html', children: [ { name: 'dcomment', templateUrl: 'tpls/product-detail-comment.html' } ] }, { name: 'list', url:'/list', templateUrl: 'tpls/product-list.html', children: [ { name: 'lcomment', templateUrl: 'tpls/product-list-comment.html' } ] } ] }); //可以先定义好路由对象再传入state var contacts = { name: 'content.about', url:'about', views:{ "body@content":{ templateUrl: 'tpls/about.html', controller: function Ctrl($scope,$state){ //页面接收传递过来的参数 console.log($state.current.data.customData1); // outputs 5; console.log($state.current.data.customData2); // outputs "blue"; $scope.params1 = $state.current.data.customData1; $scope.params2 = $state.current.data.customData2; } } }, //访问路由时顺带传递参数 data: { customData1: 5, customData2: "blue" } } $stateProvider.state(contacts); //可以先定义好路由对象再传入state var paramstate = { name: 'content.params', url:'params/:id/{type}/{repeat:[0-9]+}?from&to', views:{ "body@content":{ templateUrl: 'tpls/params.html', controller: function($scope,$stateParams){ console.log($stateParams); $scope.params = $stateParams; } } } } $stateProvider.state(paramstate); }) // myApp.controller('myCtrl',['$rootScope','$scope',function($rootScope,$scope){ // //所有的路由改变事件都需要用$rootScope进行监听 // //$stateChangeStart // //$stateNotFound // //$stateChangeSuccess - fired once the state transition is complete. // //$stateChangeError // //$viewContentLoading - fired once the view begins loading, // //before the DOM is rendered. The '$rootScope' broadcasts the event // //$viewContentLoaded - fired once the view is loaded, after the DOM is rendered. // //The '$scope' of the view emits the event. // $rootScope.$on('$stateChangeStart', // function(event, toState, toParams, fromState, fromParams, options){ // console.log(event, toState, toParams, fromState, fromParams, options); // }) // }]) |
发表评论