AngularJS 服務(Service)
AngularJS 中你可以創建自己的服務,或使用內建服務。
什麼是服務?
在AngularJS 中,服務是一個函數或對象,可在你的AngularJS 應用中使用。
AngularJS 內建了30 多個服務。
有個$location服務,它可以返回當前頁面的URL地址。
實例
app.controller( 'customersCtrl' , function ($scope, $location) {
$scope.myUrl = $location.absUrl();
});
嘗試一下»
注意$location服務是作為一個參數傳遞到controller中。 如果要使用它,需要在controller 中定義。
為什麼使用服務?
$http是AngularJS應用中最常用的服務。服務向服務器發送請求,應用響應服務器傳送過來的數據。
AngularJS會一直監控應用,處理事件變化, AngularJS使用$location服務比使用window.location對象更好。
$http 服務
$http是AngularJS應用中最常用的服務。服務向服務器發送請求,應用響應服務器傳送過來的數據。
實例
使用$http服務向服務器請求數據:
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函數。
實例
兩秒後顯示信息:
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函數。
實例
每兩秒顯示信息:
app.controller( 'myCtrl' , function ($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval( function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000 );
});
嘗試一下»
創建自定義服務
你可以創建訪問自定義服務,鏈接到你的模塊中:
創建名為hexafy的訪問:
this.myFunc = function (x) {
return x.toString( 16 );
}
});
要使用訪問自定義服務,需要在定義過濾器的時候獨立添加:
實例
使用自定義的的服務hexafy將一個數字轉換為16進制數:
$scope.hex = hexafy .myFunc( 255 );
});
嘗試一下»
過濾器中,使用自定義服務
當你創建了自定義服務,並連接到你的應用上後,你可以在控制器,指令,過濾器或其他服務中使用它。
在過濾器myFormat中使用服務hexafy :
return function (x) {
return hexafy .myFunc(x);
};
}]);
嘗試一下»
在對像數組中獲取值時你可以使用過濾器: