Capacitación formadores Generación de

capacidades en el Ecosistema Digital de

Bogotá

Formación especializada TI
 Angular
Framework Front-end
Servicios
Nos sirve para consumir información que este disponible en toda nuestra
aplicación. Generalmente los usamos para consumir APIs que se encuentran en
servidores externos.

En Angular podemos crearlos a través de la con interfaz de línea de comandos

Angular CLI con el comando:

ng generate service [nombre-servicio]

Servicios-importación
Para poder utilizar este servicio que acabamos de generar en los componentes
de nuestra aplicación debemos importarlo en nuestro app.module.ts
Servicios-invocar en un componente
Para poder usarlo en un componente en particular también debemos importarlo
e inyectarlo en el constructor de la clase de dicho componente.
Servicios-definir servicio
Ahora que ya hemos invocado el servicio desde un componente y verificamos que esta
funcionado correctamente ahora si podríamos definir que es lo que queremos consumir a
través de este.
Servicios-consumir
Para consumir el servicio que creamos desde nuestro componente vamos a
crear una variable donde almacenar lo que nos retorna la función del servicio y
vamos acceder a la función por medio de la variable que inyectamos.
Servicio-mostrar en la vista
Ahora que ya hemos consumido el servicio, en este caso en el constructor ya
tenemos los datos traídos de este ahora podemos mostrarlos en la vista a través
de la variable en la que los guardamos.
Rutas Dinámicas
Vamos a usar rutas dinámicas para acceder a diferentes métodos del servicio
por ejemplo para enviar un id en la ruta y obtener información de un miembro del
equipo. Lo primero que necesitamos es un componente donde mostrar nuestras
rutas.
Rutas Dinámicas – definir ruta
Ahora que ya tenemos un componente, vamos a crear la ruta por la cual se
accede a este, pero en la definición de esta ruta vamos a especificar que formato
debe tener esta ruta, donde por ejemplo podemos especificar que viene un id
luego del nombre del componente.
Crear enlaces para las rutas dinámicas
Lo primero es que si no tenemos un id para nuestro recurso, podemos usar el
índice del arreglo. Luego vamos a usar routerLink en una etiqueta ancla, pero
esta vez router link lo vamos a usar como un arreglo ya que vamos a enviar dos
parámetros, el primero el componente y de segundo el id.
Leer ruta dinámica
Para poder leer las variables que vienen a través de una ruta vamos a usar una clase de angular llamada
ActivatedRoute de @angular/router y luego vamos usar esta clase desde nuestro constructor y luego
vamos a ejecutar el método params de esta clase que nos permite acceder a la url junto con los
parámetros, además vamos a suscribir este método y lo vamos a almacenar en una variable llamada
parámetros donde podemos ejecutar alguna función.
Método en el servicio para obtener un miembro
Vamos a complementar nuestro servicio para que ahora podamos guardar en un
objeto un solo miembro del equipo filtrado por su id. Definimos un método que
recibe como parámetro un id y retornamos el miembro al cual le corresponde
esa posición.
Inyectar servicio en el componente equipo
Ya que tenemos el método definido ahora podemos inyectar este servicio en el
componente equipo tal como hicimos en el componente nosotros. Importamos
la clase y luego inyectamos en el constructor.
Consumir nuevo método desde el componente
Ahora que ya tenemos disponible el servicio con su nuevo método en el componente equipo, vamos a
crear en primer lugar una variable donde almacenar el resultado de la función que me entrega un
miembro del equipo, luego vamos a definir la función anónima que parte de los parámetros de la URL
para guardar en esta variable nueva el resultado de la función del servicio así:
Definir vista del componente equipo
Finalmente ahora que tenemos en una variable al miembro del equipo que
solicitamos por la ruta dinámica, podemos definir una vista simple para ver los
datos de miembro del equipo.