Servicios en Angular para compartir datos
Clase 32 de 80 • Curso de Angular 4
Contenido del curso
Introducción a Angular 4
Setup del Ambiente de Trabajo
Conceptos Básicos
- 9

Para qué nos sirven los Módulos y Componentes
08:10 min - 10

Tipos de Data Binding y String Interpolation
05:05 min - 11

Property Binding
06:04 min - 12

Event Binding
03:04 min - 13

ngModel y two way binding en Angular
05:12 min - 14

Directivas en Angular 4 y ngFor
07:39 min - 15

Cómo usar ngIf en Angular 4.0
03:04 min - 16

Instalando librerías con NPM (Google Maps)
06:48 min
Directivas
Angular UI
Ruteo
- 24

Qué hace el router en Angular 4
03:11 min - 25

Implementación de Rutas en el Proyecto
07:36 min - 26

Href vs router link: navegación angular
02:27 min - 27

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos
01:53 min - 28

Parámetros de ruta con routerLink en Angular
06:01 min - 29

Parámetros tipo Query
03:53 min - 30

Creando una vista de detalle para el proyecto
09:06 min - 31

Página de contacto Angular desde cero
07:45 min
Servicios
- 32

Servicios en Angular para compartir datos
Viendo ahora - 33

Creando nuestro propio servicio
07:11 min - 34

Configurando Firebase en nuestro proyecto
05:12 min - 35

Guardando Records en Firebase
12:20 min - 36

Obteniendo records desde Firebase
08:40 min - 37

Obteniendo coordenadas usando Geocoding
13:45 min - 38

Reto: Crear una vista para editar records
09:29 min - 39

Mostrando marcadores en el Mapa de Google
03:02 min
Conexión Remota (Http y Sockets)
Pipes
Animaciones en Angular
Testing en Angular
Autenticación y Protección de Rutas
- 59

Cómo funcionan los JSON Web Tokens
03:05 min - 60

Preparación de vistas para login y registro
11:58 min - 61

Registrando usuarios
07:29 min - 62

Loggeando usuarios
07:18 min - 63

Guardias canActivate en Angular: Proteger rutas con autenticación
11:09 min - 64

Cómo integrar Facebook login con Firebase
09:08 min - 65

Logout en Angular con Firebase
05:28 min
RxJS
- 66

Cómo funciona RxJS con metáfora de oficina
02:09 min - 67

Mostrar email del usuario logueado en Angular
06:32 min - 68

Uso de los Observables
04:30 min - 69

Cómo implementar type ahead con Observables y RxJS
10:43 min - 70

Implementar formularios reactivos con type ahead
07:58 min - 71

Cómo rellenar campos automáticamente con Google
01:28 min
Publicando nuestro proyecto
Fin del curso
Sesiones en vivo
Contenido Bonus
Centraliza los datos en servicios de Angular para evitar duplicación entre componentes y mantener una experiencia consistente. En un escenario con una lista de lugares usada en varios puntos, un servicio simplifica el acceso a todos los registros o a un lugar en específico, mejorando claridad y mantenimiento.
¿Qué problema resuelven los servicios en Angular?
Cuando varios componentes necesitan la misma información, copiar la lista de lugares en cada uno complica el código y genera inconsistencias. La solución es crear un servicio que concentre los datos y exponga funciones para consultarlos según la necesidad.
¿Qué componentes consumen los datos?
- Un componente de lugares que requiere todos los lugares.
- Un componente de detalle que necesita un lugar en específico.
- Ambos acceden a la misma fuente de datos de forma repetida.
¿Qué datos se comparten?
- Una lista de lugares disponible para múltiples vistas.
- La posibilidad de obtener todos los lugares.
- La opción de consultar un lugar en específico según se necesite.
¿Cómo crear un servicio que comparta la lista de lugares?
La propuesta es construir un servicio que contenga la lista de lugares y que ofrezca funciones claras para consumirla. Así, los componentes solo piden lo que requieren sin conocer detalles internos ni duplicar lógica.
- Definir una estructura con la lista de lugares en el servicio.
- Implementar una función que regrese todos los lugares.
- Implementar una función que regrese un lugar en específico.
- Usar el servicio desde los componentes de lugares y detalle según su necesidad.
Este enfoque hace que el acceso repetido desde varios componentes sea consistente y fácil de mantener, especialmente útil cuando el proyecto crece.
¿Qué habilidades y palabras clave debes retener?
Para avanzar con confianza, enfócate en los conceptos mencionados y su relación práctica:
- Angular: framework donde se implementan componentes y servicios.
- Ruteo: contexto previo que conecta vistas, ahora complementado con servicios para datos.
- Servicios: lugar central donde vive la lista y la lógica de acceso.
- Componentes: "lugares" consume todos; "detalle" consume uno específico.
- Lista de lugares: datos compartidos para múltiples vistas.
- Funciones que regresan datos: obtener todos los lugares u obtener uno en particular.
¿Tienes dudas sobre cómo modelar la lista o cómo exponer las funciones del servicio? Comparte tu caso y comentamos juntos la mejor manera de estructurarlo.