Hasta el momento hemos estado manejando la información sobre un arreglo de elementos en JavaScript, esto nos ha servidor para iterar, filtrar y desplegar la información en nuestras vistas, pero en la vida real estos casos no se dan muy a menudo, generalmente siempre tenemos un servidor con el cual nos comunicamos para enviar y recibir información.

En este tema veremos como conectarnos vía Ajax a un API en JSON para regresar el listado de categorías que hemos usado para filtrar los bookmarks.

Los servicios en Angular JS deben usarse para almacenar la lógica de persistencia, es decir, aquí es donde deberíamos realizar nuestras peticiones Ajax, hacer las peticiones REST, posiblemente hacer peticiones con JSONP, Websockets o cualquier otro método de comunicación para enviar y recibir información.

Algo muy importante a considerar es que los Servicios son objetos singleton, eso significa que solamente son creados una sola vez en toda nuestra aplicación, por el contrario los controladores son creados y eliminados cada que lo necesitemos, cuando nuestra aplicación comienza a crecer es muy recomendable tener varios controladores.

Ya que los controladores se destruyen cuando no so necesarios, muchas veces es buena idea utilizar los servicios para almacenar cierta información que requerimos utilizar en diferentes lugares de nuestra app. Los servicios también los podemos usar para compartir información entre los controladores, ya que podemos inyectar cualquier servicio en cualquier controlador de una manera muy sencilla.

Existen tres manera en Angular JS de crear servicios:

1. Services (Servicios)
2. Factories (Factorías)
3. Providers (Proveedores)

En este tema nos enfocaremos en el primero de la lista. Para crear un servicio lo hacemos de la siguiente manera, el siguiente código lo agregamos en el archivo app.js.

.service('Category',function(){

})

Con eso estamos creando un servicio llamado Category, la función que se le esta pasando en el segundo parámetro será el constructor de la clase, ahí podemos agregarle métodos, propiedad y definir todo lo que necesitemos.

Para este ejemplo vamos a hacer una petición Ajax al API que nos regresará el listado de categorías disponibles de nuestra aplicación. Vamos a utilizar un servicio llamado $http, este servicio es parte del core de Angular.

.service('Category',function($http){ //Step 1

    this.getAll = function(success,failure){ //Step 2
        
    }
})

1.  En el paso uno inyectamos el servicio $http, Angular automáticamente reconocerá el servicio adecuado y lo insertará a nuestra clase.
2. En el segundo paso creamos la función getAll, esta función solicitará mediante una petición GET el listado de categorías disponibles. Como parámetros recibirá dos callbacks, el caso de éxito y el caso de error.

La inyección que Angular hace del servicio $http, se le denomina Dependency Injection, este es un concepto importante y es una de las características más populares de la librería. Para que funcione debemos nombrar al parámetro exactamente igual que el servicio a inyectar.

Una buena práctica al nombrar nuestros servicios es evitar poner el signo $ al inicio del nombre del servicio, ya que los servicios de Angular inician con este nombre y podríamos crear colisiones.

Ahora vamos a realizar la petición Ajax de la siguiente manera.

.service('Category',function($http){

    this.getAll = function(success,failure){
        $http.get('http://bookmarks-angular.herokuapp.com/api/categories') //Step 1
            .success(success) //Step 2
            .error(failure);  
    }
})

1. En el paso uno utilizamos el método get, este método realizará una petición de tipo GET a la URL que se le pasa como parámetro.
2. El método get regresa una promesa con dos métodos que usaremos, el success y el error, a los cuales les asignamos los callbacks que recibimos como parámetros. Estos métodos se ejecutarás solo si la petición se realizó exitosamente o no.

La URL del API que estamos accediendo, esta sobre heroku, así que si tarda un rato en responder la primera vez significa que nadie ha usado el API en un tiempo y heroku manda a dormir los servidores para ahorrar recursos. He configurado el servidor para recibir peticiones CORS, es por eso que la llamada Ajax nos funcionará sin problema.

Ya que tenemos nuestro servicio listo, vamos a usarlo en el controlador que ya tenemos.

.controller('MainController',function($scope,Category){ //Step 1
    $scope.name = 'Carl'

    Category.getAll(function(data){          //Step 2
        $scope.categories = data.categories; //Step 3
    });

    //...

});

1. En el paso uno inyectamos nuestro servicio al controlador, para esto simplemente lo definimos como parámetro y angular lo insertará por nosotros. 
2. En el paso dos invocamos el método getAll y le pasamos el callback de éxito, podríamos también pasarle el callback de error, pero por el momento así lo dejaremos.
3. En el paso tres asignamos las categorías que recibimos en la respuesta de la petición Ajax a la propiedad en el scope que ya teníamos definida.

Lo último que debemos cambiar es el template, ya que ahora estamos recibiendo objetos y no solamente strings en el arreglo de categorías.

<!-- sidebar -->
<div class="column col-sm-3" id="sidebar">
    <p class="nav-title">
      Categories 
      <a href="#" class="pull-right"><i class="glyphicon glyphicon-folder-open"></i></a>
    </p>
    <ul class="nav">
        <li ng-repeat="category in categories" ng-class="{active: isCurrentCategory(category.name)}">
            <a href="#" ng-click="setCurrentCategory(category.name)"> <i class="glyphicon glyphicon-tags"></i> {{category.name}}</a>
        </li>
    </ul>
</div>
<!-- /sidebar -->

El template ahora usará la propiedad name de cada objeto, con esto nos aseguramos que todo se imprima de manera adecuada. Al probar nuestros cambios deberíamos ver algo como la siguiente imagen. 

Ahora estamos desplegando las categorías desde un API en JSON. Si todo ha salido bien la aplicación debe seguir funcionando adecuadamente.

En el siguiente tema veremos otra manera de crear servicios en Angular JS, además haremos peticiones REST al API para guardar, editar y borrar los bookmarks.

Si te ha gustado este tutorial me harías un gran favor si lo compartes en Twitter y Facebook. Recuerda que puedes descargar el código fuente, el video y ver la demostración de este tutorial.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!