angularjs2
TRANSCRIPT
![Page 1: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/1.jpg)
![Page 2: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/2.jpg)
CARLOS USCAMAYTAEN 45 MIN.
![Page 3: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/3.jpg)
Carlos UscamaytaScrum Master
INNOVISION
![Page 4: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/4.jpg)
Quien son yo ?Un poco de historiaAngularJS2Demo
![Page 5: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/5.jpg)
UN POCO DE HISTORIA
![Page 6: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/6.jpg)
Erase una vez….
En el 2009
![Page 7: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/7.jpg)
Angular 1.3
Release de parchesCorrecion de bugsPequeñas funcionalidades
![Page 8: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/8.jpg)
Angular 1.4New RouterInternationalizationng-animate, ng-messages, ng-cookies
![Page 9: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/9.jpg)
Angular 1.4 – Aumenta la Performance
~30% faster digest times vs 1.3
![Page 10: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/10.jpg)
Usa new router Usa ES6 modules Usa ES6 en general
Angular 1.5
Esto hara la migracion mas facil.
![Page 11: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/11.jpg)
HASTA QUE UN DIA…
![Page 12: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/12.jpg)
SE DESARROLLO …
![Page 13: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/13.jpg)
2
![Page 14: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/14.jpg)
POR QUE …?
![Page 15: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/15.jpg)
POR QUE
Mejor performanceLa web esta cambiando…MobileFacil de usar
![Page 16: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/16.jpg)
QUE ES LO NUEVO…
![Page 17: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/17.jpg)
WEB COMPONENTS
NUEVA SINTAXIS EN TEMPLATES
NUEVO LENGUAJE
ULTRA-FAST RAPIDA DETECCION DE CAMBIOS
![Page 18: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/18.jpg)
Y MAS…
![Page 19: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/19.jpg)
A QUE APUNTAMOS…
![Page 20: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/20.jpg)
![Page 21: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/21.jpg)
SPASINGLE PAGE APPLICATION
![Page 22: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/22.jpg)
SPA – Single Page Application
VIEW1
VIEW3VIEW4
VIEW2
![Page 23: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/23.jpg)
DOM Manipulation
History
Module Loading
Ajax/Promises
Desafío de SPAData Binding
Routing
Caching
![Page 25: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/25.jpg)
ENTONCES QUE NOS PROVEE ANGULARJS 2 ?
![Page 26: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/26.jpg)
![Page 27: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/27.jpg)
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.
![Page 28: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/28.jpg)
![Page 29: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/29.jpg)
![Page 30: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/30.jpg)
![Page 31: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/31.jpg)
![Page 32: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/32.jpg)
![Page 33: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/33.jpg)
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/ -> inicioo /nosotros - > pagina “nosotros”
o Nos van a server para :o Compartir la direccion URLo Hacer bookmarkso Mantener la “pagina” en la que estamos si
hacemos refresh
![Page 34: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/34.jpg)
![Page 35: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/35.jpg)
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.
![Page 36: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/36.jpg)
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.
![Page 37: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/37.jpg)
PlantillasEnlace de Datos
Injeccion de Dependencias
Metadata
![Page 38: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/38.jpg)
![Page 39: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/39.jpg)
![Page 40: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/40.jpg)
![Page 41: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/41.jpg)
Angularjs 2 esta basado en • ES6/TypeScript• Module Loaders• DOM• Web Components• Observables• ZoneJS• AngularJS 1,x• Web Workers• Native• Shadow DOM
![Page 42: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/42.jpg)
ANGULARJS 1.X NO ESTA MUERTO
![Page 43: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/43.jpg)
Angular 1 vs Angular 2 sites
angularjs.org angular.io
![Page 44: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/44.jpg)
Lenguajes
TypeScript
Dart
ES6/ES5
![Page 45: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/45.jpg)
![Page 46: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/46.jpg)
Comparemos un poco
![Page 47: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/47.jpg)
![Page 48: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/48.jpg)
![Page 49: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/49.jpg)
![Page 50: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/50.jpg)
![Page 51: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/51.jpg)
HORA DE LA DEMO
![Page 52: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/52.jpg)
AngularJS y otros Frameworks
![Page 53: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/53.jpg)
Demostración
https://github.com/cuscamayta/AngularJS2Demo
![Page 54: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/54.jpg)
Conclusión
![Page 55: AngularJS2](https://reader035.vdocuments.site/reader035/viewer/2022070522/58eddbb11a28ab3f2f8b45bb/html5/thumbnails/55.jpg)
GRACIAS!!!