AngularJS 中你可以建立自己的服務,或使用内建服務。
在 AngularJS 中,服務是一個函數或對象,可在你的 AngularJS 應用中使用。
AngularJS 内建了30 多個服務。
有個 <b>$location</b> 服務,它可以傳回目前頁面的 URL 位址。
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
注意 <b>$location</b> 服務是作為一個參數傳遞到 controller
中。如果要使用它,需要在 controller 中定義。
在很多服務中,比如 $location 服務,它可以使用 DOM 中存在的對象,類似 window.location 對象,但 window.location 對象在 AngularJS 應用中有一定的局限性。
AngularJS 會一直監控應用,處理事件變化, AngularJS 使用 <b>$location</b>
服務比使用 <b>window.location</b> 對象更好。
window.location
$location.service
目的
允許對目前浏覽器位置進行讀寫操作
API
暴露一個能被讀寫的對象
暴露jquery風格的讀寫器
是否在AngularJS應用生命周期中和應用整合
否
可擷取到應用生命周期内的每一個階段,并且和$watch整合
是否和HTML5 API的無縫整合
是(對低級浏覽器優雅降級)
和應用的上下文是否相關
否,window.location.path傳回"/docroot/actual/path"
是,$location.path()傳回"/actual/path"
<b>$http</b> 是 AngularJS 應用中最常用的服務。 服務向伺服器發送請求,應用響應伺服器傳送過來的資料。
使用 <b>$http</b> 服務向伺服器請求資料:
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
以上是一個非常簡單的 <b>$http</b> 服務執行個體,更多 <b>$http</b> 服務應用請檢視 AngularJS Http
教程。
AngularJS <b>$timeout</b> 服務對應了 JS <b></b>
window.setTimeout 函數。
兩秒後顯示資訊:
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
AngularJS <b>$interval</b> 服務對應了 JS <b>window.setInterval</b> 函數。
每一秒顯示資訊:
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
你可以建立自定義服務,連結到你的子產品中:
建立名為<b>hexafy</b> 的服務:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
要使用自定義服務,需要在定義控制器的時候獨立添加,設定依賴關系:
使用自定義的的服務 <b>hexafy</b> 将一個數字轉換為16進制數:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
當你建立了自定義服務,并連接配接到你的應用上後,你可以在控制器,指令,過濾器或其他服務中使用它。
在過濾器 <b>myFormat</b> 中使用服務 <b>hexafy</b>:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
在對象數組中擷取值時你可以使用過濾器:
建立服務 <b>hexafy</b>:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>