angularjs2

55

Upload: carlos-uscamayta

Post on 12-Apr-2017

183 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: AngularJS2
Page 2: AngularJS2

CARLOS USCAMAYTAEN 45 MIN.

Page 3: AngularJS2

Carlos UscamaytaScrum Master

INNOVISION

Page 4: AngularJS2

Quien son yo ?Un poco de historiaAngularJS2Demo

Page 5: AngularJS2

UN POCO DE HISTORIA

Page 6: AngularJS2

Erase una vez….

En el 2009

Page 7: AngularJS2

Angular 1.3

Release de parchesCorrecion de bugsPequeñas funcionalidades

Page 8: AngularJS2

Angular 1.4New RouterInternationalizationng-animate, ng-messages, ng-cookies

Page 9: AngularJS2

Angular 1.4 – Aumenta la Performance

~30% faster digest times vs 1.3

Page 10: AngularJS2

Usa new router Usa ES6 modules Usa ES6 en general

Angular 1.5

Esto hara la migracion mas facil.

Page 11: AngularJS2

HASTA QUE UN DIA…

Page 12: AngularJS2

SE DESARROLLO …

Page 13: AngularJS2

2

Page 14: AngularJS2

POR QUE …?

Page 15: AngularJS2

POR QUE

Mejor performanceLa web esta cambiando…MobileFacil de usar

Page 16: AngularJS2

QUE ES LO NUEVO…

Page 17: AngularJS2

WEB COMPONENTS

NUEVA SINTAXIS EN TEMPLATES

NUEVO LENGUAJE

ULTRA-FAST RAPIDA DETECCION DE CAMBIOS

Page 18: AngularJS2

Y MAS…

Page 19: AngularJS2

A QUE APUNTAMOS…

Page 20: AngularJS2
Page 21: AngularJS2

SPASINGLE PAGE APPLICATION

Page 22: AngularJS2

SPA – Single Page Application

VIEW1

VIEW3VIEW4

VIEW2

Page 23: AngularJS2

DOM Manipulation

History

Module Loading

Ajax/Promises

Desafío de SPAData Binding

Routing

Caching

Page 24: AngularJS2

Desarrollo Web sin SPA

VIEW1 VIEW2VIEW3 VIEW4

Page 25: AngularJS2

ENTONCES QUE NOS PROVEE ANGULARJS 2 ?

Page 26: AngularJS2
Page 27: AngularJS2

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
Page 29: AngularJS2
Page 30: AngularJS2
Page 31: AngularJS2
Page 32: AngularJS2
Page 33: AngularJS2

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
Page 35: AngularJS2

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

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

PlantillasEnlace de Datos

Injeccion de Dependencias

Metadata

Page 38: AngularJS2
Page 39: AngularJS2
Page 40: AngularJS2
Page 41: AngularJS2

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

ANGULARJS 1.X NO ESTA MUERTO

Page 43: AngularJS2

Angular 1 vs Angular 2 sites

angularjs.org angular.io

Page 44: AngularJS2

Lenguajes

TypeScript

Dart

ES6/ES5

Page 45: AngularJS2
Page 46: AngularJS2

Comparemos un poco

Page 47: AngularJS2
Page 48: AngularJS2
Page 49: AngularJS2
Page 50: AngularJS2
Page 51: AngularJS2

HORA DE LA DEMO

Page 52: AngularJS2

AngularJS y otros Frameworks

Page 53: AngularJS2

Demostración

https://github.com/cuscamayta/AngularJS2Demo

Page 54: AngularJS2

Conclusión

Page 55: AngularJS2

GRACIAS!!!