Saltar al contenido

Configurar rutas en Angular 2

Angular 2

Rutas en Angular2

En esta mini-entrada vamos a ver como poner correctamente las rutas en tu aplicaci贸n desarrollada con Angular2.

Lo he dividido en 3 pasos para que quede bastante detallado, aunque es realmente sencillo.

Para configurar las rutas primero vamos a suponer que tenemos dos nuevos componentes en tu aplicaci贸n web que queremos tener acceso mediante rutas.

Tus componentes nuevos son home.compontent.html y search.component.html
Y se encuentran en app/components/home y app/components/search respectivamente.

Vamos a ver los tres pasos que tienes que realizar.

Primer paso | Fichero app.routes.ts

Primero vamos a crear el fichero de configuraci贸n de rutas, para ello crearemos el fichero app.routes.ts dentro de la carpeta components

En este fichero vamos a importar y configurar las rutas, el c贸digo resultante ser铆a algo as铆:

import { RouterModule, Routes } from '@angular/router';
 
import {HomeComponent} from './components/home/home.component';
import {SearchComponent} from './components/search/search.component';
 
const APP_ROUTES: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'search', component: SearchComponent },
  { path: '**', pathMatch: 'full', redirectTo: '' }
];
 
export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES, {useHash :true});

C贸mo pod茅is ver en la 煤ltima linea de c贸digo este m贸dulo se llamar谩 con la constante APP_ROUTING.

Segundo paso | Importar en app.modules.ts

Ahora abrimos el fichero app.modules.ts y vamos a importar APP_ROUTING.

Ser铆a as铆, habr铆a que importar APP_ROUTING y a帽adirlo a los Imports.

La linea 5 quedar铆a as铆:

import { APP_ROUTING } from ‘./app.routes’;

La linea 18 quedar铆a as铆:

Y en los Import a帽adir铆amos lo siguiente
APP_ROUTING

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { SearchComponent } from './components/search/search.component';
import { NavbarComponent } from './components/common/navbar/navbar.component';
import { APP_ROUTING } from './app.routes';
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SearchComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    APP_ROUTING
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tercer paso | A帽adir ruoter

Ya solo queda un mini pasito, que es a帽adir en tu fichero de la aplicaci贸n la llamada a este componente.

Para eso en app.component.html le a帽adimos lo siguiente :

<router-outlet></router-outlet>

Angular 2

Y listo, con esto tendr铆as importadas las rutas para estos dos nuevos m贸dulos en tu aplicaci贸n desarrollada con Angular2