angularjs2

CARLOS USCAMAYTAEN 45 MIN.

Carlos UscamaytaScrum Master

INNOVISION

Quien son yo ?Un poco de historiaAngularJS2Demo

UN POCO DE HISTORIA

Erase una vez….

En el 2009

Angular 1.3

Release de parchesCorrecion de bugsPequeñas funcionalidades

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

Angular 1.4 – Aumenta la Performance

~30% faster digest times vs 1.3

Usa new router Usa ES6 modules Usa ES6 en general

Angular 1.5

Esto hara la migracion mas facil.

HASTA QUE UN DIA…

SE DESARROLLO …

2

POR QUE …?

POR QUE

Mejor performanceLa web esta cambiando…MobileFacil de usar

QUE ES LO NUEVO…

WEB COMPONENTS

NUEVA SINTAXIS EN TEMPLATES

NUEVO LENGUAJE

ULTRA-FAST RAPIDA DETECCION DE CAMBIOS

Y MAS…

A QUE APUNTAMOS…

SPASINGLE PAGE APPLICATION

SPA – Single Page Application

VIEW1

VIEW3VIEW4

VIEW2

DOM Manipulation

History

Module Loading

Ajax/Promises

Desafío de SPAData Binding

Routing

Caching

Desarrollo Web sin SPA

VIEW1 VIEW2VIEW3 VIEW4

ENTONCES QUE NOS PROVEE ANGULARJS 2 ?

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.

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

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.

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.

PlantillasEnlace de Datos

Injeccion de Dependencias

Metadata

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

ANGULARJS 1.X NO ESTA MUERTO

Angular 1 vs Angular 2 sites

angularjs.org angular.io

Lenguajes

TypeScript

Dart

ES6/ES5

Comparemos un poco

HORA DE LA DEMO

AngularJS y otros Frameworks

Demostración

https://github.com/cuscamayta/AngularJS2Demo

Conclusión

GRACIAS!!!