Ejemplos Angular 2

Fundamentos

1. ejemplo0001: proyecto plantilla generado con “ng new ejemplo0001 --skip-install”. App Angular 2 mínima.
2. ejemplo0002: creación e integración de un componente de dos formas distintas
3. ejemplo0003: creación e integración de un servicio
4. ejemplo0004: reorganización del ejemplo0003

Asincronía: promesas y observables

5. ejemplo0005: uso de asincronía mediante promesas
6. ejemplo0006: uso de asincronía mediante observables

Cliente Http

7. ejemplo0007: acceso al servidor empleando promesas y un api simulada en memoria
8. ejemplo0008: acceso al servidor empleando observables y un api simulada en memoria
9. ejemplo0009: acceso a un api real empleando observables. Spotify ha impedido el acceso a la URL si no se sigue un (tedioso) proceso de obtención de credenciales
10. ejemplo0010: reorganización del ejemplo0009. Spotify ha impedido el acceso a la URL si no se sigue un (tedioso) proceso de obtención de credenciales
11. ejemplo0031: uso JSONP para acceder a información de otros dominios
12. ejemplo0032: acceso a un api real empleando observables
13. ejemplo0033: reorganización del ejemplo0032
14. ejemplo0037: acceso asíncrono a un observable “compuesto” de un único objeto, en lugar de una colección
15. ejemplo0038: acceso asíncrono a un servidor remoto empleando HttpClient

Interactividad

16. ejemplo0011: uso de estilos, enlace de propiedades y eventos
17. ejemplo0012: Integración de lo visto en ejemplo0011. Uso de Angular CLI para generar un componente nuevo: “ng generate component rating --flat”
18. ejemplo0013: creación de componentes reutilizables. Propiedades de tipo input
19. ejemplo0034: Comunicación bidireccional entre componentes. Propiedades de tipo input y output.
20. ejemplo0036: Comunicación entre componentes que no pertenecen a la misma jerarquía

Directivas y tubos (pipes)

21. ejemplo0014: control de los templates html mediante el empleo de algunas directivas típicas.  Uso de Angular CLI para generar un componente nuevo: “ng generate component render”. Creación de directivas personalizadas: “ng g directive confirmar”
22. ejemplo0015: tubos (pipes) y tubos personalizados.  Uso de Angular CLI para generar un componente nuevo: “ng generate component testpipe” y un tubo personalizado:”ng g pipe custompipe”

Comunicación entre componentes

23. ejemplo0016: inclusión de elementos externos en componentes mediante ng-content. Uso de Angular CLI para generar un componente nuevo: “ng g component testcontent”

Formularios basados en plantillas (template forms)

24. ejemplo0017: formularios basados en plantillas, paso 1. Enlace entre propiedades en ambos sentidos (Two-way binding). Uso de Angular CLI para generar componentes (“ng g component usuario-form) y clases: “ng g class usuario”
25. ejemplo0018: formularios basados en plantillas, paso 2. Validaciones basadas en el ejemplo0017. Envío condicional de formularios

Formularios basados en modelos (Reactive Forms)

26. ejemplo0019: formularios basados en modelos (Reactive Forms), paso 1. Creación de controles para el formulario. Uso de Angular CLI para generar componentes (“ng g component login)
27. ejemplo0020: formularios basados en modelos (Reactive Forms), paso 2. Validaciones personalizadas y uso de FormBuilder, basado en el ejemplo0019
28. ejemplo0021: formularios basados en modelos (Reactive Forms), paso 3. Uso de servicios. Validación al enviar el formulario, basado en el ejemplo0020

Aplicaciones de una sóla página (routing y navegación)

29. ejemplo0022: introducción al uso de Routers. Aplicaciones de una sóla página.
30. ejemplo0023: uso de Routers. Paso de parámetros entre componentes. Aplicaciones de una sóla página
31. ejemplo0024: uso condicional de Routers (Guards). Aplicaciones de una sóla página

Acceso a base de datos

32. ejemplo0025: Proyecto CRUD con Firebase, paso 1. Creación de la base de datos, configuración del proyecto e importación de algunos datos de prueba en la misma. Uso de la biblioteca de apoyo angularfire2
33. ejemplo0026: Proyecto CRUD con Firebase, paso 2, basado en ejemplo0025. Operaciones CRUD, uso de estilos
34. ejemplo0027: creación de un proyecto que usa rutas con angular-cli: ng new ejemplo0027 --routing true

Aplicaciones multimódulo

35. ejemplo0028: uso de módulos, paso 1. Creación del proyecto sin módulos
36. ejemplo0029: uso de módulos, paso 2. Sobre el proyecto ejemplo0028 creación y configuración de un módulo
37. ejemplo0030: uso de módulos, paso 3. Módulos “lazy loaded”

Internacionalización

38. ejemplo0035: Ejemplo de internacionalización en formato xmb

Bibliotecas de componentes

39. ejemplo0039: Uso básico de la biblioteca PrimeNG