Enrutamiento en Angular 2

Posted on:15 febrero, 2017

Author:Andros Fenollosa Hurtado

Category:programación

Share: / /

Antes de empezar, es recomendable consultar la siguiente publicación:

https://programadorwebvalencia.com/pequenya-introduccion-de-angular2/

 

Una de las primeras preguntas que nos aborda cuando empezamos con Angular es, ¿cómo conectamos varias páginas html? Nos referimos a estas páginas como las diferentes partes de un sitio web por las que nos movemos cuando navegamos. A continuación, explicaremos de la forma más simple posible como se puede conseguir este objetivo.

Vamos a trabajar con el ejemplo de una página web de una frutería. En la página principal, encontraremos la presentación de la frutería con distintos enlaces a las frutas de las que dispone. Además de la página principal, cada fruta tendrá su página específica.

 

 

Creación de componentes

Empezamos a crear los componentes que necesitamos, en este ejemplo utilizaremos la página principal y una secundaria:

 

<strong>fruteria.component.ts</strong>
import { Component } from '@angular/core';
@Component({
 selector: 'fruteria ',
 template: `
 <h1>Esta es la frutería<h1>
 `,
})
export class FruteriaComponent {
}

 

<strong>manzanas.component.ts</strong>
import { Component } from '@angular/core';
@Component({
 selector: 'manzanas ',
 template: `
 <h1>Estas son las manzanas<h1>
 `,
})
export class ManzanasComponent {
}

 

 

Importación y declaración de componentes

Ahora, es necesario importar estos componentes en el módulo del proyecto para que este tenga constancia de su existencia. Para ello, nos dirigimos al archivo *app.module.ts* e introducimos los imports pertinentes:

 

import { FruteriaComponent } from './fruteria.component';
import { ManzanasComponent } from './manzanas.component';

Además, también es necesario declararlos en el apartado *declarations* del *@NgModule*. La declaración entera con el componente base *AppComponent* tendrá este aspecto:

 

declarations: [ AppComponent, FruteriaComponent, ManzanasComponent ],

 

Enrutamiento (routing)

El siguiente paso es la base de este texto. Creamos un archivo llamado *app.routing.ts*, que se encargará de redirigir las direcciones que introducimos en el navegador. El archivo tiene el siguiente texto:

 

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {FruteriaComponent} from './fruteria.component';
import {ManzanasComponent} from './manzanas.component';

const appRoutes: Routes = [
 {
 path:'',
 component: FruteriaComponent
 },
 {
 path:'manzanas',
 component: ManzanasComponent
 }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

 

Como hemos explicado al inicio, el componente *Frutería* servirá como origen de nuestra página web, es por ello que tiene indicado el *path* (o dirección) base, es decir, en blanco. Este componente aparecerá cuando iniciemos en el navegador la ruta base: *http://<mi-sitio-web>/*

En el otro lado, tenemos la direccion *manzanas* para su correspondiente componente. Es decir, el navegador mostrará la página secundaria para las manzanas cuando aparezca: *http://<mi-sitio-web>/manzanas*.

Recordar que en el template de los componentes hemos introducido html directamente, sin embargo, es mucho más indicado usar una referencia a un archivo html con el código en cuestión con la opción *templateUrl*. Por ejemplo: templateUrl: ‘./fruteria.component.html’.

 

Importación del archivo *routing*

Abrimos otra vez el fichero *app.module.ts* e importamos el archivo de *routing* que acabamos de crear justo debajo de los módulos de *fruteria* y *manzanas*:

 

import {routing} from './app.routing';

 

También lo añadimos a los imports de *@NgModule* en el mismo *app.module.ts* y guardamos el archivo:

 

 imports: [BrowserModule, FormsModule, HttpModule, routing, ],

 

En nuestro proyecto, observamos que existe un archivo *html* llamado *index*, este archivo representa la base de nuestro proyecto web. Si lo abrimos observaremos que contiene la base de un archivo *html* con un elemento *<app-root>* (puede variar) en el *<body>*. Justo antes de la etiqueta del elemento *<app-root>*, introduciremos la siguiente línea que establece la ruta base:

 

&amp;amp;amp;lt;base href="/"&amp;amp;amp;gt;

 

Últimos pasos

Una práctica aceptable es modificar lo menos posible el archivo base *app.component.ts*, para que de esta manera simplemente se encargue de introducir el enrutamiento en nuestra página. Para indicar este funcionamiento, abrimos *app.component.ts* y en la *template* de su componente introduciremos la etiqueta *<router-outlet></router-outlet>*, que es una directiva proporcionada por *RouterModule*. Si el template hacía referencia a un archivo *html* podemos introducirla en este fichero. Nuestro *app.component.ts* debe tener este aspecto:

 

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
 &amp;lt;router-outlet&amp;gt;&amp;lt;/router-outlet&amp;gt;
 `,
})
export class AppComponent {
}

 

Extra: navegación

Finalmente, si queremos añadir navegación a la página base, podemos realizarlo de la forma más simple.Abrimos *app.component.ts* y nos dirigimos a la parte del *template* donde teníamos la línea de *router-outlet*. Justo antes de esta línea podemos introducir dos etiquetas *a* que nos ayudarán a navegar entre las páginas. La parte de template para *app.component.ts* quedrá parecida a la siguiente:

 

 template: `
 &amp;lt;a routerLink="/"&amp;gt;Fruteria&amp;lt;/a&amp;gt;
 &amp;lt;a routerLink="/manzanas"&amp;gt;Manzanas&amp;lt;/a&amp;gt;
 &amp;lt;router-outlet&amp;gt;&amp;lt;/router-outlet&amp;gt;
 `,

 

Con esto terminamos las bases del enrutamiento en Angular 2. Hay que tener en cuenta que de la misma forma que hemos trabajado con el componente de Manzanas, podemos añadir distintos módulos de la misma forma para ampliar nuestro sitio web.

 

Leave a comment