
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> |
Y listo, con esto tendr铆as importadas las rutas para estos dos nuevos m贸dulos en tu aplicaci贸n desarrollada con Angular2