Qué son los servicios en AngularJS?

El término de servicios es muy utilizado en desarrollo, sobre todo en el ámbito web. En el caso de los servicios en AngularJS, pueden ser un conjunto de funciones relacionadas, controladas por el framework de Angular que están disponibles en la aplicación que estés desarrollando. Por ejemplo, puedes tener servicios que recuperen imágenes y metadatos del servidor o enviar y recibir datos de una base de datos. Dicho esto da a pensar que los servicios en Angularjs sirven para comunicarnos con el servidor.

Sin embargo, los servicios en Angular pueden hacer referencia a objetos del entorno como lo hace JavaScript. Por ejemplo el servicio $window nos permiten hacer referencia a la ventana del navegador. O al servicio $document como sucede en jQuery o JavaScript. Incluso podríamos crear animaciones con el servicio $animate.

El servicio $window

Como comenté anteriormente, el servicio $window hace referencia al objeto ventana del navegador. Poder acceder a dicho es objeto está disponible en javaScript empelando la referencia window pero, es recomendado evitarlo cuando se use el servicio Angular $window.

Para poder emplear un servicio, es preciso que estén en una función anónima de un controlador. En otro post he explicado cómo crearlo y en qué consiste.

<script src="angular.min.js"></script>

<script>

    var modulo = angular.module('ejemploServicios', []);
 
     modulo.controller("ejemploServicios", function ($scope, $window) {
         $scope.anchoVentana = $window.innerWidth;
     });
 
</script>

var modulo = angular.module('ejemploServicios', []);

modulo.controller("ejemploServicios", function ($scope, $window) {

$scope.anchoVentana = $window.innerWidth;

});

</script>

En la función anónima pasamos el objeto $scope que nos permitirá pasar las variables a la vista y el servicio $window. Al pasar este servicio, podemos emplear propiedades y funciones, en este caso obtener el ancho de la ventana.

En el body será preciso declarar el atributo ng-app y el ng-controller con los nombres del módulo y controlador correspondientes. Dentro habrá un texto donde indicará los píxeles del ancho de la ventana.

<body ng-app="ejemploServicios" ng-controller="ejemploServicios">
        <p>El ancho de la ventana es: {{anchoVentana}}px</p>
</body>

<p>El ancho de la ventana es: {{anchoVentana}}px</p>

</body>

El servicio $location

Se basa en el objeto window.location, este servicio parsea la URL del navegador y lo hace disponible en tu aplicación. Si cambiamos la URL en la barra de direcciones, se verá reflejado en el servicio $location y si cambiamos la URL en $location, también se cambiará en la barra de direcciones.

Y que diferencias hay con el objeto de JavaScript? Pues además de estar integrado en el framework de Angular, también soporta la API history de HTML5 (con soporte para viejos navegadores) que nos permitiría cambiar la URL de la página sin refrescar.

Básicamente este servicio se usa cuando en tu aplicación quieres una reacción al cambiar la URL actual, o cambiar la URL en el navegador.

En esta ocasión, la etiqueta script contendrá el siguiente código Angular

<script>
    var modulo = angular.module('ejemploServicios', []);
    modulo.controller("ejemploServicios", function ($scope, $location) {
        $scope.url = $location.absUrl();
        $scope.protocolo = $location.protocol();
        $scope.host = $location.host();
        $scope.port = $location.port(); 
    });
</script>

var modulo = angular.module('ejemploServicios', []);

modulo.controller("ejemploServicios", function ($scope, $location) {

$scope.url = $location.absUrl();

$scope.protocolo = $location.protocol();

$scope.host = $location.host();

$scope.port = $location.port();

});

</script>

Como sucede con el servicio anterior, pasamos el servicio $location como argumento en la función anónima de nuestro controlador. A continuación, el html para mostrar aquellas variables que hemos declarado con los diferentes partes de la URL.

<body ng-app="ejemploServicios" ng-controller="ejemploServicios">
    <p>The URL is: {{url}}</p>
    <ul>
        <li>{{protocolo}}</li>
        <li>{{host}}</li>
        <li>{{port}}</li>
    </ul>
</body>

<ul>

<li>{{protocolo}}</li>

</ul>

</body>

El servicio $document

Este servicio sería al equivalente al objeto window.document de jQuery. Hace referencia al archivo .HTML que se carga en la página.

<script>
    var modulo = angular.module('ejemploServicios', []);
 
    modulo.controller("ejemploServicios", function ($scope, $document) {
        $scope.docTitle = $document[0].title;
        $scope.doctype = $document[0].doctype.name;
        $scope.url = $document[0].URL;
     });
</script>

var modulo = angular.module('ejemploServicios', []);

modulo.controller("ejemploServicios", function ($scope, $document) {

$scope.docTitle = $document[0].title;

$scope.doctype = $document[0].doctype.name;

$scope.url = $document[0].URL;

});

</script>

En este caso declaramos variables que se mostrarán en la vista. Dichas variables contienen el título del documento que vendría ser la etiqueta <title>, el doctype y la URL.

<body ng-app="ejemploServicios" ng-controller="ejemploServicios">
    <p>El título de la página: {{docTitle}}</p>
    <p>Doctype: {{doctype}}</p>
    <p>La URL: {{url}}</p>
</body>

<p>El título de la página: {{docTitle}}</p>

<p>Doctype: {{doctype}}</p>

</body>

Y hasta aquí lo básico de servicios en AngularJS, en otra ocasión explicaré como crear nuestro propio servicio. A seguir picando 🙂