Sesión presentada en SG Virtual 11a. edición. Presentada por: Alex Arriaga. Durante esta sesión aprenderemos cómo crear una aplicación con la nueva versión de Angular (que ya es estable), asimismo revisaremos los archivos de configuración más comunes y cómo utilizar TypeScript para poder generar componentes.

1. Building your first application
with Angular 2
By: Alex Arriaga

2. Introduction
Building your first application
with Angular 2
Alex Arriaga

3. ¿What will we learn?
• NPM, JSPM, Gulp.js, Git
• Quick Start
• The Angular 2 app structure
• Components
• Services
• Pipes
• Inputs/Outputs
@alex_arriaga_m

4. The basics
Building your first application
with Angular 2
Alex Arriaga

5. ¿What the h… is an SPA?
• Single Page Application
• Angular 2
• React
• Ember.js
• …
@alex_arriaga_m

6. No, so fast… ¿What is a RESTful
API?
• Mechanism to interact with data sources via a
semantic URI convention using HTTP verbs
• What?
@alex_arriaga_m

7. ¿When should I use a framework?
• Multiple data sources (databases, file system)
• Integration with other systems
• Third party ”head-less” platforms
• Pure front-end teams
@alex_arriaga_m

8. ¿Why Angular 2?
• Complete framework not just library
• TypeScript / Dart / ES2015 ready
• “Web-component” oriented
• License friendly!
@alex_arriaga_m

9. Installation
Building your first application
with Angular 2
Alex Arriaga

10. Clone the official repository
• Git / Git bash
• http://git-scm.com/
@alex_arriaga_m
git clone https://github.com/angular/quickstart.git

11. App structure
Building your first application
with Angular 2
Alex Arriaga

12. Some important files
• package.json
• systemjs.config.js
• tsconfig.json
• typings.json
• tslint.json
@alex_arriaga_m

13. Some important directories
• app
• node_modules
• typings
@alex_arriaga_m

14. Components
Building your first application
with Angular 2
Alex Arriaga

15. Angular 2 @Component
• Build UI elements and logic on the page
@alex_arriaga_m
Header Component
Left Component Right Component
Footer Component

16. Minimal component structure
@alex_arriaga_m

17. Templates and
directives
Building your first application
with Angular 2
Alex Arriaga

18. Managing data in templates
• Binding with interpolation
• Logic: ngIf
• Iteration: ngFor
@alex_arriaga_m

19. Services
Building your first application
with Angular 2
Alex Arriaga

20. Angular 2 @Injectable()
• A service represents a way to interact with data
acquisition
• Can use HTTP for communication (via Observables)
@alex_arriaga_m

21. Minimal service structure
@alex_arriaga_m

22. Pipes
Building your first application
with Angular 2
Alex Arriaga

23. Angular 2 @Pipe
• Write display-value transformations declared in our
HTML
• Similar to a pipe in GNU/Linux or a filter in other
template systems
@alex_arriaga_m

24. Minimal pipe structure
@alex_arriaga_m

25. Alex Arriaga
/webtrainingmx
alex_arriaga_m
/alexarriagam
alex.arriaga.m@gmail.com
http://www.alex-arriaga.com/
alex_arriaga