服务就是anggular内置的功能,它的本质就是一个对象或功能
$location服务
- $location是对原生Javascript中location对象属性和方法的封装。
- $location的作用:获取url地址中的某一部分。
- url地址:https://www.baidu.com/index.html?tn=62095104_oem_dg
1.协议 https http
2.主机地址 www.baidu.com 110.36.141.36
3.端口号:找到对应的服务器。
4.文件地址
5.参数?tn=62095104_oem_dg 参数
6.# 锚点
如果服务器中有index.html文件会直接访问这个文件。
- 注意:在angular尽量避免使用原生的js对象,有时候会造成数据绑定失败。
$timeout和$interval服务
$filter(过滤器服务)
- 在界面(View)当中,尽量避免处理业务逻辑
-
过滤器的使用会导致view(界面)过多的逻辑业务,所以使用$filter可以尽量避免处理业务逻辑。
$http(网络请求服务)
- 要发送请求,使用原生js,必须得要借助ajax。
- 学习angular网络请求目的:
- 更简单的请求服务器数据。服务器给完数据之后 ,更简单的把数据展示到页面当中。
- get请求
<script src="angular.js"></script>
<script>
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
$http({
url:'myGet.php', //问谁要数据
method:'get', //以何种方式请求数据
params:{ //传递的参数
name:'xmg'
}
}).success(function (res) { //请求成功,响应到的数据res
console.log(res);
$scope.data = res; //注意:一定要把数据赋值给$scope
只要把请求的数据绑定到模型($scope)就可以展示到页面当中
}).error(function (error) { //请求失败
console.log(error);
})
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
<p>{{data}}</p>
</body>
- post请求
<script src="angular.js"></script>
<script>
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
$http({
url:'myPost.php', //问谁要数据
method:'post', //以何种方式请求数据
headers:{ //post必须要设置请求头 (以formData形式传参)
'Content-Type':'application/x-www-form-urlencoded'
},
//formData 在内部传递是以key : value形式
//传递的参数
data:'name=xmg'
}).success(function (res) { //请求成功,响应到的数据res
console.log(res);
}).error(function (error) { //请求失败
console.log(error);
})
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
</body>
注意:Post请求数据 必须得要设置请求头