Angular: ¿cómo narices se implementa la navegación?

Siguiendo el curso de Deborah Kurata, en este artículo quiero explicar lo básico que he aprendido:

En la parte 1 vimos lo básico de Angular

En la parte 2 vimos como añadir lógica al html

En la parte 3 vimos el data binding y las pipes

En la parte 4 vimos interfaces, pipes, el ciclo de vida.

En la parte 5 vimos como anidar Component.

Para aprender como compartir datos entre Component es la 6.

Para la parte 7 descubrimos cómo hacer peticiones http.

A los usuarios les gusta la comodidad de tener todas las funciones que necesitan en la misma web. Entonces, cómo logramos tener distintas vistas y páginas, dentro de nuestra web. Para ello aprenderemos en este lección como implementar la navegación mediante el enrutamiento.

Índice(Drive)



Creando los detalles del producto 2

Usando Angular CLI para crear el Component de forma automática 3

Creando el Component 4

Resultado 4

HTML generado 5

Cómo funciona el enrutamiento 12

Configurando rutas 15

Código 23

Enlazando las rutas y las acciones 25

Código 27

Mostrando la vista 29

Código 31

Repasando cómo funciona el enrutamiento 32

Resumen de la lección 35

Arquitectura

Ahora mismo estamos anidando los componentes, por ejemplo las estrellas están dentro de la lista de productos. Nos convendría tener una vista para la portada, otra para la lista de productos, y otra para los detalles de cada producto:

Creando los detalles del producto

Necesitamos crear otros Component para navegar entre ellos:

Usando Angular CLI para crear el Component de forma automática

Primero hay que instalar el programa que nos permite usar la línea de comandos para crear elementos de angular:

Mediante npm install -g @angular/cli lo instalamos en el mismo directorio del proyecto.

Creando el Component

Mediante la instrucción: ng g c products/product-detail.component — flat

Indicamos a angular, que genere, de ahí la g; un Component, la c; en la carpeta products/ y que ese Component se llame product-detail.component ; además escribimos — flat para que no nos cree la carpeta, ya que la tenemos actualmente en el proyecto.

Resultado

Nos crea el estilo, la vista, un test y el Component; además lo enlaza al módulo raíz, AppModule.

HTML generado

Lo cambiamos por algo más interesante:

Mostramos el nombre del producto como título de la página.

Hay que tener en cuenta que las propiedades de los productos se obtienen de una llamada http, y si ésta se demora, tendríamos que el nombre es undefined:

Por tanto al ejecutar la aplicación tendríamos un error.

La autora nos comenta que se podría usar el operador de navegación segura:

La idea es que si la propiedad a la que queremos acceder es null o undefined, el operador de navegación segura nos previene de acceder a la misma, devolviendonos null.

También comenta que se suele usar, pero por ejemplo no permite vincular datos en los dos sentidos, por tanto para los formularios no serviría:

Además es un poco repetitivo tener que incluirlo cada vez:

Otra opción es usar *ngIf

Revisando el archivo del Component, de product details que nos generó, necesitamos incluir las propiedades:

Además hay que tener en cuenta que por defecto nos creó el selector, el cual es útil cuando anidamos un componente dentro de otro, pero en este caso product details es una vista alternativa, es decir, no la vamos a anidar, por tanto borramos:

También observamos que en AppModule nos añadió la referencia al product details:

Cada vez que añadimos un Component hay que asegurarse de enlazarlo a un Module:

Por ejemplo si quisiéramos añadir la portada, habría que hacerlo en AppModule:

Cómo funciona el enrutamiento

Angular se usa para crear aplicaciones web de una sola página, esto quiere decir que todo lo visible está en una sola vista, lo que ocurre es que ésta se modifica mostrando y quitando en cada momento partes de la misma.

La idea es configurar una ruta para cada component que tenemos. Luego hay que definir una forma de llegar a esa ruta, por ejemplo un menú. Después hay que enlazar la ruta al menú. A continuación se activa la ruta en función de las acciones del usuario. Por último se logra mostrar el component que toca.

Primero:

Creamos el menú y le enganchamos a cada opción la ruta.

Yendo a la url:

Inmediatamente angular busca una definición para la ruta que tenga ligada un component:

Cargándose el component:

Mostrando el HTML del mismo:

Para indicar dónde mostrar el resultado existe la directiva:

<router-outlet></router-outlet>

Apareciendo ahí el component:

Configurando rutas

El enrutamiento se basa en components así que hay que definir una ruta para cada uno:

Primero hay que registrar el servicio que nos ofrece angular para el enrutamiento:

Lo hacemos en el único módulo que tenemos por ahora, AppModule.

Además otro efecto que logramos es:

Al importar el servicio, nos permite usar las directivas [routerLink] y <router-outlet></router-outlet> en cada componente que está declarado en éste módulo.

También se logra:

Exponer las rutas configuradas, es decir, validar si están disponibles en nuestra aplicación, y en caso de que estén usarlas para navegar.

Usamos esa validación pasándole las rutas mediante un array:

Dentro de esas rutas se incluyen tantos objetos como rutas tengamos:

La clave path: indica el segmento de url que se pone al final de la misma, es decir detectar cuándo ponemos ese trozo de url al final de la misma:

Luego se especifica el component a cargar:

Por tanto esta url quedaría:

Además se pueden pasar parámetros por la url mediante :nombrePropiedad

Entonces se lee el id del component y se muestra por la url

Se puede definir una ruta por defecto, dejando path: ‘’ y añadiendo el redirectTo: nombreComponent.

pathMatch: ‘full’ sirve para indicar que sólo queremos que redireccione cuando la url tras el .com esté totalmente vacía.

Los dobles asteriscos expresan que cualquier ruta que pongamos al final se redirige al component:

Además, el orden de las rutas importa, porque se ejecutan por orden, es decir, que nos conviene poner las más específicas al principio y las generales, al fondo, para que se ejecuten todas:

Al haber creado el index.html en su momento mediante angular cli, se escribió de forma automática la ruta base:

Código

Primero hay que importar el router en AppModule:

Luego añadimos las rutas mediante forRoot([])

Enlazando las rutas y las acciones

El usuario tiene varias opciones para navegar:

Puede pulsar en menús, enlaces, imágenes o botones que activan una ruta. Escribir la url en la barra de direcciones, o crear un bookmark para marca la página. Y puede navegar mediante el historial.

Ya angular se encarga de las dos últimas, así que nosotros necesitamos programar la primera:

En nuestro caso haremos un menú de navegación:

Para implementar el menú, lo hacemos en AppComponent:

Y luego enlazamos cada opción a una ruta:

Código

Ahora en nuestro AppComponent estamos anidando la lista de productos:

Como queremos usar la navegación, ya no necesitaremos el selector de product list:

Entonces creamos el menú en AppComponent:

Como resultado ya lo tenemos visible, pero no funcional:

Sólo queda enlazar la opción del menú a la ruta:

Mostrando la vista

Para ubicar dónde se mostrará la vista, el component cargado, hay que usar <router-outlet></router-outlet>

Código

Ya se cargaría en la portada:

Al presionar Product List:

Repasando cómo funciona el enrutamiento

Al pulsar el usuario el menú, se compone la url:

Cambiándola:

Luego se busca en la definición de las rutas y se escoge la primera que coincida:

Después se crea una instancia del component:

Se inyecta la vista:

Y se muestra el component:

Resumen de la lección

Hemos visto cómo funciona el enrutamiento, cómo se configura, se enlaza y se visualiza.

Como resultado ya nuestra aplicación tiene varias vistas:

Repositorio de la autora para los archivos de inicio

https://github.com/DeborahK/Angular-GettingStarted

Repositorio propio

https://github.com/YoneMoreno/LearningAngular