Latest web development tutorials

AngularJS 服務(Service)

AngularJS 中你可以創建自己的服務,或使用內建服務。


什麼是服務?

在AngularJS 中,服務是一個函數或對象,可在你的AngularJS 應用中使用。

AngularJS 內建了30 多個服務。

有個$location服務,它可以返回當前頁面的URL地址。

實例

var app = angular.module( 'myApp' , []);
app.controller( 'customersCtrl' , function ($scope, $location) {
$scope.myUrl = $location.absUrl();
});

嘗試一下»

注意$location服務是作為一個參數傳遞到controller中。 如果要使用它,需要在controller 中定義。


為什麼使用服務?

$http是AngularJS應用中最常用的服務。服務向服務器發送請求,應用響應服務器傳送過來的數據。

AngularJS會一直監控應用,處理事件變化, AngularJS使用$location服務比使用window.location對象更好。


$http 服務

$http是AngularJS應用中最常用的服務。服務向服務器發送請求,應用響應服務器傳送過來的數據。

實例

使用$http服務向服務器請求數據:

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

嘗試一下»

以上是一個非常簡單的$http服務實例,更多$http服務應用請查看AngularJS Http教程


$timeout 服務

AngularJS$timeout服務對應了JS window.setTimeout函數。

實例

兩秒後顯示信息:

var app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' , function ($scope, $timeout) {
$scope.myHeader = "Hello World!" ;
$timeout( function () {
$scope.myHeader = "How are you today?" ;
}, 2000 );
});

嘗試一下»

$interval 服務

AngularJS$interval服務對應了JS window.setInterval函數。

實例

每兩秒顯示信息:

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

嘗試一下»

創建自定義服務

你可以創建訪問自定義服務,鏈接到你的模塊中:

創建名為hexafy的訪問:

app.service( 'hexafy' , function () {
this.myFunc = function (x) {
return x.toString( 16 );
}
});

要使用訪問自定義服務,需要在定義過濾器的時候獨立添加:

實例

使用自定義的的服務hexafy將一個數字轉換為16進制數:

app.controller( 'myCtrl' , function ($scope, hexafy ) {
$scope.hex = hexafy .myFunc( 255 );
});

嘗試一下»

過濾器中,使用自定義服務

當你創建了自定義服務,並連接到你的應用上後,你可以在控制器,指令,過濾器或其他服務中使用它。

在過濾器myFormat中使用服務hexafy :

app.filter( 'myFormat' ,[ 'hexafy' , function ( hexafy ) {
return function (x) {
return hexafy .myFunc(x);
};
}]);

嘗試一下»

在對像數組中獲取值時你可以使用過濾器:

創建服務hexafy :

< ul >
< li ng-repeat= "x in counts" > {{x | myFormat}} < /li >
< /ul >

嘗試一下»