Articles

AngularJS Serviços

On Outubro 5, 2021 by

Em AngularJS você pode fazer o seu próprio serviço, ou usar um dos muitos serviços embutidos.

O que é um Serviço?

Em AngularJS, um serviço é uma função, ou objeto, que está disponível para, e limitado à, sua aplicação AngularJS.

AngularJS tem cerca de 30 serviços embutidos. Um deles é o serviço $location service.

O serviço $location tem métodos que retornam informações sobre a localização da página web atual:

Exemplo

Utilizar o serviço $location num controlador:

var app = angular.module(‘myApp’, );
app.controller(‘customersCtrl’, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});

Try it Yourself ”

Note que o serviço $location é passado para o controlador como um argumento. Para usar o serviço no controlador, ele deve ser definido como uma dependência.

Porquê usar os serviços?

Para muitos serviços, como o serviço $location, parece que você poderia usar objetos que já estão no DOM, como o objeto window.location, e você poderia, mas teria algumas limitações, pelo menos para sua aplicação AngularJS.

>

AngularJS supervisiona constantemente a sua aplicação, e para que ela trate as mudanças e eventos corretamente, AngularJS prefere que você use o serviço $location ao invés do objeto window.location.

O serviço $http

O serviço $http é um dos serviços mais comuns usados em aplicações AngularJS. O serviço faz uma requisição ao servidor, e deixa sua aplicação lidar com a resposta.

Exemplo

Utiliza o serviço $http para requisitar 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;
});
});

Try it Yourself ”

Este exemplo demonstra um uso muito simples do serviço $http. Aprenda mais sobre o serviço $http no AngularJS Http Tutorial.

O serviço $timeout

O serviço $timeout é a versão do AngularJS da função window.setTimeout

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 = “Como você está hoje?”;
}, 2000);
});

Experimente você mesmo ”

O serviço $intervalo

O serviço $interval é a versão do AngularJS da função window.setInterval.

Exemplo

Exibe o tempo a cada segundo:

>

var app = angular.module(‘myApp’, );
app.controller(‘myCtrl’, function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = novo Date().toLocaleTimeString();
}, 1000);
});

Experimente você mesmo ”

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 personalizado, adicione-o como uma dependência ao definir o controlador:

Exemplo

Utilize o serviço personalizado chamado hexafy para converter um número em um número hexadecimal:

app.controller(‘myCtrl’, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

Experimente você mesmo ”

Utilizar um serviço personalizado dentro de um filtro

Após ter criado um serviço, e conectá-lo à sua aplicação, você pode usar o serviço em qualquer controlador, diretriz, filtro, ou mesmo dentro de outros serviços.

Para usar o serviço dentro de um filtro, adicione-o como uma dependência ao definir o filtro:

O serviço hexafy usado no filtro myFormat:

app.filter(‘myFormat’,);

Experimente você mesmo ”

Você pode usar o filtro ao exibir valores de um objeto, ou de um array:

Criar um serviço chamado hexafy:

<ul>
<li ng-repeat=”x in counts”>{{x | myFormat}}</li>
</ul>

Experimente você mesmo ”

Deixe uma resposta

O seu endereço de email não será publicado.