AngularJS

Introducción y primeros pasos

+ David Rubert / @tombatossals

Guardar como PDF

Qué es AngularJS

Una tecnología nueva en la capa de cliente que nos permite realizar cosas chachis en nuestras páginas sin necesidad de montar jaleos de código. Separa muy bien la responsabilidad de cada tecnología en su ámbito: CSS, HTML y Javascript, y las comunica cuando lo considera necesario.

Por qué AngularJS

Característica principal. No manosees el árbol DOM para acceder al valor de un elemento.

                            
// Esto noooooo por favoooor!
var titulo = $("#elem").up("li").first("p").down("span.olala").val();

// Esto se ve mejor :)
var titulo = $scope.titulo;

Por qué AngularJS

Esto se consigue actualizando la vista automáticamente cuando cambia el modelo, o viceversa. Two-way data binding.

Por qué AngularJS

Disponemos de plantillas que extienden el vocabulario del código HTML para proporcionarnos la introducción de lógica en la representación de nuestra información.

                            
<div ng-controller="AlbumCtrl">
  <ul>
    <li ng-repeat="image in images">
      <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
    </li>
  </ul>
</div>

Por qué AngularJS

  1. Reausability. Permite crear componentes (directivas) fácilmente reutilizables (que permiten aislar totalmente su función, no chocan con otros).
  2. Testing. Al tener componentes aislados, podemos testear su comportamiento de manera independiente.
  3. Inyección de dependencias. Si necesitamos hacer uso de un servicio, lo inyectamos en nuestro controlador directamente y funciona.

Vocabulario

Scope. Es el responsable de detectar los cambios en el modelo y proporciona el contexto a las plantillas. 

                            
<!doctype html>
<html ng-app>
  <head> ...  </head>
  <body>
    <div ng-controller="GreetCtrl">
      Hello {{name}}!
    </div>
    <div ng-controller="ListCtrl">
      <ol>
        <li ng-repeat="name in names">{{name}}</li>
      </ol>
    </div>
  </body>
</html>

Vocabulario

Controlador. Es el código con la lógica que comunica el modelo con la vista.

Vocabulario

Modelo. Son los datos, que junto con la plantilla producen las vistas.

Vocabulario

Vistas. Lo que el usuario visualiza. Parte de una plantilla, se funde con el modelo y se renderiza en el árbol DOM.

Vocabulario

Vistas. Lo que el usuario visualiza. Parte de una plantilla, se funde con el modelo y se renderiza en el árbol DOM.

Let's go slowly inside the code!

Paso 1

Montando la infraestructura

                            
$ git clone https://github.com/tombatossals/angularjs-tutorial
$ git checkout phase1
  • ng-app
  • ng-controller
  • ng-model
  • ng-show
  • {{ template_vars }}

Paso 2

Más directivas y servicios

                            
$ git clone https://github.com/tombatossals/angularjs-tutorial
$ git checkout phase2
  • Filtro number. Números decimales.
  • ng-cloak. Esperar antes de renderizar la plantilla.
  • Watches. Inspeccionando variables del modelo.
  • Servicio routeProvider. Enrutador.
  • Vistas parciales. Cargar mini-plantillas.
  • Tests E2E. Tests End-to-End.