Serviços AngularJS
No AngularJS, você pode criar seu próprio serviço ou usar um dos muitos serviços integrados.
O que é um Serviço?
No AngularJS, um serviço é uma função ou objeto que está disponível e limitado ao seu aplicativo AngularJS.
AngularJS tem cerca de 30 serviços integrados. Um deles é o $location
serviço.
O $locationserviço possui métodos que retornam informações sobre a localização da página atual:
Exemplo
Use o $locationserviço em um controlador:
var app = angular.module('myApp', []);
app.controller('customersCtrl',
function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
Observe que o $locationserviço é passado para o controlador como um argumento. Para usar o serviço no controlador, ele deve ser definido como uma dependência.
Por que usar os Serviços?
Para muitos serviços, como o $locationserviço, parece que você poderia usar objetos que já estão no DOM, como o window.location
objeto, e você poderia, mas teria algumas limitações, pelo menos para sua aplicação AngularJS.
O AngularJS supervisiona constantemente seu aplicativo e, para que ele lide com as alterações e eventos corretamente, o AngularJS prefere que você use o $location
serviço em vez do window.locationobjeto.
O serviço $http
O $httpserviço é um dos serviços mais comuns usados em aplicativos AngularJS. O serviço faz uma solicitação ao servidor e permite que seu aplicativo manipule a resposta.
Exemplo
Use o $httpserviço para solicitar dados do servidor:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $http) {
$http.get("welcome.htm").then(function
(response) {
$scope.myWelcome
= response.data;
});
});
Este exemplo demonstra um uso muito simples do $httpserviço. Saiba mais sobre o $httpserviço no Tutorial Http AngularJS .
O serviço $timeout
O $timeoutserviço é a versão da
window.setTimeoutfunção do AngularJS.
Exemplo
Exibir uma nova mensagem após dois segundos:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $timeout) {
$scope.myHeader = "Hello
World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
O serviço $intervalo
O $intervalserviço é a versão da
window.setIntervalfunção do AngularJS.
Exemplo
Exibir a hora a cada segundo:
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope, $interval) {
$scope.theTime = new
Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
},
1000);
});
Crie seu próprio serviço
Para criar seu próprio serviço, conecte seu serviço ao módulo:
Crie um serviço chamado hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
Para usar seu serviço customizado, adicione-o como dependência ao definir o controlador:
Exemplo
Use o serviço personalizado nomeado hexafypara converter um número em um número hexadecimal:
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex
= hexafy.myFunc(255);
});
Use um serviço personalizado dentro de um filtro
Depois de criar um serviço e conectá-lo ao seu aplicativo, você pode usar o serviço em qualquer controlador, diretiva, filtro ou até mesmo dentro de outros serviços.
Para usar o serviço dentro de um filtro, adicione-o como dependência ao definir o filtro:
O serviço hexafyusado no filtro myFormat:
app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return
hexafy.myFunc(x);
};
}]);
Você pode usar o filtro ao exibir valores de um objeto ou uma matriz:
<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>