Cómo crear tu propio servicio en angularJS

AngularJS

En un post anterior sobre AngularJS hablé de los servicios básicos que nos proporciona este framework. En este artículo mostraré cómo podéis crear vuestro propio servicio en angularJS.

Un servicio en AngularJS mantiene los datos durante el tiempo de vida de una aplicación y también se comunican entre diferentes controladores de una manera consistente. Los servicios son implementados como singletons, este tipo de objetos son instanciados una vez por aplicación, es decir, interactuas con la misma instancia de un objeto cada vez que uses un servicio. Aunque suene como una pérdida de rendimiento, Angular es consciente y sólo lo creará cuando lo necesites y nunca antes.

Creando el servicio

Para crear el servicio será preciso crear un módulo. Una vez creado, usamos un factoy method en nuestro módulo que consta de 2 argumentos: el primero es el nombre el nombre del servicio y el segundo la función anónima (factoy function) que devuelve un objeto.

JavaScript
1
2
3
var module = angular.module('miApp', []);
 
module.factory('saludoService', function () {

La función devolverá un objeto (service object) y representa el servicio que usarás en tu aplicación.  Llamaremos el objeto saludoSvc

JavaScript
1
var saludoSvc = {};

Cuando la aplicación necesite por primera vez el servicio, entonces se llamará a la factory function devolviendonos este objeto.

El service object saludoSVC tendrá 2 funciones, una de ellas nos devolverá la fecha completa en castellano y la otra solamente la hora.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
saludoSvc.getFecha = function () {
   var meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
  
   //Obtenemos la fecha de hoy
   var fecha = new Date();
 
   //El mes a partir del objeto fecha
    var mes = fecha.getMonth();
 
   //Devolvemos un string que devoverá el día, el mes (en castellano) y el año
    return 'Hoy es ' + fecha.getDate() + ' de ' + meses[mes] + ' del ' + fecha.getFullYear();
}
 
//Esta funcion devolverá la hora
saludoSvc.getHora = function () {
   return new Date().toTimeString();
}

Y para rematar la factory function, devolveremos el objeto saludoSVC y cerramos.

JavaScript
1
2
   return  saludoSvc;
});

Cabe recordar que este objeto se devuelve siempre cuando necesitemos el servicio. Esto quiere decir, que una vez creado es común para toda la aplicación. Por tanto,
todos los cambios que hagas a este objeto permanecerán durante todo el tiempo de vida de la aplicación.

Llamando al servicio

Ahora tenemos nuestro servicio sólo nos falta llamarlo. Para ello será preciso crear un controlador donde se le pasará como argumento el nombre del servicio.

JavaScript
1
2
3
4
5
6
7
8
//Ahora en el conttolador podremos llamar a nuestro servicio.
module.controller("controladorTiempo", function ($scope, saludoService) {
    
   //Llamamos la funcioens del servicio y asignamos los valores que devuelve a la variable $scope para poder sacarlos en la vista
   $scope.fecha = saludoService.getFecha();
   $scope.hora = saludoService.getHora();
 
});

Como podemos ver, le asignamos  a la variable $scope 2 atributos, fecha y hora respectivamente. Cada una tendrá el valor de las funciones que hemos creado en el servicio.

Ahora sólo falta mostrar los atributos que tiene $scope, vamos al <body> e invocamos el modulo, el controlador con las directivas ng-app y ng-controller respectivamente. Y dentro del <body> podemos invocar los 2 atributos de $scope.

XHTML
1
2
3
4
<body ng-app="miApp" ng-controller="controladorTiempo">
    <p>{{fecha}}</p>
    <p>{{hora}}</p>
</body>

Resultado final

Si quieres ver el resultado final, puedes acceder a este codepen.

See the Pen Crear servicio en angularJS by guidacode (@guidacode) on CodePen.0


Espero que os haya gustado este tutorial sobre crear un servicio en angularJS, a seguir picando 😉