Angular2 DI: Inyección de dependencias

Código asociado en angular2/4-injection/

AngularJS2 tiene vocación de framework para grandes aplicaciones de negocio. Los grandes desarrollos requieren modularidad en el código. En AngularJS se resuelve mediante la Inyección de Dependencias, siguiendo el conocido patrón Dependency Injection.

Los cambios en la versión 2 son sobre todo sintácticos, pero también conceptuales. Se mantiene el mismo objetivo, permitir hacer aplicaciones de negocio con HTML y JavaScript de manera controlable.

Leer más

CompartirComentarios

DataBinding el flujo de datos de Angular2

Código asociado en angular2/3-databinding/

El doble binding o enlace vista controlador en ambos sentidos es una de las claves del éxito de AngularJS. Usando la célebre directiva ng-model enganchamos una propiedad del modelo con un control de la vista. De manera automágica Angular se suscribe a cambios en el DOM y observa el estado del modelo manteniéndolos en sincronía.

Pero esto tiene un coste en rendimiento que Angular2 supera con un patrón distinto para el control del flujo de datos entre la vista y el modelo. Este nuevo paradigma ofrece soluciones para distintos escenarios:

Flujo de datos

Leer más

CompartirComentarios

Componentes, los bloques de construcción de Angular2

Código asociado en GitHub: angular2/2-modulos/

Los componentes son los bloques de construcción de la web moderna. En Angular 2 sustituyen al viejo par Vista-Controlador, el cual ya era opcional en las últimas versiones 1.x Ahora el componente es el rey.

Las aplicaciones en Angular2 se desarrollan como árboles de componentes. Estos árboles pueden llegar a ser muy frondosos y conviene dirigir su crecimiento agrupándolos en módulos para no perderse. Yo procuro estructurarlo en niveles para una mejor comprensión. En cada nivel se crea un módulo y dentro de él se declaran los componentes.

  • 1- Nivel Raíz:
    Toda aplicación parte de un componente raíz. Suele recibir el nombre de la aplicación desarrollada y el sufijo App o simplemente App.
  • 2- Nivel Troncal:
    Generalmente dos o tres componentes troncales para la estructura de las páginas. Es común el patrón Navegador-Contenedor, con algún elemento auxiliar para ayudas, mensajes, menús complejos…
  • 3- Nivel de Ramas:
    En este símil, las ramas equivalen a rutas o vistas de la aplicación. En un SPA cada ruta tiene una vista asociada que se carga dentro del componente troncal contenedor
  • 4- Nivel de Hojas:
    Cada una de las vistas está a su vez formada por múltiples componentes de negocio a modo de hojas.

Árbol de componentes en una aplicación Angular 2

Con la salvedad de que muchos de estos componentes los puedes reutilizar en distintas vistas.

Leer más

CompartirComentarios

Hola Mundo Angular 2

Código asociado en GitHub: angular2/1-HolaMundo/

Qué lejanos aquellos tiempos dónde un Hola Mundo en AngularJS se hacía en 2 líneas de código. Ahora necesitaré miles de ficheros y media hora de explicación. Pero el resultado valdrá la pena. Estaremos en la pista de lanzamiento para crear aplicaciones de nivel empresarial con Angular 2.

Ya he explicado que Angular ha pasado de framework a plataforma, y que ya no es para aficionados. Grandes desarrollos en equipo requieren herramientas y procedimientos a la altura. La primera opción que te recomiendo es Angular CLI, un generador de aplicaciones trufado de buenas prácticas y procedimientos. Por raro que te parezca, cualquier otra opción es aún más compleja que la que te muestro.

Leer más

CompartirComentarios

Angular2, la evolución de la plataforma

Coincidiendo con la ngConf 2016 acaba de presentarse la esperada Release Candidate de Angular 2. Nunca antes una versión de una herramienta para desarrolladores había causado tal expectación. Hace ya 18 meses que se había anunciado como una evolución rupturista con respecto a AngularJS 1. Y ahora esa ruptura se ha materializado.

Los programadores somos muy conscientes de que lo único estable es el cambio. Asumimos, por experiencia, que los cambios en una tecnología son evoluciones graduales constantes. Pero esto no es así en Angular2, y lo sabemos desde su anuncio hace año y medio. Desde ese momento todos fuimos advertidos de que estábamos ante otra cosa. Algo nuevo que sólo comparte paternidad y nombre con la anterior versión.

Leer más

CompartirComentarios