最新的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>
试一试»