Manejando rutas con Angular 2

Ejemplo de código que muestra como manejar rutas en Angular 2.

Primero debes de crear el componente que quieres que se muestre en esa ruta.

Si tienes Angular CLI puedes crearlo con el siguiente comando:


ng generate component ruta/componente


En mi caso sería así:


ng g c components/home


Te generará los ficheros .html .css .ts y .spec.ts

Si no utilizas Angular CLI tendrás que generar el .html y .ts a mano.

Este componente queremos que se muestre al inicio de la web y también le vamos a añadir una ruta propia dominio.com/home

El fichero que vamos a crear para manejar las rutas será el fichero app.routes.ts puedes poner el nombre que quieras pero por convención debería llamarse así.

Este fichero llevará el siguiente contenido.

Todas las rutas que vayas a incluir deberás importarlas con el import
y después configurarlas dentro de la constante APP_ROUTES.

Quedaría así:

import { RouterModule, Routes } from '@angular/router';
//rutas
import {HomeComponent} from './components/home/home.component';
 
 
const APP_ROUTES: Routes = [
  // path para el home
  { path: 'home', component: HomeComponent },
 
  // path para cuando no encuentre cualquier ruta
  { path: '**', pathMatch: 'full', redirectTo: 'home' }
];
 
export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);

Ahora quedaría añadir este fichero de configuración de rutas dentro de nuestro app.module.ts

En el fichero app.module.ts tendremos que importar el nuevo componente e importar el fichero de configuración de rutas
Y más abajo declararlos.

Puedes ver el fichero app.module.ts comentado, quedaría así:

 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
 
import { AppComponent } from './app.component';
 
// el nuevo componente
import { HomeComponent } from './components/home/home.component';
// el nuevo fichero de manejo de rutas
import { APP_ROUTING } from './app.routes';
 
@NgModule({
  declarations: [
    AppComponent,
	// declarando el nuevo fichero de rutas
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
	// importando el nuevo fichero de rutas
    APP_ROUTING
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Y con esto tendrás configurado tu ruta home dentro de tu aplicación.