Open
Description
ui路由
引入JS文件
开始引入angular和ui-route的js文件
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="angular-ui-router.js"></script>
与原生angular不同的是，ui路由用ui-view而不是ng-view
<div ui-view></div>
在angular服务中注入ui.router
var app = angular.module('wsscat', ['ui.router']);
配置路由
用到**$stateProvider**和**$urlRouterProvider**两个服务
/* 注入$stateProvider，$urlRouterProvider */
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
/* 使用when来对一些不合法的路由进行重定向 */
$urlRouterProvider.when('', '/main');
/* 通过$stateProvider的state()函数来进行路由定义 */
$stateProvider.state('main', {
url: '/main',
templateUrl: 'views/main.html',
controller: 'mainCtrl'
}).state('main.a', {
url: '/pageMain1',
templateUrl: 'views/pageMain1.html',
controller: 'pageMain1Ctrl'
})
}]);
主路由，路由地址为_#/main_
app.controller('mainCtrl', function($scope) {
$scope.name = 'wsscat';
})
main路由下的子路由，路由地址为_#/main/pageMain1_
app.controller('pageMain1Ctrl',function($scope){
$scope.name = 'abc'
})
嵌套路由
此时我们就可以在main.html上放第二个ui-view这里比原生好的地方在于可以嵌套路由
main.html
main
{{name}}
<div ui-view></div>
pageMain1.html
456
{{name}}
路由传参
我们在生成一个新的子控制器
.state('main.b', {
url: '/pageMain2/:id',
templateUrl: 'views/pageMain2.html',
controller: 'pageMain2Ctrl'
})
留意我们在url定义的路由中多了个**:id**，这样我们就可以在控制器之间传递参数
url: '/pageMain2/:id'
在控制器中我们注入$state服务
app.controller('pageMain2Ctrl',function($scope,$state){
$scope.name = 'cbd'
console.log($state.params);
})
用$state.params就可以访问到路由上的参数
例如我们输入#/main/pageMain2/1，就会返回一个对象Object {id: "1"}
一个视图多个ui-view
当一个视图拥有多个ui-view,例如下面这样，平时我们一般一个视图只有一个ui-view的情况
<div ui-view name="first"></div>
<div ui-view name="second"></div>
当拥有多个这样的ui-view我们就要加上name属性，并绑定它到路由配置中的views属性，让子视图决定渲染到哪一个ui-view里面
.state('main.a', {
url: '/pageMain1',
views: {
"first": {
templateUrl: 'views/pageMain1.html',
controller: 'pageMain1Ctrl'
}
}
}).state('main.b', {
url: '/pageMain2/:id',
views: {
"first": {
templateUrl: 'views/pageMain2.html',
controller: 'pageMain2Ctrl'
}
}
}).state('main.c', {
url: '/pageMain3/:id',
views: {
"second": {
templateUrl: 'views/pageMain3.html',
controller: 'pageMain3Ctrl'
}
}
})
Metadata
Metadata
Assignees
Labels
No labels