AngularJS Servicios (Service)

En AngularJS puedes crear tus propios servicios o usar servicios integrados.

¿Qué es un servicio?

En AngularJS, un servicio es una función u objeto que se puede usar en tu aplicación AngularJS.

AngularJS incluye más de 30 servicios integrados.

Hay un$locationservicio que puede devolver la dirección URL de la página actual.

Ejemplo

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

Pruébalo »

Nota$locationEl servicio se pasa como parámetro al controller. Para usarlo, debes definirlo en el controller.

¿Por qué usar servicios?

Entre muchos servicios, como el servicio $location, se pueden usar objetos existentes en el DOM, similares al objeto window.location, pero el objeto window.location tiene ciertas limitaciones en las aplicaciones AngularJS.

AngularJS monitorea constantemente la aplicación, maneja los cambios de eventos, AngularJS usa$locationservicios en lugar de usarwindow.locationobjetos es mejor.

$location vs window.location

  window.location $location.service
Propósito Permite operaciones de lectura y escritura en la ubicación actual del navegador. Permite operaciones de lectura y escritura en la ubicación actual del navegador.
API Expone un objeto que se puede leer y escribir. Expone un lector/escritor de estilo jQuery.
Si se integra con la aplicación en el ciclo de vida de la aplicación AngularJS. no Puede acceder a cada etapa dentro del ciclo de vida de la aplicación e integrarse con $watch.
Si hay integración perfecta con la API de HTML5. no Sí (degradación elegante para navegadores antiguos)
Si es relevante para el contexto de la aplicación. No, window.location.path devuelve "/docroot/actual/path" Sí, $location.path() devuelve "/actual/path"

Servicio $http

$httpEs el servicio más utilizado en las aplicaciones AngularJS. El servicio envía solicitudes al servidor y la aplicación responde a los datos transmitidos por el servidor.

Ejemplo

Usar$httpel servicio para solicitar datos al servidor:

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

Pruébalo »

Lo anterior es un muy simple$httpejemplo de servicio. Para más$httpaplicaciones del servicio, consultael tutorial AngularJS Http.。

Servicio $timeout

AngularJS $timeoutEl servicio corresponde a JS window.setTimeoutfunción.

Ejemplo

Mostrar información después de dos 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);
});

Pruébalo »

Servicio $interval

AngularJS $intervalEl servicio corresponde a JSwindow.setIntervalfunción.

Ejemplo

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

Pruébalo »

Crear un servicio personalizado

Puedes crear servicios personalizados y vincularlos a tu módulo:

Crea unhexafyservicio llamado:

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

Para usar un servicio personalizado, debes agregarlo de forma independiente al definir el controlador y establecer la dependencia:

Ejemplo

Usar el servicio personalizadohexafyConvierte un número a hexadecimal:

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

Pruébalo »

Usar un servicio personalizado en un filtro

Una vez que hayas creado un servicio personalizado y lo hayas conectado a tu aplicación, puedes usarlo en controladores, directivas, filtros u otros servicios.

En el filtromyFormatusa el serviciohexafy:

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

Pruébalo »

Puedes usar un filtro al obtener valores en un array de objetos:

Crear serviciohexafy:

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

Pruébalo »
Otras extensiones