AngularJS - Servicio tipo service - Crear un servicio service - ¿Como llamar a un servicio service? - ¿Service por que hablamos de instancia?

Siguiendo con esta nueva meta de ver AngularJS a fondo, hace muy poco vimos los diferentes tipos de servicios, los nombramos muy por arriba y no vimos nada de código :(, en el día de hoy vamos a ver a fondo el Servicio service.

AngularJS - Servicio tipo service

Como vimos anteriormente AngularJS provee funciones para generar diferentes tipos de servicios, en nuestro caso el service. 

Para acceder a esta función y generar un servicio vamos acceder por angular.module() y luego el método service().

El método service recibe 2 parámetros:

• Nombre del servicio: El nombre que le asignaremos a gusto a nuestro servicio
• El constructor función: Se le pasa el objecto JavaScript que utilizara. (o función a desarrollar)

Siempre recordemos:

1. Un servicio es registrado usando la función service() de angular.module().
2. El segundo argumento de la función service() es un constructor de función.Cuando agregamos al servicios dependencias, AngularJS crea un objecto desde el constructor de función y lo inyecta.
3. Un servicio es singleton, AngularJS instancia el objecto servicio solo una ves y todos los componentes comparten la misma instancia.
4. Los servicios son inicializados "Lazy" (perezosamente). Esto significa que AngularJS instancia el servicio solo cuando encuentra un componente que declara la dependencia del servicio.

AngularJS - Crear un servicio service

En nuestro caso vamos agregar el servicio saludador, que contendrá la función salute!

angular.module('miApp').service('saludador',function(){
    this.salute=function(){ 
        alert('Hola!! Desde el lado oscuro de java');
    }
  });

Como se ve claramente arriba utilizamos angular.module('nombremodulo').service('nombreServicio', function(){ funciones creadas })

No hay que ser un genio para darnos cuenta que dentro del "saludador", creamos la función 'salute'.

AngularJS -  ¿Como llamar a un servicio service?

Obviamente ya creamos nuestro hermoso servicio ahora viene la gran pregunta como se usa/llama?

Vamos a poner un ejemplo y luego nos dedicaremos a explicarlo.

angular.module("miApp", []).controller("myCtrl", function(saludador) {
      saludador.salute();
});

Lo que sucede en la lineas de arriba es lo siguiente en el controlador "myCtrl" le inyectamos un servicio (no te hagas problema si no entiendes inyecciones los veremos en próximas entregas), el servicio que inyectamos es el "saludador", que creamos arriba, el mismo que le declaramos el método "salute()", luego dentro del controlador le decimos "ahora utiliza el método salute del saludador, esto se hace mediante el llamado al servicio "." método, en nuestro caso saludador.salute().

Luego donde se inyecte el controlador ejecutara su contenido, por ende ejecutara servicio "saludador.salute()".

Tenemos que saber que dentro de AngularJS lo primero que hace es resolver la dependencia, es decir verifica que el servicio saludador realmente exista, luego crea una instancia del servicio. El resultado es un objeto servicio instanciado e inyectado en nuestro controlador. Esto se realiza solamente una vez. Después siempre se utiliza la instancia creada por primera vez en toda la aplicación de nuestro servicio.

Recordemos siempre que es posible inyectar servicios dentro de los servicios un ejemplo rápido es agregar el servicio "$log" dentro de nuestra aplicación.

 angular.module('miApp').service('saludador',function($log){
    this.salute=function(){
      alert('Hola!!!!! Desde el lado oscuro de java');
      $log.error("Si no comentas, es un error");
    }
  });

AngularJS - ¿Service por que hablamos de instancia?

Hablamos de instancia por que dijimos que puede recibir el servicio como segundo parámetro un objecto JavaScript. Nuestros ejemplos por el momento eran con funciones declaras dentro del servicio, ahora pasaremos un objecto JavaScript.

    function Saludador(){
       this.salute= function(){
          alert('Hola!!!!! Desde el lado oscuro de java');
       }
    }

En la lineas de arriba creamos un objecto JavaScript llamado Saludador, que pose el método salute.

Ahora tenemos que agregar este objeto JavaScript al service, lo cual es muy sencillo:

angular.module('miApp').service('saludador', Saludador);

Siempre es lo mismo con los servicios, nombre que le asignaremos, objeto JavaScript o función o desarrollar.

Finalmente dentro del controlador.

angular.module("miApp", []).controller("myCtrl", function(saludador) {
     text1= "Hola ";
        saludador.salute();
});

Como podemos notar dentro del controlador no cambio nada. Bueno espero que haya quedado claro!