Tìm hiểu về Router trong Angular 4

Trong quá trình phát triển web, Routing có nghĩa là việc chia ứng dụng thành các phần khác nhau thường dựa theo những rules nhất định dựa vào url hiện tại. Ví dụ: nếu schungs ta truy cập vào đường dẫn "/" của website, chugns ta có thể truy cập tới home pages, hoặc "/about" chúng ta sẽ render ra trang "about page", v.v...

Cấu hình router trong Angular ở fIle app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './project-one/main.component';
import { ContactComponent } from './project-one/contact.component';
import { HoneComponent } from './project-one/home.component';
import { NotFoundComponent } from './project-one/not-found.component';
import { AboutComponent } from './project-one/about.component';
import { AppRoutingModule }     from './app-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    ContactComponent,
    HoneComponent,
    NotFoundComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Các bạn chú ý dòng code sau :

import { RouterModule, Routes } from '@angular/router';

Mình sẽ tách riêng app-routing.modules.ts

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './project-one/main.component';
import { ContactComponent } from './project-one/contact.component';
import { HoneComponent } from './project-one/home.component';
import { NotFoundComponent } from './project-one/not-found.component';
import { AboutComponent } from './project-one/about.component';

const appRoutes: Routes = [
  { path: '',         component: HomeComponent },
  { path: 'contact',  component: ContactComponent },
  { path: 'about',    component: AboutComponent },
  { path: '**',       component: NotFoundComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

 { path: '',         component: HomeComponent }

Dòng code này khi mới vào trang thì nó sẽ gọi HomeComponent nó sẽ chạy lên đầu tiền

Các bạn quen sát ở file main.component.html và main.component.ts Đây là file main.component.ts

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

@Component({
  selector: 'zvn-project-one',
  templateUrl: './main.component.html',
})
export class MainComponent {
}

Đây là file main.component.html

<div class="panel panel-info">
  <div class="panel-heading">
    Header
  </div>
  <div class="panel-body">
    <router-outlet></router-outlet>
  </div>
  <div class="panel-footer">
    <a class="link" routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a class="link" routerLink="/about" routerLinkActive="active menu">About</a>
    <a class="link" routerLink="/contact" routerLinkActive="active menu">Contact</a>
  </div>
</div>

Các bạn chú ý ở dòng code sau :

<router-outlet></router-outlet>

Khi các bạn click vào routerLink="/about" thì nó sẽ gọi component About , khi đó nội dung page about nó sẽ đổ vào phần

<router-outlet></router-outlet>

Thông qua ví dụ này các bạn sẽ biết cách cách cấu hình router trong Angular Mình sẽ chia sẽ source code trong quá trình mình tìm hiểu về Router trong Angualr 4 https://github.com/nguyennhuhaitrieu/angular-router