Conceptos básicos de Angular: cómo agregar enrutamiento
Pasar de una página a otra es una tarea bastante fundamental para una aplicación web. Afortunadamente, Angular tiene un excelente soporte para enrutamiento.
Si está creando una aplicación Angular con varias páginas, debe utilizar el enrutamiento para navegar entre ellas. Puede hacer esto creando una lista de rutas con una ruta para cada página en el módulo de enrutamiento.
Luego puede dirigirse a otras páginas dentro de un archivo HTML utilizando una etiqueta de anclaje. También puede enrutar a otras páginas dentro de un archivo TypeScript, utilizando el método router.navigate().
Cómo crear una nueva página en una aplicación angular
Primero, cree una nueva aplicación Angular. También puedes utilizar uno existente. Si no está familiarizado con cómo crear una nueva aplicación Angular, puede aprender sobre ella junto con otros conceptos introductorios utilizados en Angular.
Cree un nuevo componente en su aplicación Angular usando el comando ng generate componente:
ng generate component home
-
Abra el archivo src/app/home/home.component.html y reemplace el contenido actual con contenido nuevo.
<div class="content"> <h2> Home </h2> <p> I am a photographer that does wedding photography. Check out my projects! </p> <div class="card"> <h4> John & Amy </h4> <p> Blue Mountains, Australia </p> </div> <div class="card"> <h4> Ross & Rach </h4> <p> Hunter Valley Gardens, Australia </p> </div> </div>
Complete el archivo src/app/home/home.component.css con estilo para el contenido HTML.
.content { line-height: 2rem; font-size: 1.2em; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); width: 400px; padding: 16px; margin: 24px 0px; background-color: whitesmoke; font-family: sans-serif; }
Cree otro componente usando el comando ng generate componente en la terminal. Utilizará el nuevo componente como una página acerca de.
ng generate component about
Abra el archivo src/app/about/about.component.html y reemplace el contenido actual con contenido nuevo.
<div class="content"> <h2> About Me </h2> <p> I'm John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media: </p> <a href=""> Facebook </a> <a href=""> LinkedIn </a> <a href=""> Instagram </a> </div>
Complete el archivo src/app/about/about.component.css con estilo para el contenido HTML.
.content { line-height: 2rem; font-size: 1.2em; }
Cómo navegar entre las dos páginas
Puede utilizar el enrutamiento para navegar de una página a otra. Puede configurar esto en un archivo de enrutamiento. Este ejemplo tendrá un archivo de enrutamiento para toda la aplicación, ubicado en src/app/app-routing.module.ts.
Si su aplicación aún no tiene el archivo del módulo de enrutamiento de aplicaciones, puede generar uno usando el comando ng generate module. En una línea de comando o terminal, navegue hasta la carpeta raíz de la aplicación y ejecute el siguiente comando:
ng generate module app-routing --module app --flat
Esto creará un archivo app-routing.module.ts en su carpeta src/app .
En la parte superior del archivo, agregue importaciones adicionales para los componentes Inicio y Acerca de. Asegúrese de importar también RouterModule y CommonModule; En última instancia, sus declaraciones de importación deberían verse así:
import { CommonModule } from '@angular/common'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component';
-
Debajo de las importaciones, agregue una nueva matriz de rutas para almacenar las rutas que utilizará al dirigirse a cada página.
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent } ];
Reemplace el bloque NgModule con lo siguiente, que agrega RouterModule a la matriz de importaciones y exportaciones.
@NgModule({ declarations: [], imports: [ CommonModule, RouterModule.forRoot(routes) ], exports: [RouterModule] })
En el archivo src/app/app.component.html, elimine el contenido actual y agregue la etiqueta router-outlet.
<div class="container"> <router-outlet></router-outlet> </div>
Cómo navegar a la nueva página en un archivo HTML
Para navegar a una página dentro de un archivo HTML, utilice la etiqueta de anclaje. En el atributo href, agregue la ruta que especificó en la matriz de rutas.
En el archivo src/app/app.component.html , agregue dos etiquetas de anclaje antes del div contenedor. Esto le permitirá navegar entre las páginas Inicio y Acerca de.
<div class="navbar"> <a class="link" href="">Home</a> <a class="link" href="/about">About</a> </div>
Agregue algo de estilo al archivo src/app/app.component.css .
.container { margin: 48px 35%; font-family: "Arial", sans-serif; display: flex; flex-direction: column; align-items: center; } .navbar { background-color: darkslategray; padding: 30px 50px; display: flex; align-items: center; font-family: sans-serif; } .link:first-of-type { margin-right: 32px; } .link { color: white; text-decoration: none; font-size: 14pt; font-weight: bold; }
Agregue algo de estilo al margen general de la página en src/styles.css.
body { margin: 0; padding: 0; }
En un símbolo del sistema o terminal, navegue hasta la carpeta raíz de la aplicación Angular. Ejecute la aplicación usando el comando ng server y espere a que termine de compilarse.
ng serve
- En un navegador, escriba la URL localhost en la barra de URL para ver su aplicación. De forma predeterminada, suele ser http://localhost:4200/.
Su sitio web se cargará en la página de inicio.
-
Puede navegar a la página Acerca de haciendo clic en el enlace Acerca de en la barra de navegación.
Cómo navegar a la nueva página en un archivo TypeScript
Hasta ahora, esta demostración utiliza enlaces HTML estándar para proporcionar navegación. Para navegar usando un archivo TypeScript en lugar del archivo HTML, puede usar router.navigate().
En el archivo src/app/app.component.html , elimine las etiquetas de anclaje y reemplácelas con etiquetas de botón. Estos botones tendrán un evento de clic que activa una función llamada clickButton(). Cuando llame a la función clickButton(), agregue la ruta de la ruta URL como argumento.
<button class="link" (click)="clickButton('')">Home</button> <button class="link" (click)="clickButton('/about')">About</button>
Agregue algo de estilo a los botones en el archivo src/app/app.component.css .
button { background-color: black; padding: 4px 8px; cursor: pointer; }
En la parte superior del archivo src/app/app.component.ts , importe el enrutador.
import { Router } from '@angular/router';
Agregue un nuevo constructor dentro de la clase AppComponent e inyecte el enrutador dentro de los parámetros.
constructor(private router: Router) { }
Debajo del constructor, cree una nueva función llamada clickButton(), que navegará a la nueva página según la URL que ingrese.
clickButton(path: string) { this.router.navigate([path]); }
Vuelva a ejecutar el comando ngserve en el símbolo del sistema o en la terminal.
ng serve
Navegue a su sitio web en un navegador. El href ahora se reemplaza por dos botones.
Haga clic en el botón Acerca de. Se dirigirá a la página Acerca de.
Crear varias páginas en una aplicación angular
Puede enrutar entre varias páginas dentro de una aplicación Angular mediante el enrutamiento. Si tiene componentes separados para cada página, puede configurar rutas para sus rutas dentro del módulo de enrutamiento.
Para navegar a otra página a través de un archivo HTML, utilice una etiqueta de anclaje con el atributo href como ruta de acceso a esa página. Para navegar a otra página a través de un archivo TypeScript, puede utilizar el método router.navigate().
Si está creando una aplicación Angular, puede utilizar directivas Angular. Estos le permiten utilizar sentencias if dinámicas, bucles for u otras operaciones lógicas dentro del archivo HTML de un componente.