在AngularJS你可以使自己的服務,或者使用許多內置的服務之一。
什麼是服務?
在AngularJS,一個服務是一個函數,或對象,即可用於,並限於,您的AngularJS應用。
AngularJS有大約30內置服務。 其中之一是在$location
服務。
在$location
服務具有返回有關當前網頁的位置信息的方法:
例
使用$location
在控制器的服務:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
試一試» 注意, $location
服務被傳遞給控制器作為參數。 為了在控制器中使用的服務,它必須被定義為依賴。
為什麼使用服務?
對於很多服務,如$location
服務,好像你可以使用已經在DOM,喜歡的對象window.location
對象,你可以,但它有一定的局限性,至少你的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“版本的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“版本的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
將數字轉換成十六進制數:
app.controller('myCtrl', function($scope, hexafy ) {
$scope.hex
= hexafy .myFunc(255);
});
試一試» 使用自定義服務中一個過濾器
一旦你創建了一個服務,它連接到你的應用程序,你可以在任何控制器,指令,過濾器使用該服務,甚至內的其他服務。
要使用該服務的過濾器裡面,定義過濾器時將其添加為依賴關係:
該服務hexafy
在過濾器中使用myFormat
:
app.filter('myFormat',[ 'hexafy' , function( hexafy ) {
return function(x) {
return
hexafy .myFunc(x);
};
}]);
試一試» 從對象或數組顯示值時,您可以使用過濾器: