Páginas y rutas Angular SPA

Curso online de introducción a Angular. Cupón descuento: 💸-25€

Curso online avanzado con Angular. Cupón descuento: 💸-30€

paginas-y-rutas-angular-spa

Las aplicaciones Angular 8 son conjuntos de páginas enrutadas en el propio navegador. Son las conocidas SPA, Single Page Applications. Estas apps liberan al servidor de una parte del trabajo, reducen la cantidad de llamadas y mejoran la percepción de velocidad del usuario.

En este tutorial aprenderás a crear una Angular SPA fácilmente usando @angular/router, el enrutador de Angular.

Partiendo de la aplicación tal como quedó en Base para una aplicación Angular. Seguimos usando el concepto de árbol, ahora como analogía de las rutas y las vistas asociadas. Al finalizar tendrás una angular SPA con vistas asociadas a sus rutas.

Código asociado a este tutorial en GitHub: AcademiaBinaria/angular-basic

1. Rutas

Al crear la aplicación hice uso del flag routing true en el comando de generación del CLI. Esto causó la aparición de no uno, sino dos módulos gemelos en la raíz de la aplicación. Has estudiado el AppModule verdadero módulo raíz, y ahora verás en profundidad a su gemelo: el módulo de enrutado AppRoutingModule y el uso que hace del RouterModule.

1.1 RouterModule

AppRoutingModule importa, configura y exportar al RouterModule

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
},
{
path: 'not-found',
loadChildren: () => import('./not-found/not-found.module').then(m => m.NotFoundModule),
},
{
path: 'courses',
loadChildren: () => import('./courses/courses.module').then(m => m.CoursesModule) },
{
path: '**',
redirectTo: 'not-found',
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

Módulos y rutas

1
2
ng g m home --route=home -m app-routing.module.ts
ng g m not-found --route=not-found -m app-routing.module.ts

home.component.html

1
2
3
4
5
6
7
8
9
<h2> Welcome 🏡 !</h2>
<nav>
<p>
<a routerLink="courses/introduccion">💻 Introducción</a>
</p>
<p>
<a routerLink="courses/avanzado">💻 Avanzado</a>
</p>
</nav>

El componente HomeComponent se asocia con la ruta vacía ''
El componente NotFoundComponent se asocia con la ruta 'not-found'

RedirectTo

Nadie va voluntariamente a esa ruta

Sólo los que se pierden

1
2
3
4
{
path: '**',
redirectTo: 'not-found'
}

1.2 Router Outlet

El contenido de main.component.ts, ahora será dinámico

1
2
3
4
5
6
<main>
<p>
Fork this <a href="https://github.com/AcademiaBinaria/angular-basic">Repository</a>
</p>
<router-outlet></router-outlet>
</main>

Por ejemplo el contenido de NotFoundComponent será

1
2
3
<h3>404</h3>
<p> 🧭 not-found works!</p>
<ab-go-home></ab-go-home>

En el src\app\shared\go-home\go-home.component.html

1
<a routerLink=""> Go home 🏠</a>

Es una Directiva

Como un atributo, pero con superpoderes

Por ahora, simplemente mantiene la gestión de las rutas en el lado del navegador.


2 Lazy Loading

Webpack y los bundles por ruta

El enrutador delegado


2.1 Webpack y los bundles por ruta

  • Objetivo: diferir la descarga de las rutas no visitadas

  • Empaquetar cada ruta en un bundle

  • Requiere un módulo por ruta

  • Y un convenio especial con webpack


Crear los componentes en módulos con enrutado

1
ng g m about --route=about -m app-routing.module.ts

Y se configuran las rutas con ‘rutas al módulo’

1
2
3
4
{
path: 'about',
loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
}

2.2 El enrutador delegado

  • loadChildren delega el enrutado en otro módulo; el AboutRoutingModule

Ojo al path. En AboutRoutingModule sería:

1
2
3
4
5
6
const routes: Routes = [
{
path: '',
component: AboutComponent
}
];

Comprobar en ejecución

Los bundles se descargan al navegar por las rutas


3. Rutas anidadas

Children

RouterOutlet anidado


3.1 Children

1
2
ng g c about/about/links
ng g c about/about/info

En about-routing.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const routes: Routes = [
{
path: '',
component: AboutComponent,
children: [
{
path: 'links',
component: LinksComponent
},
{
path: 'info',
component: InfoComponent
}
]
}
];

3.2 RouterOutlet anidado

En AboutComponent :

1
2
3
4
5
6
7
8
9
10
11
12
<h3>About us</h3>
<header>
<p>
<a routerLink="links"
class="button"> Tutorial Links </a>
</p>
<p>
<a routerLink="info"
class="button"> More Info </a>
</p>
</header>
<router-outlet></router-outlet>

class: impact

4. Parámetros

Variables en la ruta

ActivatedRoute


4.1 Variables en la ruta

Dada esta estructura nuevos components

1
ng g m courses --route=courses -m app-routing.module.ts

Podemos gestionar dichas rutas en app-routing.module.ts

1
2
3
4
5
6
const routes: Routes = [
{
path: ':slug',
component: CoursesComponent
}
];

Resuelve rutas como: /courses/introduccion o /courses/avanzado


4.2 ActivatedRoute

Contenido del fichero author.component.ts relacionado con la obtención del parámetro de la ruta activa:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { environment } from '../../environments/environment';
export class CoursesComponent implements OnInit {
course: any;
constructor(route: ActivatedRoute) {
route.params.subscribe(params => {
const courseSlug = params.slug;
this.course = environment.courses.find(c => c.slug === courseSlug);
});
}
ngOnInit() {}
}

Usamos la instancia activateRoute de la clase ActivatedRoute inyectada por el framework según veremos en el tema 5.

Para acceder a datos de la URL activa y mostrar los datos del curso en la vista

1
2
3
4
5
6
7
8
9
<h3>👨‍🎓 {{ course.title }}</h3>
<p>{{course.description}}</p>
<p>
<a href="{{course.url}}"
target="_blank">{{course.url}}</a>
</p>
<p>
<ab-go-home></ab-go-home>
</p>

Enlazamos todo agregando un par de entradas en HomeComponent :

1
2
3
4
5
6
7
8
9
<h2> Welcome 🏡 !</h2>
<nav>
<p>
<a routerLink="courses/introduccion">💻 Introducción</a>
</p>
<p>
<a routerLink="courses/avanzado">💻 Avanzado</a>
</p>
</nav>

Con esto tendrás una aplicación SPA en Angular. Sigue esta serie para añadirle Formularios, tablas y modelos de datos en Angular mientras aprendes a programar con Angular9.Todos esos detalles se tratan en el curso básico online que imparto con TrainingIT o a medida para tu empresa.

Aprender, programar, disfrutar, repetir.
Saludos, Alberto Basalo

Compartir

Código descuento: Curso online de introducción a Angular 💸-25€


Código descuento: Curso online avanzado con Angular 💸-30€

Angular.Builders