AngularJS系列(四)——服务

服务是一个函数或对象，可在AngularJS应用中使用。可以和后台中的service去理解。

$location

$location，和js中的location作用相似，下面是返回当前页面URL的实例

<div ng-app="myApp"ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$location) {
$scope.myUrl= $location.absUrl();
})
</script>

$http服务

$http服务是AngularJS应用中最常用的服务。服务向服务器返送请求，应用响应服务器传送过来的数据。get访问请求实例

<div ng-app="myApp"ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$http.get('welcome.htm').then(function(response) {
$scope.myWelcome= response.data
})
})
</script>

$timeout 服务

AngularJS $timeout 服务对应了 JSwindow.setTimeout 函数。

<div ng-app="myApp"ng-controller="myCtrl">
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$timeout) {
$scope.myHeader= "Hello World";
$timeout(function(){
$scope.myHeader= "Hello JS";
},3000)
})
</script>

$interval 服务

AngularJS $interval 服务对应了 JSwindow.setInterval 函数。

<div ng-app="myApp"ng-controller="myCtrl">
<p>现在时间是:</p>
<h1>{{theTime}}</h1>
</div>
<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope,$interval) {
$scope.theTime= new Date().toLocaleString();
$interval(function() {
$scope.theTime= new Date().toLocaleString();
},1000);
})
</script>

自定义服务

创建访问自定义服务，链接到你的模块中

在controller中创建并使用服务

<div ng-app="myApp"ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('fd', function () {
this.toCase= function (x) {
returnx.toString(16);
}
});
app.controller('myCtrl', function ($scope,fd){
$scope.hex= fd.toCase(255)
})
</script>
在filter中使用服务

<div ng-app="myApp">
在过滤器中使用服务:

<h1>{{255 | myFormat}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc= function (x) {
return x.toString(16);
}
});
app.filter('myFormat', ['hexafy',function(hexafy){
returnfunction (text) {
returnhexafy.myFunc(text);
}
}])
</script>