Introduction to Angular 2

PHP Sevilla 017 Meetup: Introduction to Angular 2 and consuming data from a Symfony built REST API.

1. API RESTful & Angular 2
22 de febrero 2017

2. Alejandro Pérez Martín
https://github.com/AlejandroPerezMartin
THE FRONTEND

3. Desarrollador Front-End Junior
THE FRONTEND
Sobre mí
Experiencia: WordPress, PHP, jQuery, AngularJS, Angular 2

4. THE FRONTEND
Un poco de historia
Framework MVC para crear SPAs
Antes de Angular: Backbone y Ember
Creado en 2010 por Google

5. THE FRONTEND
Angular 1 vs Angular 2
Componentes
Soporte móvil
Adiós $scope

6. THE FRONTEND
ANGULAR 2

7. THE FRONTEND
TypeScript
Superset de JavaScript (transpilado)
Tipos, clases, interfaces, decoradores…
Orientado a objetos

8. THE FRONTEND
TypeScript

9. THE FRONTEND
Webpack
Sistema de empaquetado de módulos (bundler)
“Evolución” de Grunt o Gulp
Minificación, compilación de SASS a CSS…

10. THE FRONTEND
RxJS
Programación reactiva
Flujo de datos asíncrono
learnrxjs.io
www.youtube.com/watch?v=uQ1zhJHclvs

11. THE FRONTEND
ANGULAR2
angular.io

12. THE FRONTEND
Módulo raíz
imports: otros módulos requeridos por el módulo
declarations: componentes/directivas definidos
providers: servicios definidos
exports: componentes/directivas… disponibles para otros módulos
Root module
bootstrap: componente raíz de la aplicación

13. THE FRONTEND
Módulo
Feature module

14. THE FRONTEND
Componente
Definición
Uso

15. THE FRONTEND
Pasando datos a un componente
@Input Paso de datos

16. THE FRONTEND
Eventos
@Output Recepción

17. THE FRONTEND
Two-way data-binding
Cambios en el modelo se reflejan inmediatamente en la vista
http://plnkr.co/edit/nJZQYSV23sCcbb37FzLN?p=preview
Banana in a box

18. THE FRONTEND
Directivas
Cambian el comportamiento de un componente
Directivas de atributos
No modifican el template
Directivas estructurales
Modifican el template
*ngIf, *ngFor, [ngSwitch], [hidden]
[ngClass] y [ngStyle]

19. THE FRONTEND
Servicios
Funcionalidad compartida en toda la aplicación
Singletons
Inyección de dependencias

20. THE FRONTEND
Servicios
Definición Inyección (DI)

21. THE FRONTEND
Enrutamiento
Navegación desde la vista
Navegación desde un componente
Mostrar componente enrutado

22. THE FRONTEND
ANGULARCLI
cli.angular.io

23. THE FRONTEND
ANGULARCLI
Compilación en función del entorno
Webpack preconfigurado
Tests integrados

24. THE FRONTEND
Comandos
> ng generate route|directive|component|… ruta
https://cli.angular.io/reference.pdf
> ng build --env=dev|prod|… --prod //despliegue
> ng new miProyecto --style=scss|sass //crear proyecto
> ng serve //servir para desarrollo

25. THE FRONTEND
LA APLICACIÓN
https://github.com/AlejandroPerezMartin/angular2-symfony

26. THE FRONTEND
ESTRUCTURA
App
Idea
(editar)
404 Login Registro
Listado
Ideas

27. THE FRONTEND
CASO DE ÉXITO
http://edupills.educalab.es/

28. THE FRONTEND
Editores

29. THE FRONTEND
Recursos interesantes
Documentación oficial
Libro de Angular 2 por Rangle.io
Curso de introducción a Angular 2
Cursos de Angular 2 y JavaScript

30. PREGUNTAS