angular路由传参
- 1.在定义路由时，设置参数
when('/home/:sk'
- 2.在路由跳转时要传入相应的参数
<li><a href="#/home/10">首页</a></li>
- 3.获取参数：通过配置路由,绑定的控制器来获取。
- 控制器注入服务
routeParams.page
<script src="angular.js"></script>
<!--
一.引入angular-route.js
注意:必须要在引入angular.js 之后,引入路由
-->
<script src="angular-route.js"></script>
<script>
//二.实例化模块时, 注入ngRoute模块
var app = angular.module('app', ['ngRoute']);
app.controller('skController', ['$scope','$routeParams',function ($scope, $routeParams) {
//$scope.name = '控制器首页'
//通过注入$routeParams来获取参数
console.log($routeParams);//两个obj, 绑定两个控制器
}]);
//路由,监听锚点变化
//三.配置路由 ->让路由帮你监听哪些锚点发生了变化
app.config(['$routeProvider', function ($routeProvider) {
//when() 当锚点为指定值时,帮你处理相应的逻辑
//路由规定, 在锚点之前,加上一个 '/'
$routeProvider.when('/home/:sk',{
//找到文件之后，会把文件当中所有的内容，放到ng-view占位的标签当中
templateUrl:'home.html',
controller:'skController' //去关联控制器中获取数据
}).when('/my/:id',{
template:'<h1>关于我们内容<h1>',
controller:'skController' //去关联控制器中获取数据
}).when('/contact/:id',{
template:'<h1>联系我们内容<h1>',
controller:'skController' //去关联控制器中获取数据
}).otherwise({
//都不是设置默认值
redirectTo:'/home/1'
})
}]);
</script>
<!--<body ng-app="app" ng-controller="skController">-->
<body ng-app="app">
<div class="header">
<ul>
<!--注意:锚点后也要加 /-->
<li><a href="#/home/10">首页</a></li>
<li><a href="#/my/20">关于我们</a></li>
<li><a href="#/contact/30">联系我盟</a></li>
</ul>
</div>
<!-- 四.布局模版 -->
<div class="content">
<div ng-view></div>
</div>
</body>
