angular路由传参练习
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script>
//创建模版
//二.实例化模块时, 注入ngRoute模块
var app = angular.module('app',['ngRoute']);
//创建控制器
app.controller('skController',['$scope', '$routeParams', '$http',function ($scope, $routeParams,$http) {
//alert($routeParams.id);
//根据路由参数,请求数据
$http({
url:'listMusic.php',
method:'get',
params:{
id:$routeParams.id
}
}).success(function (res) {
// console.log(res);
$scope.musicList = res;
}).error(function (error) {
console.log(error);
})
}]);
//三.配置路由
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/home/:id', {
templateUrl:'04-list.html',
controller:'skController'
});
}]);
</script>
<body ng-app="app">
<div class="header">
<ul>
<!--注意:锚点后也要加 /-->
<li><a href="#home/1">流行</a></li>
<li><a href="#home/2">复古</a></li>
<li><a href="#home/3">欧美</a></li>
</ul>
</div>
<!-- 四.布局模版 -->
<div class="content" ng-view>
<!--<div ng-view></div>-->
</div>
</body>
