Charla y pequeño taller sobre Angular 2 para ver las principales novedades que trae la nueva versión del framework y como utilizarlo empleando tecnologías como ES6, ES7 Decorators, Babel y Browserify

1. Angular 2 is coming
GDG #DevFestCordoba - Noviembre 2015
@carlosazaustre
+CarlosAzaustre

2. Sobre Mi
Carlos Azaustre
Ingeniero en Telemática
CTO y Cofundador en Chefly
Formador Web / Tech. Blogger
Mentor en NodeSchool Madrid
Autor de
Desarrollo web ágil con Angular.js
Aprendiendo JavaScript
Me puedes leer en
https://carlosazaustre.es

3. @carlosazaustre
Panorama Actual
http://angularjs.org
1.x, 1.2.x
Deprecadas
1.3.x
Estable
1.4.x
Última versión 1.4.7
1.5.x, 1.6.x, ?
1.5.0 en beta
Próximas versiones, para hacer
el tránsito a la 2.0 más
cómodo
http://angular.io
2.0
Versión Alpha
ES6 y WebComponents

4. @carlosazaustre
¿Qué tenemos ahora?
Module
Controllers
Directivas
Factory
Service
$scope
$routeProviders
ngClick
ngSrc
ngClass
ngHide ngShow
ngRepeat

5. @carlosazaustre
¿Qué ha pasado con HTML y JS este tiempo?
2009
2009
2011
.
.
.
2015
ECMAScript 5
ECMAScript 5.1
ECMAScript 6

6. @carlosazaustre
¿Qué ha cambiado?

7. @carlosazaustre
¿Qué ha cambiado?
class MyComponent {
constructor() {
this.nombre = ‘Carlos’;
}
}
Controladores y Servicios -> Clases ES6

8. @carlosazaustre
¿Qué ha cambiado?
import {Component, View} from ‘angular2/angular2’;
Modulos -> Módulos ES6

9. @carlosazaustre
¿Qué ha cambiado?
<div ng-hide=”true”> … </div>
Directivas Atributos
<div [hidden]=”true”> … </div>

10. @carlosazaustre
¿Qué ha cambiado?
<button ng-click=”salvar()”>Salvar</button>
Eventos
<button (click)=”salvar()”>Salvar</button>

11. @carlosazaustre
¿Qué ha cambiado?
<ul>
<li ng-repeat=”item in collection”>
{{ item }}
</li>
</ul>
Directivas
<ul>
<li *foreach=”#item in collection”>
{{ item }}
</li>
</ul>

12. @carlosazaustre
¿Cómo usarlo ahora?

13. @carlosazaustre
¿Cómo usarlo ahora?

14. @carlosazaustre
Demo Time
github.com/carlosazaustre/angular2-devfest-cordoba