服務(wù)就是anggular內(nèi)置的功能,它的本質(zhì)就是一個(gè)對(duì)象或功能
$location服務(wù)
- $location是對(duì)原生Javascript中l(wèi)ocation對(duì)象屬性和方法的封裝嗓蘑。
- $location的作用:獲取url地址中的某一部分弓乙。
- url地址:https://www.baidu.com/index.html?tn=62095104_oem_dg
1.協(xié)議 https http
2.主機(jī)地址 www.baidu.com 110.36.141.36
3.端口號(hào):找到對(duì)應(yīng)的服務(wù)器憨闰。
4.文件地址
5.參數(shù)?tn=62095104_oem_dg 參數(shù)
6.# 錨點(diǎn)
如果服務(wù)器中有index.html文件會(huì)直接訪問這個(gè)文件拆宛。
- 注意:在angular盡量避免使用原生的js對(duì)象,有時(shí)候會(huì)造成數(shù)據(jù)綁定失敗键袱。
$timeout和$interval服務(wù)
$filter(過濾器服務(wù))
- 在界面(View)當(dāng)中燎窘,盡量避免處理業(yè)務(wù)邏輯
-
過濾器的使用會(huì)導(dǎo)致view(界面)過多的邏輯業(yè)務(wù),所以使用$filter可以盡量避免處理業(yè)務(wù)邏輯蹄咖。
$http(網(wǎng)絡(luò)請(qǐng)求服務(wù))
- 要發(fā)送請(qǐng)求褐健,使用原生js,必須得要借助ajax澜汤。
- 學(xué)習(xí)angular網(wǎng)絡(luò)請(qǐng)求目的:
- 更簡單的請(qǐng)求服務(wù)器數(shù)據(jù)蚜迅。服務(wù)器給完數(shù)據(jù)之后 ,更簡單的把數(shù)據(jù)展示到頁面當(dāng)中俊抵。
- get請(qǐng)求
<script src="angular.js"></script>
<script>
//1.創(chuàng)建模板
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
$http({
url:'myGet.php', //問誰要數(shù)據(jù)
method:'get', //以何種方式請(qǐng)求數(shù)據(jù)
params:{ //傳遞的參數(shù)
name:'xmg'
}
}).success(function (res) { //請(qǐng)求成功谁不,響應(yīng)到的數(shù)據(jù)res
console.log(res);
$scope.data = res; //注意:一定要把數(shù)據(jù)賦值給$scope
只要把請(qǐng)求的數(shù)據(jù)綁定到模型($scope)就可以展示到頁面當(dāng)中
}).error(function (error) { //請(qǐng)求失敗
console.log(error);
})
}]);
//3.綁定模塊
//4.綁定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
<p>{{data}}</p>
</body>
- post請(qǐng)求
<script src="angular.js"></script>
<script>
//1.創(chuàng)建模板
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
$http({
url:'myPost.php', //問誰要數(shù)據(jù)
method:'post', //以何種方式請(qǐng)求數(shù)據(jù)
headers:{ //post必須要設(shè)置請(qǐng)求頭 (以formData形式傳參)
'Content-Type':'application/x-www-form-urlencoded'
},
//formData 在內(nèi)部傳遞是以key : value形式
//傳遞的參數(shù)
data:'name=xmg'
}).success(function (res) { //請(qǐng)求成功,響應(yīng)到的數(shù)據(jù)res
console.log(res);
}).error(function (error) { //請(qǐng)求失敗
console.log(error);
})
}]);
//3.綁定模塊
//4.綁定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
</body>
注意:Post請(qǐng)求數(shù)據(jù) 必須得要設(shè)置請(qǐng)求頭