Angular 2 es un framework nuevo, que posee múltiples ventajas en cuanto a su predecesor, pero algunos conceptos continúan vigentes y se siguen utilizando. La manera en la que se realiza el coding sigue siendo similar, sólo que ahora es más estructurada y a prueba de errores. Temas: - Qué ha cambiado,cuáles son las ventajas, y las nuevas funcionalidades que trae consigo Angular 2. - Compilation AOT - Problemas de AOT - Enrutamiento en Angular 2 - Chau Controllers, hola componentes - Hooks - Diferencias entre Angular 1 y 2 por medio de una aplicación.

1. Migrando de Angular 1 a Angular 2
Adaptabilidad del contenido

2. Nuestras
locaciones

3. Nuestros
Panelistas
Karla Cerrón
Marketing Analyst
Alan buscaglia
UI Engineer Developer

4. Primero: ¿Qué ventajas?
QUESTIONS
#Angular2BSF

5. Ventajas QUESTIONS
#Angular2BSF
• Angular 2 es una plataforma además de un lenguaje.
• Mucho más rápido y performante ya que no existe el
concepto de $scope, AOT (ahead of time).
• Mas fácil inyección de dependencias.
• Es modular, cross plataforma.
• Posee los beneficios de Es6 y Typescript desde el vamos.
• Routing flexible con lazy loading.
• Mas fácil de aprender.

6. Que es AOT? (ahead of time) QUESTIONS
#Angular2BSF
¿Cómo se diferencia de JIT? (JUST IN TIME)

7. Ahead of time QUESTIONS
#Angular2BSF
• Compilation en tiempo de building, no run-time.
• Mas ligero ya que se puede eliminar JIT del bundle y no
se debe esperar por él en el run-time.
• Detectar errores durante el building, se pueden detectar
muchos errores en tiempo de compilación lo que provee
una mejor estabilidad de la aplicación.

8. Problemas QUESTIONS
#Angular2BSF
• Funciona solo con html y css, otros tipos de archivos necesitan un
paso de compilación previo
• No hay modo “watch”, tiene que ser realizado de manera manual
(bin/ngc-watch.js) y hay que compilar todos los archivos
• Se necesita mantener la versión del archivo bootstrap de AOT (no
es necesario con herramientas como CLI)
• Se necesita hacer un paso de “cleanup” antes de compilar

9. Enrutamiento en Angular 2
QUESTIONS
#Angular2BSF

10. Enrutamiento QUESTIONS
#Angular2BSF
• Unico servicio de routing
• Lazy loading de módulos es posible!
• Se pueden aplicar resguardos a las url

11. CHAU CONTROLLERS
¡Hola componentes!
QUESTIONS
#Angular2BSF

12. Componentes
QUESTIONS
#Angular2BSF

13. HOOKS
• ngOnChanges
• ngOnInit
• ngOnDestroy
• Hooks especificos de Componentes:
• ngAfterContentInitng
• AfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• Los componentes y las directivas de angular 2 tienen
eventos de ciclos de vida.
• Angular 2 provee eventos especiales (Hooks) que
pueden ser agregados a este ciclo de vida y realizar
operaciones cuando se requiera.
QUESTIONS
#Angular2BSF

14. DEMO
QUESTIONS
#Angular2BSF

15. Espacio de preguntas
QUESTIONS
#Angular2BSF

16. Muchas gracias