[Angular 2 Router] Configure Your First Angular 2 Route

时间：2023-03-09 03:16:53
[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

相关文章