Servicios de AngularJS

En AngularJS, puede crear sus propios servicios o usar uno de los muchos servicios integrados.

¿Qué es un servicio?

En AngularJS, los servicios son funciones o objetos que se pueden usar y están limitados solo a su aplicación AngularJS.

AngularJS tiene aproximadamente 30 servicios integrados. Uno de ellos es $location Servicio.

$location El servicio tiene métodos que pueden devolver información sobre la ubicación actual de la página web:

Ejemplo

Uso del servicio $location en el controlador:

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

Pruebe usted mismo

Tenga en cuenta que$location Los servicios se pasan como parámetros a los controladores. Para usar el servicio en el controlador, debe definirse como dependencia.

¿Por qué usar servicios?

Para muchos servicios, como $location Servicios, parece que puede usar objetos ya existentes en el DOM (por ejemplo Objeto window.location),pero tiene algunas limitaciones, al menos para su aplicación AngularJS.

AngularJS supervisa continuamente su aplicación, prefiriendo que utilice $location Servicio en lugar del objeto window.location.

Servicio $http

Este ejemplo demuestra El servicio es uno de los servicios más utilizados en aplicaciones AngularJS. El servicio envía solicitudes al servidor y permite que su aplicación maneje las respuestas.

Ejemplo

Solicitando datos del servidor utilizando el servicio $http:

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

Pruebe usted mismo

$scope.myWelcome = response.data; Este ejemplo demuestra $http

Uso muy simple del servicio $timeout. Para obtener más información sobre el servicio $http, consulte el tutorial de AngularJS Http.

$timeout El servicio es la versión de AngularJS de window.setTimeout función.

Ejemplo

Mostrar un nuevo mensaje después de dos segundos:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "¡Hola Mundo!";
  $timeout(function () {
    $scope.myHeader = "¿Cómo estás hoy?";
  }, 2000);
});

Pruebe usted mismo

Servicio $interval

$interval El servicio es la versión de AngularJS de window.setInterval función.

Ejemplo

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

Pruebe usted mismo

Crear su propio servicio

Para crear su propio servicio, conecte el servicio con el módulo:

Crear un nombre hexafy servicio:

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

Para usar su servicio personalizado, agreguelo como dependencia al definir el controlador:

Ejemplo

Utilice un servicio personalizado llamado hexafy para convertir números en números hexadecimales:

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

Pruebe usted mismo

Uso de servicios personalizados en filtros

Después de crear el servicio y conectarlo a su aplicación, puede usar este servicio en cualquier controlador, directiva, filtro o incluso otros servicios.

Para usar un servicio en un filtro, agréguelo como dependencia al definir el filtro:

El servicio hexafy utilizado en el filtro myFormat:

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

Pruebe usted mismo

Puede usar este filtro al mostrar valores en objetos o arrays:

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

Pruebe usted mismo