ui-route和ng-route
Wscats opened this issue · 3 comments
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'
}
}
})
<!DOCTYPE html>
<html ng-app="wsscat">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>wsscat的应用</header>
<div ui-view></div>
</body>
<style></style>
<script type="text/javascript" src="../js/angular.js" ></script>
<script type="text/javascript" src="angular-ui-router.js"></script>
<script>
/* 使用ui-router来进行路由定义,需要注入ui.router模块 */
var app = angular.module('wsscat', ['ui.router']);
/* 注入$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'
}).state('main.b', {
url: '/pageMain2/:id',
templateUrl: 'views/pageMain2.html',
controller: 'pageMain2Ctrl'
})
}]);
//路由地址为#/main
app.controller('mainCtrl', function($scope) {
$scope.name = 'wsscat';
})
//路由地址为#/main/pageMain1
app.controller('pageMain1Ctrl',function($scope){
$scope.name = 'abc'
})
app.controller('pageMain2Ctrl',function($scope,$state){
$scope.name = 'cbd'
console.log($state.params);
})
</script>
</html>
切换页面的时候,链接变色
首先我们用app.run方法在每次我们进入到对应路由前获取我们当前路由的地址
这里用到$location服务获取路由地址,注意我这里是用了ui-router,所以是$stateChangeSuccess,如果是ng-router那就是$routerChangeSuccess
app.run(function($rootScope, $location) {
$rootScope.$on('$stateChangeSuccess',
function(data) {
console.log($location.path())
$rootScope.path = "#"+$location.path()
})
})
然后在对应的DOM结构中写上这样来切换这个类
<a ng-href="#/main/pageMain1" class="{{'#/main/pageMain1'==path?'red':''}}">pageMain1</a>
ng路由
加载路由依赖,放在angular框架后面
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>
$location.path
$routeProvider
两个核心方法when()
和otherwise()
- controller //function或string类型。在当前模板上执行的controller函数,生成新的scope
- controllerAs //string类型,为controller指定别名
- template //string或function类型,视图所用的模板,这部分内容将被ngView引用
- templateUrl //string或function类型,当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用
- resolve //指定当前controller所依赖的其他模块
- redirectTo //重定向的地址