Un Tutorial Paso-a-Paso para tu Primera Aplicación AngularJS

¿Qué es AngularJS?

AngularJS es un marco de JavaScript MVC desarrollado por Google, el cual permite construir aplicaciones front-end bien estructuradas y fáciles de comprobar y mantener.

¿Y Por Qué Debo Utilizarlo?

Si no has probado AngularJS todavía, es una lástima. El marco consiste en un conjunto de herramientas bien integradas que te ayudará a construir aplicaciones del lado del cliente, bien estructuradas en un sistema modular, con menos código y más flexibilidad.

AngularJS extiende HTML, proporcionando directrices que añaden funcionalidad a tu margen de beneficio y te permite crear plantillas dinámicas poderosas. También puedes crear tus propias directrices, elaborando componentes reusables que completan tus necesidades y abstrayendo toda la lógica de manipulación del DOM.

También implementa binding de datos de dos vías, conectando tu HTML (vistas) a los objetos de JavaScript (modelos) sin problemas. En términos simples, esto significa que cualquier actualización de tu modelo se reflejará inmediatamente en tu vista, sin necesidad de ningún tipo de manipulación DOM o el control de eventos (por ejemplo, con jQuery).

Angular presta servicios en la parte superior de XHR que simplifican considerablemente tu código y permite abstraer llamadas API en servicios reusables. Con esto, puedes mover tu modelo y lógica de negocio para el front-end y construir aplicaciones web back-end independientes (agnostic).

Por último, me encanta Angular debido a su flexibilidad en cuanto a la comunicación del servidor. Como la mayoría de los marcos de JavaScript MVC, Angular te permite trabajar con cualquier tecnología de servidor, siempre que puede servir a tu aplicación a través de una API REST Web. Pero Angular también proporciona servicios aparte de XHR, los cuales simplifican considerablemente tu código y te permite abstraer llamadas API en servicios reusables. Como resultado, se puede mover el modelo y la lógica de negocio para el front-end y construir aplicaciones web back-end independientes. En este post vamos a hacer precisamente eso: un paso a la vez.

Así que, ¿Por Dónde Empezamos?

En primer lugar, vamos a decidir la naturaleza de la aplicación que queremos construir. En esta guía, preferimos no pasar demasiado tiempo en el back-end, por lo que vamos a escribir algo sobre la base de datos que es fácil de obtener en internet, ¡como una aplicación de noticias deportiva!

Ya que soy un gran fan del automovilismo y la Fórmula 1, voy a utilizar un servicio API Autosport como nuestro back-end. Por suerte, los chicos de Ergast son lo suficientemente amables para proporcionar una API de automovilismo gratis, la cual es perfecta para nosotros.

Como adelanto de lo que vamos a construir, echa un vistazo al demo en vivo. Para embellecer el demo y mostrar algunas plantillas Angular, apliqué un tema Bootstrap de WrapBootstrap, pero ya que éste artículo no es acerca de CSS, lo voy a abstraer de los ejemplos y dejarlo fuera por completo.

Tutorial para Comenzar

Vamos a iniciar nuestra aplicación de ejemplo con un poco de Boilerplate. Recomiendo el proyecto angular-seed, ya que no sólo proporciona un gran esqueleto para bootstrapping, sino que también establece las bases para las pruebas de unidad con Karma y Jasmine(no vamos a hacer ninguna prueba en éste demo, así que vamos dejar eso de lado por ahora; ve la Parte 2 de éste tutorial para obtener más información sobre la configuración de tu proyecto, para pruebas unitarias y de extremo a extremo).

EDITADO (Mayo de 2014): Desde que escribí éste tutorial, el proyecto angular-seed ha pasado por algunos cambios importantes (incluyendo la adición de Bower como gestor de paquetes). Si tienes alguna duda acerca de cómo implementar el proyecto, echa un vistazo rápido a la primera sección de su guía de referencia. En la parte 2 del tutorial, Bower, entre otras herramientas, es explicado en mayor detalle.

Bien, ahora que hemos clonado el repositorio e instalado las dependencias, el esqueleto de nuestra aplicación va a tener este aspecto:

Ahora podemos empezar a codificar. Como estamos tratando de construir aplicación de noticias de deporte para un campeonato de carreras, vamos a empezar con la vista más relevante: la tabla del campeonato.

Teniendo en cuenta que ya tenemos una lista de los conductores definida dentro de nuestro alcance (Quédate conmigo – Llegaremos ahí), y haciendo caso omiso de cualquier CSS (para facilitar la lectura), nuestra HTML podría ser:

<body ng-app="F1FeederApp" ng-controller="driversController">
  <table>
    <thead>
      <tr><th colspan="4">Drivers Championship Standings</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="driver in driversList">
        <td>{{$index + 1}}</td>
        <td>
          <img src="img/flags/{{driver.Driver.nationality}}.png" />
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </td>
        <td>{{driver.Constructors[0].name}}</td>
        <td>{{driver.points}}</td>
      </tr>
    </tbody>
  </table>
</body>

La primera cosa que notarás en esta plantilla es el uso de expresiones (“{{“ y “}}”) para regresar valores de las variables. En AngularJS, las expresiones permiten ejecutar algunos cálculos, con el fin de regresar un valor deseado. Algunas expresiones válidas serían:

  • {{ 1 + 1 }}
  • {{ 946757880 | date }}
  • {{ user.name }}

Efectivamente, las expresiones son fragmentos parecidos a JavaScript. A pesar de ser muy potente, no deberías utilizar expresiones para implementar cualquier lógica de nivel superior. Para ello, utilizamos directrices.

La Comprensión de las Directrices Básicas

La segunda cosa que notarás es la presencia de ng-attributes, que no verías en el marcado típico. Esas son las directrices.

En un nivel alto, las directrices son marcadores (como atributos, etiquetas y nombres genéricos) que le ordenan a AngularJS adjuntar un comportamiento dado a un elemento DOM (o transformarlo, reemplazarlo, etc.). Vamos a echar un vistazo a los que ya hemos visto:

  • La directriz ng-app es responsable de hacer bootstrapping a tu aplicación, para definir el ámbito de ésta. En AngularJS, puedes tener múltiples aplicaciones dentro de la misma página, por lo que esta directriz define el lugar donde comienza y termina cada aplicación.
  • La directriz ng-controller define qué controlador estará a cargo de tu vista. En este caso, la denotamos driversController, la cual proporcionará nuestra lista de conductores (driversList).
  • La directriz ng-repeat es una de las más utilizadas, y sirve para definir tu alcance de plantilla al pasar a través de colecciones. En el ejemplo anterior, repite una línea en la tabla por cada conductor en driversList.

Añadir Controladores

Por supuesto, nuestra vista no sirve de nada, sin un controlador. Vamos a añadir driversController a nuestros controllers.js:

angular.module('F1FeederApp.controllers', []).
controller('driversController', function($scope) {
    $scope.driversList = [
      {
          Driver: {
              givenName: 'Sebastian',
              familyName: 'Vettel'
          },
          points: 322,
          nationality: "German",
          Constructors: [
              {name: "Red Bull"}
          ]
      },
      {
          Driver: {
          givenName: 'Fernando',
              familyName: 'Alonso'
          },
          points: 207,
          nationality: "Spanish",
          Constructors: [
              {name: "Ferrari"}
          ]
      }
    ];
});

Seguro notaste la variable $scope que estamos pasando como parámetro al controlador. La variable $scope se supone que debe enlazar tu controlador y vistas. En particular, lleva todos los datos que se utilizarán dentro de la plantilla. Todo lo que se agrega a ella (como la driversList del ejemplo anterior) será directamente accesible en tus vistas. Por ahora, vamos a trabajar con una matriz de datos ficticios (estática), que vamos a sustituir más tarde con nuestro servicio API.

Ahora, añade esto a app.js:

angular.module('F1FeederApp', [
  'F1FeederApp.controllers'
]);

Con esta línea de código inicializamos nuestra aplicación y registramos los módulos de los cuales depende. Volveremos a ese archivo (app.js) más adelante.

Ahora, vamos a poner todo junto en index.html:

<!DOCTYPE html>
<html>
<head>
  <title>F-1 Feeder</title>
</head>

<body ng-app="F1FeederApp" ng-controller="driversController">
  <table>
    <thead>
      <tr><th colspan="4">Drivers Championship Standings</th></tr>
    </thead>
    <tbody>
      <tr ng-repeat="driver in driversList">
        <td>{{$index + 1}}</td>
        <td>
          <img src="img/flags/{{driver.Driver.nationality}}.png" />
          {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}
        </td>
        <td>{{driver.Constructors[0].name}}</td>
        <td>{{driver.points}}</td>
      </tr>
    </tbody>
  </table>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
</body>
</html>

Moduló errores menores, ahora puedes iniciar tu aplicación y comprobar tu lista (estática) de los conductores.

Nota: Si necesitas ayuda para la depuración de la aplicación y la visualización de tus modelos y con el alcance dentro del navegador, recomiendo echar un vistazo a la impresionante batarang; complemento para Chrome.

 

Contenido extraído de:  https://www.toptal.com/angular-js/un-tutorial-paso-a-paso-para-tu-primera-aplicaci%C3%B3n-angularjs/es
Autor: Raoni Boaventura