[Angular 2 Router] Configure Your First Angular 2 Route

Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and then importing the configured RouterModule into your main App Module.

 

Use the Wiki Search as example project.

Create a HomeComponent to contain every other components. Then in out app.component.html, we can just use router outlet to render the application:

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: '<router-outlet></router-outlet>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

 

app.routes.ts:

import {HomeComponent} from "./home/home.component";
import {RouterModule} from "@angular/router";
const routes = [
  {path: '', component: HomeComponent}
];

export default RouterModule.forRoot(routes);

The defualt component is HomeComponent. Export this config to the app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpModule, JsonpModule} from '@angular/http';

import { AppComponent } from './app.component';
import { SearchBarComponent } from './home/search-bar/search-bar.component';
import { ResultListComponent } from './home/result-list/result-list.component';
import {SharedServiceModule} from "./home/shared/index";
import {CommonModule} from "@angular/common";
import {API_URL} from "./home/shared/constance.service";
import { MdButtonModule } from '@angular2-material/button';
import {MdInputModule} from "@angular2-material/input";
import {MdListModule} from "@angular2-material/list";
import {MdToolbarModule} from "@angular2-material/toolbar";
import { HomeComponent } from './home/home.component';

import appRoutes from './app.routes';

@NgModule({
  declarations: [
    AppComponent,
    SearchBarComponent,
    ResultListComponent,
    HomeComponent
  ],
  imports: [
    MdButtonModule.forRoot(),
    MdInputModule.forRoot(),
    MdToolbarModule.forRoot(),
    MdListModule.forRoot(),
    appRoutes,
    BrowserModule,
    FormsModule,
    CommonModule,
    HttpModule,
    JsonpModule,
    SharedServiceModule.forRoot()
  ],
  providers: [
    {
      provide: API_URL,
      useValue: `https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK`
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Github