angularjs2
TRANSCRIPT
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
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!!!