Frontend: Suscripciones y Observables con Angular 8
Bueno antes que empezar, aclaro que este ejemplo pretende ser una inducción rápida y sencilla para implementar y entender el funcionamiento básico de los observables y suscripciones en angular.
En este articulo utilizaremos un archivo json como fuente de datos, en un ambiente productivo sera una petición a un servidor...esta peticiones la haremos con un observable y la respuesta la obtendremos a través de una suscripción.....aaaa usaremos una lista de películas para hacerlo mas amigable.
Requisitos:
Primero creamos nuestro proyecto angular, con nuestra terminal nos posicionamos en el directorio donde guardaremos nuestro proyecto y escribimos:
ng new observable-app
Luego dentro de la carpeta de nuestro proyecto creamos nuestro componente. Para esto tecleamos en nuestra terminal:
cd observable-app
ng g c pelicula/lista-pelicula
Con esto se crea nuestra carpeta con los archivos de nuestro componente. y agregamos en nuestro archivo:
lista-pelicula.component.ts
lista-pelicula.component.html
Creamos la Class pelicula, quien representa una "pelicula"
ng g class pelicula/pelicula
Y en el archivo generado ingresamos
pelicula.ts
Creamos nuestro servicio película, quien se encarga de obtener los datos para luego dejarlos a disponibilidad del contenedor,quien los mostrara en nuestra interfaz gráfica
ng g service pelicula/pelicula
pelicula.service.ts
ya casi terminando, creamos nuestro archivo que sera la fuente de datos, en un ambiente productivo sera un servidor:
y dentro de nuestro archivo peliculas.json.ts agregamos
no olvidar reemplazar todo el código de nuestro app.component.html por:
opcionalmente puedes agregar bootstrap para el diseño, esto lo agregas en el archivo index.html agregando en el head:
y listo!!! ya podemos ejecutar. Para eso nos pocisionamos con nuestra terminal en la carpeta raiz de nuestro proyecto y tecleamos:
ng serve --open --port 4300
No olvides darle un like y cualquier sugerencia sera bienvenida :D.
En este articulo utilizaremos un archivo json como fuente de datos, en un ambiente productivo sera una petición a un servidor...esta peticiones la haremos con un observable y la respuesta la obtendremos a través de una suscripción.....aaaa usaremos una lista de películas para hacerlo mas amigable.
Requisitos:
- conocimientos mínimos de HTML, algo de javaScript, css y una noción de POO
- Tener instalado angular y un editor de código, yo utilizo visual studio code
- 15 minutos de tu vida
- ser mayor de edad....no, no es necesario. Solo quise darle un aire de exclusividad
Primero creamos nuestro proyecto angular, con nuestra terminal nos posicionamos en el directorio donde guardaremos nuestro proyecto y escribimos:
ng new observable-app
Luego dentro de la carpeta de nuestro proyecto creamos nuestro componente. Para esto tecleamos en nuestra terminal:
cd observable-app
ng g c pelicula/lista-pelicula
Con esto se crea nuestra carpeta con los archivos de nuestro componente. y agregamos en nuestro archivo:
lista-pelicula.component.ts
lista-pelicula.component.html
Creamos la Class pelicula, quien representa una "pelicula"
ng g class pelicula/pelicula
Y en el archivo generado ingresamos
pelicula.ts
Creamos nuestro servicio película, quien se encarga de obtener los datos para luego dejarlos a disponibilidad del contenedor,quien los mostrara en nuestra interfaz gráfica
ng g service pelicula/pelicula
pelicula.service.ts
ya casi terminando, creamos nuestro archivo que sera la fuente de datos, en un ambiente productivo sera un servidor:
y dentro de nuestro archivo peliculas.json.ts agregamos
no olvidar reemplazar todo el código de nuestro app.component.html por:
<app-lista-pelicula></app-lista-pelicula>
opcionalmente puedes agregar bootstrap para el diseño, esto lo agregas en el archivo index.html agregando en el head:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>y listo!!! ya podemos ejecutar. Para eso nos pocisionamos con nuestra terminal en la carpeta raiz de nuestro proyecto y tecleamos:
ng serve --open --port 4300
No olvides darle un like y cualquier sugerencia sera bienvenida :D.
Repositorio GitHub:
https://github.com/jrgdonoso/app-observable-subcripcion.git
Demo:
Comentarios
Publicar un comentario