Rutas en Angular ... que son? bueno si vieron en los ejemplos anteriores nosotros creabamos nuestros componentes y los mostrabamos en la pagina a traves de sus selectores app-componente.... Pero como todo proyecto hay muchos componentes y no todos se pueden mostrar al mismo tiempo, por que la pagina seria ilegible, piensen en un formulario de registro, un form de login, etc... El usuario deberia hacer click en el link y poder acceder a dicha seccion, para eso hay que configurar las rutas, crear el modulos etc..etc... para que cuando hagamos click en cualquier link se cargue el componente correspondiente.
Si seguimos la documentacion de Angular los pasos son muy sencillos
Por convención, el nombre de la clase del módulo es AppRoutingModule y pertenece a app-routing.module.ts en la carpeta src / app.
Usa el CLI para generarlo. (escribimos esta linea de comando para que nos genere los archivos necesarios para nuestro modulo de rutas) , podemos tambien hacerlo de forma manual, pero sigamos los pasos que nos suguiere Angular
--flat pone el archivo en src / app en lugar de su propia carpeta.
--module = app le dice a la CLI que lo registre en la matriz de importaciones del AppModule.
Luego de ejecutar la lina de comando ng Angular nos dice que se nos va a crear un archivo con la siguiente estructura llamado src/app/app-routing.module.ts
Si leemos la documentancion (en ingles) nos dice algo asi:
Por lo general, no declara los componentes en un módulo de enrutamiento, por lo que puede eliminar la matriz @ NgModule.declarations y también eliminar las referencias de CommonModule.
Configurará el enrutador con Rutas en el RouterModule para importar esos dos símbolos de la biblioteca @ angular / router.
Agregue una matriz @ NgModule.exports con RouterModule en ella. Exportar RouterModule hace que las directivas de enrutador estén disponibles para su uso en los componentes de AppModule que las necesitarán.
Bien vamos hacerlo en el proyecto que habia mostrado en el ejemplo anterior si no lo vieron les sugiero que vean mis otros post.
Primero escribir en la consola la linea de comandos que nos sugiere Angular
Como se muestra en la imagen le damos enter y nos va a generar los archivos necesarios, en la imagen se observa como los genero.
Y si vemos el app.module.ts observamos que nos importo el modulo necesario para crear nuestrar rutas
Bien que sigue ahora? supongamos que el componente inicio que habiamos creado en el post anterior se va a cargar por defecto seria como nuestro Index, que solo cambiara cuando el usuario haga click en algun link nuevo, entonces lo dejamos cargado como esta y vamos a crear un componente nuevo que seria nuestra barra de navegacion, como no tengo bootstrap ni ningun estivol visual todavia cargado lo que hare sera una lista con algunos links equivalentes a un navbar de html,con el comando ng creo un nuevo componente llamado navbar donde voy a poner los links al estilo barra de navegacion
una vez creado se veria asi :
Bien ahora que nos quedaria? crear los links y obviamente los componentes que que se van a cargar a la hora de hacer click en dichos links basicamente seria repetir el paso anterior ng g c componente1 ...2 ..y 3.. que podrian ser formularios de distintos tipos o secciones etc... no voy hacer captura de eso me voy abocar a mostrar la barra de navegacion o el componente navbar.
Primero vamos a la documentacion de Angular y nos dice que debemos modificar el modulo app-routing.module.ts copiando la siguiente linea de comando deberia verse como abajo importar el routermodule, routes y en el export escribir RouterModule.
En mi caso particular copie y pegue los pasos de la documentancion de Angular sin modificar ni borrar nada del archivo app-routing.module.ts como se muestra en la imagen:
Luego lo que deberiamos hacer es en el mismo archivo importar los componentes que vamos a cargar o sea lo que vamos a mostrar cuando se haga click en algun link de la siguiente manera como se muestra en la imagen. y en la linea que dice { path: '**', redirectTo: 'inicio', pathMatch: 'full' } le indico que si el usuario ingresa una direccion equivocada ** redireccione al componente inicio, ustedes pueden modificarlo por cualquier otro.
Lo que se hizo fue crear una constante llamada routes (pueden cambiar por otro nombre si quieren) donde en un array (arreglo) se van a cargar todas las rutas con sus nombres o alias y sus componentes. En la imagen se ve como quedaria mi app-routing terminado.
Dejo el codigo de mi app-routing por si no se ve bien la imagen
Asi es como quedaria mi componente navbar.component.html donde armo una lista con los links
usamos el tag <a> pero en vez de href, usamos el routerLink
Luego en el app.component.html escribimos el selector app-navbar que nos cargar el componente con la lista de link y no debemos olvidar escribir tambien <router-outlet></router-outlet> que hara que se carguen los componentes al momento de hacer click en el link.
vamos al navegador y miramos como quedo nuestra pagina por defecto esta para que se cargue con el componente de inicio si lo queremos modificar vamos al app-routing y en la linea de redirect cambiamos el componente a mostrar
y como se observa en la siguiente imagen hago click al componente1 y lo muestra en este caso muestra la leyenda que puse por defecto.
Bueno espero que les haya gustado!! comenten dejen puntos!!! jaja que costo mucho armarlo y a los que no les gusta Angular entiendan que hoy las empresas piden mucho de estos Frameworks y no esta de mas que alguien les explique.
Si seguimos la documentacion de Angular los pasos son muy sencillos
Por convención, el nombre de la clase del módulo es AppRoutingModule y pertenece a app-routing.module.ts en la carpeta src / app.
Usa el CLI para generarlo. (escribimos esta linea de comando para que nos genere los archivos necesarios para nuestro modulo de rutas) , podemos tambien hacerlo de forma manual, pero sigamos los pasos que nos suguiere Angular
ng generate module app-routing --flat --module=app
--flat pone el archivo en src / app en lugar de su propia carpeta.
--module = app le dice a la CLI que lo registre en la matriz de importaciones del AppModule.
Luego de ejecutar la lina de comando ng Angular nos dice que se nos va a crear un archivo con la siguiente estructura llamado src/app/app-routing.module.ts
Si leemos la documentancion (en ingles) nos dice algo asi:
Por lo general, no declara los componentes en un módulo de enrutamiento, por lo que puede eliminar la matriz @ NgModule.declarations y también eliminar las referencias de CommonModule.
Configurará el enrutador con Rutas en el RouterModule para importar esos dos símbolos de la biblioteca @ angular / router.
Agregue una matriz @ NgModule.exports con RouterModule en ella. Exportar RouterModule hace que las directivas de enrutador estén disponibles para su uso en los componentes de AppModule que las necesitarán.
Bien vamos hacerlo en el proyecto que habia mostrado en el ejemplo anterior si no lo vieron les sugiero que vean mis otros post.
Primero escribir en la consola la linea de comandos que nos sugiere Angular
Como se muestra en la imagen le damos enter y nos va a generar los archivos necesarios, en la imagen se observa como los genero.
Y si vemos el app.module.ts observamos que nos importo el modulo necesario para crear nuestrar rutas
Bien que sigue ahora? supongamos que el componente inicio que habiamos creado en el post anterior se va a cargar por defecto seria como nuestro Index, que solo cambiara cuando el usuario haga click en algun link nuevo, entonces lo dejamos cargado como esta y vamos a crear un componente nuevo que seria nuestra barra de navegacion, como no tengo bootstrap ni ningun estivol visual todavia cargado lo que hare sera una lista con algunos links equivalentes a un navbar de html,con el comando ng creo un nuevo componente llamado navbar donde voy a poner los links al estilo barra de navegacion
ng g c navbar
una vez creado se veria asi :
Bien ahora que nos quedaria? crear los links y obviamente los componentes que que se van a cargar a la hora de hacer click en dichos links basicamente seria repetir el paso anterior ng g c componente1 ...2 ..y 3.. que podrian ser formularios de distintos tipos o secciones etc... no voy hacer captura de eso me voy abocar a mostrar la barra de navegacion o el componente navbar.
Primero vamos a la documentacion de Angular y nos dice que debemos modificar el modulo app-routing.module.ts copiando la siguiente linea de comando deberia verse como abajo importar el routermodule, routes y en el export escribir RouterModule.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
@NgModule({
exports: [ RouterModule ]
})
export class AppRoutingModule {}
En mi caso particular copie y pegue los pasos de la documentancion de Angular sin modificar ni borrar nada del archivo app-routing.module.ts como se muestra en la imagen:
Luego lo que deberiamos hacer es en el mismo archivo importar los componentes que vamos a cargar o sea lo que vamos a mostrar cuando se haga click en algun link de la siguiente manera como se muestra en la imagen. y en la linea que dice { path: '**', redirectTo: 'inicio', pathMatch: 'full' } le indico que si el usuario ingresa una direccion equivocada ** redireccione al componente inicio, ustedes pueden modificarlo por cualquier otro.
Lo que se hizo fue crear una constante llamada routes (pueden cambiar por otro nombre si quieren) donde en un array (arreglo) se van a cargar todas las rutas con sus nombres o alias y sus componentes. En la imagen se ve como quedaria mi app-routing terminado.
Dejo el codigo de mi app-routing por si no se ve bien la imagen
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Componente1Component } from './componente1/componente1.component';
import { Componente2Component } from './componente2/componente2.component';
import { InicioComponent } from './inicio/inicio.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'inicio', component: InicioComponent },
{ path: 'componente1', component: Componente1Component },
{ path: 'componente2', component: Componente2Component },
{ path: '**', redirectTo: 'inicio', pathMatch: 'full' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes), CommonModule
],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
Asi es como quedaria mi componente navbar.component.html donde armo una lista con los links
usamos el tag <a> pero en vez de href, usamos el routerLink
Luego en el app.component.html escribimos el selector app-navbar que nos cargar el componente con la lista de link y no debemos olvidar escribir tambien <router-outlet></router-outlet> que hara que se carguen los componentes al momento de hacer click en el link.
vamos al navegador y miramos como quedo nuestra pagina por defecto esta para que se cargue con el componente de inicio si lo queremos modificar vamos al app-routing y en la linea de redirect cambiamos el componente a mostrar
y como se observa en la siguiente imagen hago click al componente1 y lo muestra en este caso muestra la leyenda que puse por defecto.
Bueno espero que les haya gustado!! comenten dejen puntos!!! jaja que costo mucho armarlo y a los que no les gusta Angular entiendan que hoy las empresas piden mucho de estos Frameworks y no esta de mas que alguien les explique.