angular路由傳參
- 1.在定義路由時，設(shè)置參數(shù)
when('/home/:sk'
- 2.在路由跳轉(zhuǎn)時要傳入相應(yīng)的參數(shù)
<li><a href="#/home/10">首頁</a></li>
- 3.獲取參數(shù)：通過配置路由,綁定的控制器來獲取。
- 控制器注入服務(wù)
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來獲取參數(shù)
console.log($routeParams);//兩個obj, 綁定兩個控制器
}]);
//路由,監(jiān)聽錨點變化
//三.配置路由 ->讓路由幫你監(jiān)聽哪些錨點發(fā)生了變化
app.config(['$routeProvider', function ($routeProvider) {
//when() 當(dāng)錨點為指定值時,幫你處理相應(yīng)的邏輯
//路由規(guī)定, 在錨點之前,加上一個 '/'
$routeProvider.when('/home/:sk',{
//找到文件之后，會把文件當(dāng)中所有的內(nèi)容，放到ng-view占位的標(biāo)簽當(dāng)中
templateUrl:'home.html',
controller:'skController' //去關(guān)聯(lián)控制器中獲取數(shù)據(jù)
}).when('/my/:id',{
template:'<h1>關(guān)于我們內(nèi)容<h1>',
controller:'skController' //去關(guān)聯(lián)控制器中獲取數(shù)據(jù)
}).when('/contact/:id',{
template:'<h1>聯(lián)系我們內(nèi)容<h1>',
controller:'skController' //去關(guān)聯(lián)控制器中獲取數(shù)據(jù)
}).otherwise({
//都不是設(shè)置默認(rèn)值
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">關(guān)于我們</a></li>
<li><a href="#/contact/30">聯(lián)系我盟</a></li>
</ul>
</div>
<!-- 四.布局模版 -->
<div class="content">
<div ng-view></div>
</div>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
