在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);
};
}]);
试一试» 从对象或数组显示值时,您可以使用过滤器: