AngularJS1.6 网络请求
1.6 网路请求注意点
- 注意1:从1.6 以后, 网络请求不用success error,使用then, catch 代替
- 注意2: 1.6 之后接收参数使用data属性
- 注意3:从1.6 之后所有锚点都添加后缀
<!--注意:锚点后也要加 /-->
<li><a href="#!/home/1">流行</a></li>
<li><a href="#!/home/2">复古</a></li>
<li><a href="#!/home/3">欧美</a></li>
<script src="angular1.6.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
}
}).then(function (res) { //注意1:从1.6 以后, 网络请求不用success error,使用then, catch 代替
//
//注意2: 1.6 之后接收参数使用data属性
$scope.musicList = res.data;
}).catch(function (error) {
console.catch(error);
})
}]);
//三.配置路由
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/home/:id', {
templateUrl:'04-list.html',
controller:'skController'
}).otherwise({
redirectTo:'/home/1'
});
}]);
</script>
<body ng-app="app">
<div class="header">
<ul>
<!--注意三:从1.6 之后所有锚点都添加后缀-->
<!--注意:锚点后也要加 /-->
<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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
