Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
– Developing in Spanish
DEVELOPING IN SPANISH
Enrutamiento
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 1/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
Cuando esté listo los usuarios serán capaces de navegar por la aplicación de este modo:
Añadir AppRoutingModule
Una buena práctica de Angular es cargar y con gurar el enrutador en un módulo separado y al nivel más alto,
que se dedique sólo al enrutamiento y que se importe en AppModule .
Por convenio, el nombre de este módulo es AppRoutingModule y pertence al chero app-routing.mo‐
dule.ts en la carpeta src/app .
Usaremos el CLI para generarlo.
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 2/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
5 imports: [
6 CommonModule
7 ],
8 declarations: []
9 })
10 export class AppRoutingModule { }
En general, no se declaran componentes en un módulo de enrutamiento, así que podemos borrar el array
@NgModule.declarations y también CommonModule .
Con guraremos el enrutador con Routes en RouterModule así que importaremos estos dos símbolos de
la librería @angular/router .
Añade un array @NgModule.exports con RouterModel en él. Exportar RouterModule hace que las di-
rectivas de enrutamiento estén disponibles para los componentes de AppModule que lo necesiten.
AppRoutingModule quedaría así:
Añade rutas
Las rutas indican al enrutador que vistas mostrar cuando un usuario hace clic en un enlace o pegar una URL
en el navegador.
Un Route típico de Angular tiene dos propiedades:
Una vez que hemos terminado esta con guración, el enrutador enlazará esa URL con path: 'heroes' y
mostrará HeroesComponent .
RouterModule.forRoot()
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 3/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
Primero debemos inicializar el enrutador y empezar a escuchar los cambios del navegador.
Añade RouterModule al array @NgModule.imports y con guralo con routes en un solo paso llamando
a RouterModule.forRoot() dentro del array imports , tal que así:
1 imports: [ RouterModule.forRoot(routes) ],
El método se llama forRoot() porque el enrutador se cond gura al nivel raíz (root) de la aplicación.
El método forRoot() proporciona al servicio directivas y proveedores necesarios para el enrutamien-
to y realiza la navegación inicial basándose en la URL actual del navegador.
Añade RouterOutlet
1 <h1>{{title}}</h1>
2 <router-outlet></router-outlet>
3 <app-messages></app-messages>
Hemos eliminado <app-heroes> porque sólo mostraremos HeroesComponent cuando el usuario nave-
gue hasta él.
<router-outlet> le indica al enrutador donde mostrar las vistas enrutadas.
RouterOutlet es una de las directivas que están disponibles en AppComponent porque AppModule im-
porta AppRoutingModule, el cual exportó RouterModule.
Probando
Aún deberíamos estar ejecutando la aplicación con este comando del CLI.
ng serve
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 4/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
Los usuarios no deberían pegar una URL en la barra de direcciones. Debería poder hacer clic en un enlace
para navegar.
Añade un elemento <nav> y dentro de él un elemento <a> que al hacer clic, accione la navegación a He‐
roesComponent . La plantilla AppComponent revisada quedaría así:
1 <h1>{{title}}</h1>
2 <nav>
3 <a routerLink="/heroes">Heroes</a>
4 </nav>
5 <router-outlet></router-outlet>
6 <app-messages></app-messages>
AL atributo routerLink se le asigna el valor /heroes , la cadena que el enrutador enlaza con la ruta a
HeroesComponent . routerLink es el selector para la directiva RouterLink que convierte los clics del
usuario en navegación del enrutador. Es otra de las directivas públicas dentro de RouterModule .
El navegador se actualiza y muestra el título de la aplicación y el enlace a héroes, pero no la lista de héroes.
Haz clic en el enlace. La barra de direcciones se actualiza a /heroes y la lista de héroes aparece.
Puedes conseguir que tanto este enlace como los siguientes tengan mejor aspecto añadiendo estilos CSS
privados a app.component.css , como verás en la revisión nal de código.
EL enroutamiento tiene más sentido cuando hay varias vistas. Por ahora, sólo tenemos la vista de héroes.
Añade un componente para el Cuadro de Mandos DashboardComponent usando el CLI:
ng generate component dashboard
1 <h3>Top Heroes</h3>
2 <div class="grid grid-pad">
3 <a *ngFor="let hero of heroes" class="col-1-4">
4 <div class="module hero">
5 <h4>{{hero.name}}</h4>
6 </div>
7 </a>
8 </div>
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 5/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
8 styleUrls: [ './dashboard.component.css' ]
9 })
10 export class DashboardComponent implements OnInit {
11 heroes: Hero[] = [];
12
13 constructor(private heroService: HeroService) { }
14
15 ngOnInit() {
16 this.getHeroes();
17 }
18
19 getHeroes(): void {
20 this.heroService.getHeroes()
21 .subscribe(heroes => this.heroes = heroes.slice(1, 5));
22 }
23 }
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 6/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
48 padding-right: 20px;
49 }
50 @media (max-width: 600px) {
51 .module {
52 font-size: 10px;
53 max-height: 75px; }
54 }
55 @media (max-width: 1024px) {
56 .grid {
57 margin: 0;
58 }
59 .module {
60 min-width: 60px;
61 }
62 }
*ngFor crea tantos enlaces como haya en el array heroes del componente.
Los enlaces serán bloques de color, como indica dashboard.component.css
Los enlaces aún no llevan a ninguna parte, pero pronto lo harán.
1 getHeroes(): void {
2 this.heroService.getHeroes()
3 .subscribe(heroes => this.heroes = heroes.slice(1, 5));
4 }
Añade una ruta al array AppRoutingModule.routes que enlaza una ruta al DashboardComponent .
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 7/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
Cuando la aplicación arranca, la barra de direcciones del navegador apunta a la raíz de la página web. Esto no
coincide con con ninguna ruta existente, así que el enrutador no navega a ninguna parte. El espacio debajo de
router-outlet está en blanco.
Para hacer que la aplicación navegue automáticamente al Cuadro de Mandos, añade la siguiente ruta al array
AppRoutingModule.Routes .
Esta ruta redirige una URL que coincide con el path vacío a la ruta del path '/dashboard' .
Cuando el navegador se actualiza, el enrutador carga DashboardComponent y la barra de direcciones mues-
tra la URL /dashboard .
El usuario debería ser capaz de navegar de ida y vuelta entre los componentes DashboardComponent y
HeroesComponent haciendo clic en los enlaces en el área de navegación en la parte de arriba de la página.
Añada un enlace de navegación al Cuadro de Mandos en la plantilla del caparazón AppComponent , justo so-
bre el enlace a Heroes.
1 <h1>{{title}}</h1>
2 <nav>
3 <a routerLink="/dashboard">Dashboard</a>
4 <a routerLink="/heroes">Heroes</a>
5 </nav>
6 <router-outlet></router-outlet>
7 <app-messages></app-messages>
Después de que el navegador se actualice puedes navegar libremente entre las dos vistas haciendo clic sobre
los enlaces.
HeroDetailsComponent muestra los detalles del héroe seleccionado. En este momento, code>HeroDetails-
Component sólo puede verse en la parte de abajo de code>HeroesComponent.
El usuario debería ser capaz de llegar a estos detalle de tres maneras:
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 8/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
Cuando el usuario hace clic en un héroe en HeroesComponent , la aplicación debería navegar a HeroDe‐
tailComponent , reemplazando la vista del listado de héroes por la vista del detalle del héroe. EL listado de
héroes ya no debería mostrar detalles, tal y como hace ahora.
Abre la plantilla HeroesComponente (heroes/heroes.component.html) y borra el elemento <app-
hero-detail> del nal.
Hacer clic sobre un héroe ahora no hace nada. Arreglaremos esto pronto, después de activar el enrutamiento
a HeroDetailComponent .
Una URL como ~/detail/11 sería una buena URL para navegar hasta la vista de detalle del héroe con id
igual a 11 .
Abre AppRoutingModule e importa HeroDetailComponent .
Después añade una ruta parametrizada al array AppRoutingModule.routes que coincida con el patrón de
la ruta a la vista del detalle del héroe.
Los dos puntos (:) en path indican que :id es un marcador de posición (placeholder) para un id concre-
to de héroe.
En este punto, todas las rutas de la aplicación están listas.
Los héroes de HeroesComponent son elementos <li> cuyos eventos clic están vinculados al método
onSelect() de los componentes.
1 <ul class="heroes">
2 <li *ngFor="let hero of heroes"
3 [class.selected]="hero === selectedHero"
4 (click)="onSelect(hero)">
5 <span class="badge">{{hero.id}}</span> {{hero.name}}
6 </li>
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 9/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
7 </ul>
Haz que <li> sólo use *ngFor , envuelve el badge y el nombre en un elemento <a> y añadele un atributo
RouterLink que es el mismo que en la plantilla del Cuadro de Mandos.
1 <ul class="heroes">
2 <li *ngFor="let hero of heroes">
3 <a routerLink="/detail/{{hero.id}}">
4 <span class="badge">{{hero.id}}</span> {{hero.name}}
5 </a>
6 </li>
7 </ul>
Tendrás que arreglar la hoja de estilos privada heroes.component.css) para hacer que el listado tenga el
mismo aspecto que antes. Los estilos revisados están en la revisión nal de código al nal de esta página.
HeroDetailComponent enrutable
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 10/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
1 constructor(
2 private route: ActivatedRoute,
3 private heroService: HeroService,
4 private location: Location
5 ) {}
En el ‘enganche de ciclo de vida’ (lifecycle hook) ngOnInit() llama a getHero() y defínelo así:
1 ngOnInit(): void {
2 this.getHero();
3 }
4
5 getHero(): void {
6 const id = +this.route.snapshot.paramMap.get('id');
7 this.heroService.getHero(id)
8 .subscribe(hero => this.hero = hero);
9 }
route.snapshot es una imagen estática de la información de la ruta justo después de que el componente
se haya creado.
paramMap es un diccionario de valores de los parámetros de la ruta, extraídos de la URL. La clave id de-
vuelve el id del héroe a recuperar.
Los parámetros de la ruta son siempre cadenas (strings). El operador de JavaScript (+) convierte la cadena a un
número, que es lo que el id del héroe debería ser.
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 11/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
El navegador se actualiza y la aplicación fallará con un error del compilador. HeroService no tiene el méto-
do getHero() .Ahora lo añadiremos.
Al igual que getHeroes(), getHero() tiene rma asíncrona. Devuelve un héroe simulado como un Obser‐
vable , usando la función de RxJS of() .
Será posible reimplmentar getHero() como una petición Http real sin tener que cambiar el componente
HeroDetailComponent que lo invoca.
Pruébalo
El navegador se actualiza y la aplicación funciona de nuevo. Puedes hacer clic sobre un héroe en el Cuadro de
Mandos o en la lista de héroes y navegar a la vista de detalle de ese héroe.
Si pegas localhost:4200/detail/11 en la barra de direcciones, el enrutador navega hasta la vista de de-
talle del héroe con id:11 , «Mr. Nice».
Haciendo clic en el botón ‘volver’ del navegador, puedes volver a la lista de héroes o el Cuadro de Mandos, de-
pendiendo de que vista nos redirigió a la vista detalle.
Sería conveniente tener un botón en la vista HeroDetail que nos permitiera hacer esto.
Añade un botón volver al nal de la plantilla del componente y vincúlalo al método goBack() del
componente.
Añade un método goBack() a la clase del componente que navegue un paso hacia atrás en el historial del
navegador usando el servicio Location que hemos inyectado previamente.
1 goBack(): void {
2 this.location.back();
3 }
Actualiza el navegador y haz clics. Los usuarios puedes navegar por toda la aplicación, desde el Cuadro de
Mandos a los detalles del héroe y volver, del listado de héroes al mini detalle, a los detalles del héroe y volver
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 12/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
al listado de nuevo.
Hemos cumplido todos los requisitos de navegación que se propuesieron en esta página.
Aquí está el código de los cheros tratados en esta página y tu aplicación debería parecerse a este ejemplo /
descarga ejemplo
AppComponent
1 <h1>{{title}}</h1>
2 <nav>
3 <a routerLink="/dashboard">Dashboard</a>
4 <a routerLink="/heroes">Heroes</a>
5 </nav>
6 <router-outlet></router-outlet>
7 <app-messages></app-messages>
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 14/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
21 color: #607D8B;
22 }
23 nav a:hover {
24 color: #039be5;
25 background-color: #CFD8DC;
26 }
27 nav a.active {
28 color: #039be5;
29 }
DashboardComponent
1 <h3>Top Heroes</h3>
2 <div class="grid grid-pad">
3 <a *ngFor="let hero of heroes" class="col-1-4"
4 routerLink="/detail/{{hero.id}}">
5 <div class="module hero">
6 <h4>{{hero.name}}</h4>
7 </div>
8 </a>
9 </div>
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 15/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
16 box-sizing: border-box;
17 }
18 h3 {
19 text-align: center; margin-bottom: 0;
20 }
21 h4 {
22 position: relative;
23 }
24 .grid {
25 margin: 0;
26 }
27 .col-1-4 {
28 width: 25%;
29 }
30 .module {
31 padding: 20px;
32 text-align: center;
33 color: #eee;
34 max-height: 120px;
35 min-width: 120px;
36 background-color: #607D8B;
37 border-radius: 2px;
38 }
39 .module:hover {
40 background-color: #EEE;
41 cursor: pointer;
42 color: #607d8b;
43 }
44 .grid-pad {
45 padding: 10px 0;
46 }
47 .grid-pad > [class*='col-']:last-of-type {
48 padding-right: 20px;
49 }
50 @media (max-width: 600px) {
51 .module {
52 font-size: 10px;
53 max-height: 75px; }
54 }
55 @media (max-width: 1024px) {
56 .grid {
57 margin: 0;
58 }
59 .module {
60 min-width: 60px;
61 }
62 }
HeroesComponent
1 <h2>My Heroes</h2>
2 <ul class="heroes">
3 <li *ngFor="let hero of heroes">
4 <a routerLink="/detail/{{hero.id}}">
5 <span class="badge">{{hero.id}}</span> {{hero.name}}
6 </a>
7 </li>
8 </ul>
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 17/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
43 position: relative;
44 left: -1px;
45 top: -4px;
46 height: 1.8em;
47 min-width: 16px;
48 text-align: right;
49 margin-right: .8em;
50 border-radius: 4px 0 0 4px;
51 }
HeroDetailComponent
1 <div *ngIf="hero">
2 <h2>{{ hero.name | uppercase }} Details</h2>
3 <div><span>id: </span>{{hero.id}}</div>
4 <div>
5 <label>name:
6 <input [(ngModel)]="hero.name" placeholder="name"/>
7 </label>
8 </div>
9 <button (click)="goBack()">go back</button>
10 </div>
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 18/19
20/7/2019 Tutorial Angular – 7. Enrutamiento. – Developing in Spanish
3 display: inline-block;
4 width: 3em;
5 margin: .5em 0;
6 color: #607D8B;
7 font-weight: bold;
8 }
9 input {
10 height: 2em;
11 font-size: 1em;
12 padding-left: .4em;
13 }
14 button {
15 margin-top: 20px;
16 font-family: Arial;
17 background-color: #eee;
18 border: none;
19 padding: 5px 10px;
20 border-radius: 4px;
21 cursor: pointer; cursor: hand;
22 }
23 button:hover {
24 background-color: #cfd8dc;
25 }
26 button:disabled {
27 background-color: #eee;
28 color: #ccc;
29 cursor: auto;
30 }
Resumen
Angular, Tutorial
developinginspanish.com/2018/03/13/tutorial-angular-7-enrutamiento/ 19/19