最新的Web開發教程
 

AngularJS服務


在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);
    };
}]);
試一試»

從對象或數組顯示值時,您可以使用過濾器:

創建服務名為hexafy

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