1、
l
o
c
a
t
i
o
n
当
我
们
在
某
一
个
模
板
中
需
要
通
过
事
件
跳
转
或
是
手
动
跳
转
,
需
要
用
到
此
参
数
通
过
location 当我们在某一个模板中需要通过事件跳转或是手动跳转,需要用到此参数 通过
location当我们在某一个模板中需要通过事件跳转或是手动跳转,需要用到此参数通过location.path(‘路径’)
2、传参
在路径后面通过追加/参数 进行传参
在when中,通过 “/路径/:变量名”
可以通过$routeParams进行参数的接收,格式为
$routeParams.变量名;此处的变量名与冒号后的变量名保持一致
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<meta charset="utf-8">
</head>
<body ng-app="app">
<div user-info></div>
<h1>欢迎来到腾讯企业邮箱</h1>
<div>
<a href="#!receive">收件箱</a>
<a href="#!send/abc">发件箱</a>
</div>
<div ng-view></div>
<script>
var app = angular.module('app',['ngRoute']);
app.directive('userInfo',function(){
return{
restrict:'EA',
template:'<div>{{name+":"+age}}</div>',
controller:function($scope){
$scope.name = "张三";
$scope.age = 20;
}
}
});
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/home',{
template:''
})
.when('/receive',{
template:'<ul><li ng-repeat="email in emailList">{{email.title}}<br>{{email.date}}<br><input type="button" value="回复" ng-click="sendMsg(email.title)"/></li></ul>',
controller:function($scope,$location){
$scope.emailList = [
{
title:"来自张三的邮件",
date:"2017-6-20"
},{
title:"来自李四的邮件",
date:"2017-6-20"
},{
title:"来自王五的邮件",
date:"2017-6-20"
}
];
$scope.sendMsg = function(title){
$location.path('/write/'+title);
}
}
})
.when('/send/:str',{
template:'<ul><li ng-repeat="email in emailList">标题:{{email.title}}<br>收件人:{{email.name}}<br>时间:{{email.date}}</li></ul>',
controller:function($scope,$routeParams){
console.log($routeParams.str);
$scope.emailList = [
{
title:"来自xx的邮件",
date:"2017-6-20",
name:"张三"
},{
title:"来自xx的邮件",
date:"2017-6-20",
name:"张三"
},{
title:"来自xx的邮件",
date:"2017-6-20",
name:"张三"
}
];
}
})
.when("/write/:emailTitle",{
template:'<input type="text" ng-model="name"/>',
controller:function($scope,$routeParams){
$scope.name = $routeParams.emailTitle;
}
})
//当所有的when都没执行时,会执行该方法
.otherwise({
redirectTo:'/home' //将路径指向某个地址
})
}])
</script>
</body>
</html>