Weekend de Angular.js

En este weekend pondremos en práctica los conceptos más importantes de angular creando una App web. Se explicará un concepto nuevo de angular para hacer una aplicación más modular, reusable, robusta y testeable. Dado que será un weekend de un par de horas, se expondrán los temas de manera básica pero con el suficiente contenido como para tener una toma de contacto útil e ir haciendo más interesante nuestra App.

Este weekend viene de la mano de Dani Estevez. Podéis saber más de Dani a través de su perfil de linkedin (http://es.linkedin.com/in/estevezdani) o github (https://github.com/daniboomerang).

Que se necesita:

Conocimientos: Básicos de HTML y Javascript.

Material: Un portatil con GIT, nodejs y bower instalados.

La APP Web: "Generador de números aleatorios - GNA"

Cómo lo vamos a hacer:

Va a haber unas 6 partes/temas/ejercicios divididos en 2 etapas. Lo primero que vamos a hacer es crear un GNA. Lo que pasa es que este va a ser el GNA más cutre que jamás haya existido, y lo vamos a ir mejorando según vayamos viendo nuevos conceptos de angular que nos permitan hacerlo. Este va a ir creciendo en elegancia, complejidad, modularidad y testeabilidad, etc.

Estas son las partes en las que se va a dividir nuestra sesión Angular:

Etapa 1.

Parte 1: "GNA Manual" . El maravillosísimo Doble Data Binding de Angular. Creando nuestra App.

Parte 2: "GNA UIlogic": Angular Controllers . Programando el GNA (Crear controlador Angular). Añadiendo métodos al $scope . Haciendo GNA Automático: $interval. Sacando el Javascript del markup (index.html)

Parte 3: "Directiva GNA": Angular Directives. Refactorizando. GNA en una directiva: . Limpiando el DOM: 'template' . Asociando DOM / lógica: 'la función link'. Pasando atributos a la directiva. ¿GNA MOD?. Creando 10 GNAs en 5.3 segundos: Isolating Scope

Parte 4: "Modularizando el GNA": Angular Services. Delegando cálculo del numero alatorio en un servicio. Comunicando módulos. $rootScope.$broadcast && $scope.on(event).

Parte 5: "API Externa ($http)" & Angular Seed: $http. Refactorizando. La clásica estructura de proyecto para Apps pequeñas. Refactorizando. Nuestro servicio angular ya no calcula los números random, sino que los obtiene de un servicio externo.

Etapa 2:

Parte 6: "Creando un Contenedor de GNAs": Cómo estructurar grandes Apps y tomando contacto con $location & $route (ngRoute). Refactorizando aún más: Nuestros 5 GNAs creados hasta ahora durante la etapa 1, son 5 módulos que forman nuestro contenedor de GNAs y que son completamente independientes haciéndolos más fácilmente testeables"