Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

Manejando rutas con Angular 2

24 marzo, 2019
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.

Angular 2
Quedar铆a as铆:

app.routes.ts
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铆:

app.module.ts
 
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.