首页 > 代码库 > [Angular 2 Router] Configure Your First Angular 2 Route

[Angular 2 Router] Configure Your First Angular 2 Route

2024-08-14 15:58:04   219人阅读

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

[Angular 2 Router] Configure Your First Angular 2 Route


联系
我们