Este documento explora Angular 2, incluyendo las nuevas características de ES6 y TypeScript, la arquitectura de Angular 2, las herramientas del desarrollador de Angular y cómo construir una aplicación de Angular 2 con la estructura básica que incluye index.html, app.ts y la vista.

1. Explorando Angular 2
Edgar Martínez
@edmtzx

2. ¡Únete!
programmers.stream().map(p -> p.increaseSkills())

3. ES6 y TypeScript

4. ¿Qué hay de Nuevo en ES6?
• Cadenas: startsWith, endsWith, includes
• Metaprogramming
• Template Strings: `
• Colecciones: Maps, Sets
• Nuevo Scope: Block Scope
• Manejo de Variables: Const, Let, Destructuring,
Fat Arrow Functions (=>).
• Clases: class, extends
• Módulos: import

5. ¿Qué agrega TypeScript?
• Tipos: string, boolean, number
• Interfaces: interface

6. AngularJS y Angular 2

7. Arquitectura de Angular 2
https://angular.io/docs/ts/latest/guide/architecture.html

8. El Angular Developer Toolbox
• Lenguaje ES6
• TypeScript
• Transpilers
• Node.js, npm
• Package managers, como Bower o jspm
• Build Scripts, como Grunt o gulp
• Module loaders, como SystemJS ó Webpack

9. Module loader
El module loader en Angular usando SystemJS:
System.import() and System.config()
<script>

10. La Estructura de una Aplicación
Angular 2
1. Empieza con index.html y carga los scripts requeridos de
Angular, el compilador de TypeScript y SystemJS.

11. La Estructura de una Aplicación
Angular 2
2. Construye el archivo app.ts, con import’s,
@Component y la Clase del componente.

12. La Estructura de una Aplicación
Angular 2
3. Construye la Vista. Aquí es donde se hace el “Data Binding”.

13. ¡Manos a la obra!
1. Ve a https://plnkr.co/
2. Ejemplo en
http://bit.ly/AngularCP

14. Resumen
1. Empieza con index.html y carga los
scripts requeridos de Angular, el compilador
de TypeScript y SystemJS.
2. Construye el archivo app.ts, con
import’s, @Component y la Clase del
componente.
3. Construye la Vista. Aquí es donde se hace el
“Data Binding”.

15. ¡Gracias!
@edmtzx
meetup.com/gdljug