El documento presenta una introducción a AngularJS 2. Explica que AngularJS 2 usa componentes, enrutamiento y directivas para crear aplicaciones de página única. Los componentes controlan secciones del HTML y tienen propiedades y métodos. El enrutamiento muestra diferentes áreas dependiendo de la URL. Las directivas pueden modificar el DOM. AngularJS 2 también usa plantillas, enlace de datos e inyección de dependencias.

2. CARLOS USCAMAYTA
EN 45 MIN.

3. CarlosUscamayta
Scrum Master
INNOVISION

14. POR QUE …?

15. POR QUE
Mejor performance
La web esta cambiando…
Mobile
Facil de usar

16. QUE ES LO NUEVO…

17. WEB COMPONENTS
NUEVA SINTAXIS EN TEMPLATES
NUEVO LENGUAJE
ULTRA-FAST RAPIDA DETECCION DE CAMBIOS

19. A QUE APUNTAMOS…

21. SPA
SINGLE PAGE APPLICATION

22. SPA – Single Page Application
VIEW1
VIEW3VIEW4
VIEW2

23. Desafío de SPA

24. Desarrollo Web sin SPA
VIEW1 VIEW2
VIEW3
VIEW4

25. ENTONCES QUE NOS
PROVEE ANGULARJS 2 ?

27. o Los Componentes controlan secciones de
nuestro HTML, nuestras vistas
o El Componente es una clase, esta clase va a
tener propiedades(la informacion de vista) y
metodos(el comportamiento) que nos van a
permitir modificar la vista.
o Para crear una aplicacion en Angular vamos
a necesitar por lo menos un Componente
(Raiz) pero generalmente vamos a tener mas
de uno.

33. o El enrutamiento (o Routing) lo utilizamos
para mostrar diferentes areas de nuestra
aplicacion dependiendo de la direccion URL
que el usuario utilice.
o http://www.mi-aplicacion.com/ -> inicio
o /nosotros - > pagina “nosotros”
o Nos van a server para :
o Compartir la direccion URL
o Hacer bookmarks
o Mantener la “pagina” en la que estamos si
hacemos refresh

35. o Las Directivas nos sirven para hacer cambios
en el DOM de nuestras paginas.
o Existen Directivas de fabrica como *ngFor y
* ngIf
o Podemos crear nuestras propias Directivas
o Para definirlas utilizamos el decorador
@Directive y le pasamos Metadata(un
objeto de configuracion).
o Son de dos tipos: Estructural y Atributo.

36. o Las Directivas Estructurales se utilizan para
crear, remover y/o reemplazar elementos
del DOM. *ngIf, * ngFor, ngSwitch
o Las Directivas de Atributo las utilizamos para
cambiar la apariencia o comportamiento de
un element en el DOM que ya existe. En las
plantillas se ven como atributos HTML
ngStyle,ngClass,ngModel.

37. Plantillas
Enlace de Datos
Injeccion de
Dependencias
Metadata

41. Angularjs 2 esta basado en
• ES6/TypeScript
• Module Loaders
• DOM
• Web Components
• Observables
• ZoneJS
• AngularJS 1,x
• Web Workers
• Native
• Shadow DOM

43. Angular 1 vs Angular 2 sites
angularjs.org
angular.io

44. Lenguajes
TypeScript
Dart
ES6/ES5

46. Comparemos un poco

51. HORA DE LA DEMO

52. AngularJS y otros Frameworks

53. Demostración
https://github.com/cuscamayta/AngularJS2Demo

54. Conclusión

55. GRACIAS!!!