Serviços AngularJS

No AngularJS, você pode criar seus próprios serviços ou usar um dos muitos serviços integrados.

O que são serviços?

No AngularJS, os serviços são funções ou objetos que podem ser usados e estão limitados apenas ao seu aplicativo AngularJS.

O AngularJS tem cerca de 30 serviços integrados. Um deles é $location serviço.

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

Exemplo

Uso do serviço $location no controlador:

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

Experimente Você Mesmo

Atenção:$location Os serviços são passados como parâmetros para o controlador. Para usar o serviço no controlador, é necessário defini-lo como dependência.

Por que usar serviços?

Para muitos serviços, como $location serviço, você parece poder usar objetos já existentes no DOM (por exemplo objeto window.location），mas há algumas limitações, pelo menos para seu aplicativo AngularJS.

O AngularJS supervisiona constantemente seu aplicativo, preferindo que você use $location serviço em vez do objeto window.location.

$http serviço

Este exemplo demonstra O serviço é um dos mais usados no aplicativo AngularJS. Ele envia solicitações para o servidor e permite que seu aplicativo processe as respostas.

Exemplo

Usando o serviço $http para solicitar dados do servidor:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
  });
});

Experimente Você Mesmo

$scope.myWelcome = response.data; Este exemplo demonstra $http

Uso muito simples do serviço $timeout. Para mais informações sobre o serviço $http, consulte o tutorial de Http AngularJS.

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

Exemplo

Mostrar uma nova mensagem após dois segundos:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Olá Mundo!";
  $timeout(function () {
    $scope.myHeader = "Como você está hoje?";
  }, 2000);
});

Experimente Você Mesmo

Serviço $interval

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

Exemplo

Mostrar 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);
});

Experimente Você Mesmo

Criar seu próprio serviço

Para criar seu próprio serviço, conecte-o ao módulo:

Criar um serviço chamado hexafy do serviço:

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

Para usar seu serviço personalizado, adicione-o como dependência ao definir o controlador:

Exemplo

Usar um serviço personalizado chamado hexafy para converter números em números hexadecimais:

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

Experimente Você Mesmo

Uso de Serviços Personalizados em Filtros

Após criar o serviço e conectá-lo ao seu aplicativo, você pode usá-lo em qualquer controlador, diretiva, filtro ou até mesmo em outros serviços.

Para usar o serviço no filtro, adicione-o como dependência ao definir o filtro:

Serviço hexafy usado no filtro myFormat:

app.filter('myFormat',['hexafy', function(hexafy) {
  return function(x) {
    return hexafy.myFunc(x);
  };
});

Experimente Você Mesmo

Você pode usar este filtro ao exibir valores em objetos ou arrays:

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

Experimente Você Mesmo