¡Aprenda a dominar el enrutamiento angular con nuestro tutorial fácil de seguir! Desde conceptos básicos hasta técnicas avanzadas, lo tenemos cubierto. Comience a crear mejores aplicaciones web hoy.
En un mundo acelerado, ofrecer una experiencia de usuario atractiva y receptiva es vital. Angular es un marco de interfaz de usuario ampliamente utilizado desarrollado y mantenido por Google. A lo largo de los años, Angular ha ganado popularidad desde sus inicios debido a un amplio conjunto de funciones y un sólido apoyo de la comunidad. El enrutamiento es un aspecto crucial de las aplicaciones web modernas que ayuda en las interfaces de usuario dinámicas.
Según la encuesta State of JS 2021 , el marco Angular de Google tuvo un uso del 48,8% como el segundo marco web más popular. Angular ofrece potentes funciones de enrutamiento que facilitan la creación de rutas de navegación complejas y la gestión de contenido dinámico.
Sin más preámbulos, ¡profundicemos en el enrutador Angular!
Conceptos básicos del enrutamiento angular
El enrutamiento se refiere a la navegación entre diferentes páginas o vistas en una aplicación de una sola página, una característica crítica de los servicios de desarrollo de Angular. En un SPA, el contenido de la aplicación se carga dinámicamente sin necesidad de actualizar la página. Angular, como parte de sus servicios de desarrollo, utiliza el enrutador integrado para manejar el enrutamiento en sus aplicaciones. El enrutador Angular asigna URL a componentes. Cada vez que un usuario hace clic en un enlace, el enrutador devuelve la ruta predeterminada asignada a la URL y muestra el componente de aplicación apropiado.
La configuración de la ruta generalmente se define en el archivo app-routing.module.ts. Cada ruta tiene una ruta que se asigna a un componente. Por ejemplo, una ruta a una página del panel tendría la ruta /dashboard y se asignaría a DashboardComponent.
El enrutador Angular hace coincidir la ruta URL con las rutas definidas y carga el componente asociado en la salida del enrutador. La salida del enrutador actúa como un marcador de posición donde se muestra el contenido del componente seleccionado actualmente.
El enrutamiento angular consta de varios componentes principales que trabajan juntos para permitir la navegación dentro de la aplicación. Estos componentes incluyen:
| Componente | Descripción |
| Módulo de enrutador | Proporciona políticas y servicios necesarios para el enrutamiento. |
| Rutas | Estas son rutas individuales definidas en la aplicación. Cada ruta tiene una ruta vinculada a un componente. |
| Salida del enrutador | Esta es una directiva que se utiliza para definir dónde debe mostrarse el componente enrutado en la aplicación. Se coloca en el componente de la aplicación. |
| Enlace de enrutador | Se utiliza para definir enlaces que activan el enrutamiento dentro de una aplicación. |
| Enrutador | Proporciona métodos para navegar entre rutas dentro de una aplicación. |
| Ruta activada | Este es un servicio que proporciona información sobre la ruta actualmente activada. |
Módulo de enrutamiento
Los desarrolladores pueden modularizar la configuración de enrutamiento en una aplicación utilizando el módulo de enrutamiento. Para crear un módulo de enrutador, puede usar Angular CLI para generar un nuevo módulo con el indicador de enrutamiento.
El siguiente comando se utiliza para generar el nuevo módulo.
ng generar módulo app-routing --routing
Después de crear el módulo de enrutamiento, debe importarlo al módulo de la aplicación. A continuación, deberá definir las rutas para la aplicación creando una serie de rutas. Cada objeto Ruta en la matriz de rutas define una ruta y un componente para renderizar.
Una vez definidas las rutas, tendrás que configurarlas llamando al método forRoot del RouterModule. Devuelve un RouterModule configurado, que debe importarse al módulo de la aplicación.
Configurar el enrutamiento angular
Veamos cómo implementar un enrutador Angular en una aplicación del mundo real. Imagine que está creando un sitio web para un restaurante que tiene varias páginas. Tiene una página de inicio, una página de menú y una página de contacto. Desea utilizar un enrutador Angular para mostrar los componentes Angular apropiados. Al hacer esto, los usuarios pueden navegar fácilmente entre páginas.
Requisitos previos
Para implementar el enrutamiento en Angular con éxito, debe tener lo siguiente:
- Node.js: la última versión de Node.js en su máquina
- Un editor de código: cualquier IDE que admita Angular
- npm: Administrador de paquetes de nodo para instalar las dependencias requeridas
- Angular CLI: la última versión que proporciona Angular core
Crear un nuevo proyecto
Cree un nuevo proyecto Angular usando Angular CLI ejecutando el comando en su terminal.
ng nuevo restaurante-sitio web
Ahora puede ver un archivo package.json en el directorio de su proyecto, similar al siguiente:
Tenga en cuenta que las versiones de dependencia se especifican en el archivo anterior. Estas eran las versiones al momento de crear esta guía.
Implementación del módulo de enrutamiento
En el archivo src de la aplicación app.module.ts e importe los módulos RouterModule y Routes para implementar el enrutamiento de aplicaciones.
importar {RouterModule, Rutas} desde '@angular/router';
Ahora agregue RouterModule a la matriz de importaciones en el decorador @NgModule.
@NgModule({
importaciones: (
RouterModule.forRoot(rutas)
),
...
})
Cree un nuevo archivo llamado app-routing.module.ts en la carpeta de la aplicación src y agregue el siguiente código para la configuración de ruta.
importar {NgModule} desde '@angular/core';
importar {Rutas, RouterModule} desde '@angular/router'; importar {HomeComponent} desde './home/home.component';
importar {MenuComponent} desde './menu/menu.component';
importar { ContactComponent } desde './contact/contact.component';
exportar rutas constantes: Rutas = (
{ ruta: '', componente: HomeComponent },
{ ruta: 'menú', componente: MenuComponent },
{ ruta: 'contacto', componente: ContactComponent }
);
@NgModule({
importaciones: (RouterModule.forRoot(rutas)),
exportaciones: (Módulo de enrutador)
})
clase de exportación AppRoutingModule { }
Cree tres nuevos componentes para la página de inicio, la página de menú y la página de contacto. Ejecute los siguientes comandos:
ng generar componente de inicio
ng generar menú de componentes
ng generar contacto de componente
En el archivo app.component.html, agregue el componente RouterOutlet para mostrar el contenido de la ruta actual.
<salida-enrutador></salida-enrutador>
Abra el archivo home.component.html, agregue la directiva RouterLink para crear un enlace a la página del menú. Esta sería la primera ruta cuando se carga la aplicación.
<h2>Restaurante ABC</h2> <p>¡Bienvenidos a nuestro restaurante! Nos especializamos en comida deliciosa y excelente servicio.<br /> Visítenos para disfrutar de una comida que no olvidará.</p><br /> <a routerLink="/menu">Ver nuestro menú</a>
En el archivo menu.component.html, agregue la directiva RouterLink para crear un enlace a la página de contacto.
<h2>Restaurante Abc - Menú</h2> <p>¡Aquí está nuestro menú!</p> <ul> <li>Aperitivos: <ul> <li>Alitas de pollo</li> <li>Palitos de mozzarella</li> </ul> </li> <li>Entre: <ul> <li>Salmón a la parrilla</li> <li>Filete y patatas fritas</li> </ul> </li> <li>Postres: <ul> <li>Pastel de chocolate</li> <li>Pastel de manzana</li> </ul> </li> </ul><br /><a routerLink="/contact">Contáctenos</a>
En el archivo contact.component.html, agregue la directiva RouterLink para crear un enlace a la página de inicio.
<h2>Restaurante Abc - Contacto</h2> <p>Dirección: 123 Calle Principal<br /> Teléfono: 555-1234<br /> Correo electrónico: (correo electrónico protegido)<br /> Horario de atención: lunes a sábado, de 11 a. m. a 10 p. m.</p><br /> <a routerLink=" a Inicio</a>
Inicie la aplicación usando el siguiente comando ng server –open y navegue entre las páginas de inicio, menú y contacto usando los enlaces creados con RouterLink.
Así es como se ve la aplicación en el navegador:
Página de inicio
Página de menú
Pagina de contacto
Si observa la barra de direcciones de su navegador, verá que cada página tiene un segmento de ruta URL diferente.
Conceptos avanzados de enrutamiento angular
Veamos algunos conceptos de enrutamiento avanzados en Angular.
1. Rutas anidadas (rutas secundarias)
El enrutamiento anidado permite a los desarrolladores definir una ruta dentro de una ruta. El objetivo principal de esto es crear una estructura de navegación jerárquica que muestre adecuadamente la jerarquía de varios componentes dentro de la aplicación. Esto facilita la navegación y hace que la configuración del enrutador sea más modular.
Para configurar rutas secundarias al crear rutas, los desarrolladores primero deben definir una ruta principal. Esta ruta principal contiene las rutas secundarias. Están anidados dentro de la ruta principal utilizando la propiedad secundaria. Miremos el siguiente ejemplo para ver cómo se hace esto.
rutas constantes: Rutas = (
{
ruta: 'productos',
componente: ProductosComponente,
niños: (
{ ruta: ':id', componente: ProductDetailsComponent },
{ ruta: '', componente: ProductListComponent }
)
}
);
2. Guardias de ruta
Route Guards permite a los desarrolladores controlar el acceso a las rutas en función de determinadas condiciones. Al establecer condiciones, se crea seguridad adicional y acceso no autorizado en determinadas rutas.
Hay tres tipos principales de guardias de ruta:
- canActivate: determina si se puede activar una ruta.
- canDeactivate: determina si una ruta se puede desactivar.
- canLoad: determina si una ruta se puede cargar de forma diferida.
Veamos el siguiente ejemplo para ver cómo implementarlo.
importar {Inyectable} desde '@angular/core';
importar {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} desde '@angular/router';
importar {Observable} desde 'rxjs';@Injectable({
proporcionado en: 'raíz'
})
la clase de exportación AuthGuard implementa CanActivate {
constructor(enrutador privado: enrutador) {}
puede activar (
siguiente: ActivatedRouteSnapshot,
estado: RouterStateSnapshot): Observable<boolean UrlTree> Promise<boolean UrlTree> boolean UrlTree {
const está registrado en = verdadero; // Comprobar si el usuario ha iniciado sesión
si (está registrado) {
devolver verdadero;
} demás {
devuelve this.router.parseUrl('/login');
}
}
}
3. Carga diferida
La carga diferida permite a los desarrolladores cargar módulos según demanda en lugar de cargarlos todos a la vez. Esto ayuda a disminuir el tiempo de carga inicial de la aplicación y, por lo tanto, carga solo los módulos necesarios a la vez.
Para implementar módulos de carga diferida en angular, deberá crear un módulo de recursos para cada recurso en la aplicación. Luego las rutas se configurarán con la propiedad loadChilden. Veamos un ejemplo.
rutas constantes: Rutas = (
{ ruta: '', componente: HomeComponent },
{ ruta: 'clientes', loadChildren: => import('./clientes/clientes.module').luego(m => m.CustomersModule) },
{ ruta: 'pedidos', loadChildren: => import('./orders/orders.module').luego(m => m.OrdersModule) },
{ ruta: '**', componente: PageNotFoundComponent }
);
4. Parámetros de ruta
Los parámetros de ruta permiten a los desarrolladores pasar datos entre componentes y rutas. Esto permite la navegación dinámica al proporcionar contexto al componente utilizando el parámetro.
Los parámetros de ruta se definen utilizando la sintaxis: en la ruta de la ruta y pueden ser obligatorios u opcionales según la necesidad. Por ejemplo, /products/:id define una ruta con un parámetro de identificación requerido.
Los desarrolladores pueden utilizar ActivatedRoute para acceder a un parámetro de ruta. Esto proporciona acceso a la ruta actual y sus parámetros. Los parámetros de ruta se almacenan en la propiedad params del objeto ActivatedRoute.
Veamos un ejemplo.
rutas constantes: Rutas = (
{ ruta: 'productos/:id', componente: ProductDetailsComponent }
);// ComponenteDetallesdelProducto
importar {Componente, OnInit} desde '@angular/core';
importar {ActivatedRoute} desde '@angular/router';
@Componente({
selector: 'detalles-producto-aplicación',
URL de plantilla: './detalles-producto.component.html',
URL de estilo: ('./detalles del producto.component.css')
})
clase de exportación ProductDetailsComponent implementa OnInit {
ID de producto: cadena;
constructor (ruta privada: ActivatedRoute) { }
ngOnInit {
esta.ruta.params.subscribe(params => {
this.productId = params('id');
});
}
}
En el ejemplo anterior, ProductDetailsComponent accede al parámetro id mediante el servicio ActivatedRoute y se suscribe a los cambios mediante los parámetros observables.
Mejores prácticas para el enrutamiento angular
Estas son algunas de las mejores prácticas que debe seguir:
1. Organización de Rutas y Módulos
Debe separar el módulo de enrutamiento para cada módulo de funciones para mantener el código organizado y más fácil de mantener. Para mejorar el flujo de la aplicación, puede agrupar rutas relacionadas. También debe implementar la carga diferida para cargar módulos a pedido. Esto aumentó el tiempo de carga inicial de la aplicación. Además, es importante utilizar una convención de nomenclatura para las rutas que las haga fáciles de entender y seguir. Esto ayuda a evitar confusiones para usted y otros desarrolladores que puedan estar trabajando en el proyecto.
2. Manejo de errores de ruta y páginas 404
Debe utilizar la ruta comodín ** para capturar todas las rutas que no coinciden. Para que la experiencia del usuario sea más fluida, también puede crear un componente personalizado para mostrar una página 404 cuando no se encuentra una ruta y usar el método Router.navigate para redirigir al usuario a la página 404 personalizada.
3. Mejorar el rendimiento con la precarga de rutas
En la precarga de rutas puedes utilizar la estrategia PreloadAllModules. Esta estrategia precarga todos los módulos en segundo plano. Otra estrategia que puedes utilizar es SelectivePreloadingStrategy. Solo precarga módulos específicos que probablemente se utilizarán, lo que reduce el tiempo de carga inicial. Además, para evitar la precarga de módulos a los que el usuario no tiene acceso, puede utilizar el protector canLoad.
Si sigue las mejores prácticas anteriores, puede crear una aplicación Angular organizada y optimizada.
Prueba de enrutador angular
Prueba unitaria de rutas angulares significa que debe probar la configuración de enrutamiento y verificar que la ruta esté navegando correctamente. Las pruebas de integración incluyen probar el comportamiento de los componentes durante la navegación.
RouterTestingModule se utiliza para implementar pruebas unitarias. Veamos una implementación de ejemplo.
importar {RouterTestingModule} desde '@angular/router/testing';
importar { TestBed } desde '@angular/core/testing';
importar {Enrutador} desde '@angular/router';
importar { AppComponent } desde './app.component';describe('AppComponent', => {
dejar enrutador: enrutador;
dejar accesorio;
antes de cada uno( => {
TestBed.configureTestingModule({
importaciones: (RouterTestingModule.withRoutes()),
declaraciones: (AppComponent)
});
accesorio = TestBed.createComponent(AppComponent);
enrutador = TestBed.inject(Enrutador);
});
it('debe navegar a la ruta de inicio', => {
spyOn(enrutador, 'navigateByUrl');
accesorio.detectChanges;
esperar(router.navigateByUrl).toHaveBeenCalledWith("
});
});
Para probar la integración de sus rutas, puede usar Angular RouterTestingModule y el componente RouterOutlet para verificar que los componentes esperados estén cargados al navegar a una ruta específica. Veamos la implementación.
importar {RouterTestingModule} desde '@angular/router/testing';
importar { TestBed } desde '@angular/core/testing';
importar {Enrutador} desde '@angular/router';
importar { AppComponent } desde './app.component';
importar {HomeComponent} desde './home/home.component';
importar {MenuComponent} desde './menu/menu.component';
importar { ContactComponent } desde './contact/contact.component';describe('AppComponent', => {
dejar enrutador: enrutador;
dejar accesorio;
antes de cada uno( => {
TestBed.configureTestingModule({
importaciones: (
RouterTestingModule.withRoutes((
{ ruta: '', componente: HomeComponent },
{ ruta: 'menú', componente: MenuComponent },
{ ruta: 'contacto', componente: ContactComponent }
))
),
declaraciones: (
componente de aplicación,
componente de inicio,
componente de menú,
Componente de contacto
)
});
accesorio = TestBed.createComponent(AppComponent);
enrutador = TestBed.inject(Enrutador);
});
it('debe cargar el componente de inicio al navegar a la ruta de inicio', => {
accesorio.detectChanges;
enrutador.navigate((''));
accesorio.detectChanges;
const compilado = fix.debugElement.nativeElement;
expect(compiled.querySelector('app-home')).toBeTruthy;
});
it('debe cargar el componente de menú al navegar a la ruta del menú', => {
accesorio.detectChanges;
enrutador.navigate(('/menú'));
accesorio.detectChanges;
const compilado = fix.debugElement.nativeElement;
expect(compiled.querySelector('app-menu')).toBeTruthy;
});
it('debe cargar el componente de contacto al navegar a la ruta de contacto', => {
accesorio.detectChanges;
router.navigate(('/contacto'));
accesorio.detectChanges;
const compilado = fix.debugElement.nativeElement;
expect(compiled.querySelector('app-contact')).toBeTruthy;
});
});
Conclusión
Dominar el enrutamiento Angular es una habilidad esencial para cualquier desarrollador web Angular moderno, incluidos aquellos involucrados en el desarrollo de software Angular de terceros. Dado que el enrutamiento del lado del cliente es la norma, es fundamental comprender cómo crear un enrutamiento dinámico y eficiente en sus aplicaciones. El enrutamiento angular proporciona un conjunto de herramientas potente y flexible para todo tipo de aplicaciones y casos de uso, lo que lo hace particularmente beneficioso para proyectos de desarrollo de software Angular subcontratados.
Hay muchos recursos disponibles para seguir aprendiendo, incluida la documentación oficial de Angular y tutoriales en línea. Es importante contratar una empresa que ofrezca servicios de desarrollo Angular de alta calidad para su proyecto Angular. Antes de hacer esto, también es importante saber si React o Vue es la mejor opción para tu proyecto, en lugar de Angular, ya que cada proyecto tiene necesidades diferentes.
Si te gustó este artículo, mira:
- Estructura de proyecto angular: mejores prácticas para archivos y carpetas
- Inyección de dependencia en Angular: una guía completa
- Dominar el enlace de datos angular: una guía completa para expertos
- Principales bibliotecas y marcos de componentes de Angular UI
- ¿Qué es Angular y por qué su empresa debería considerarlo para su desarrollo?
- Los mejores frameworks Javascript de la actualidad
- Angular para empresas
- ¿Cuál es el mejor framework para el desarrollo web?
