利用angular4和nodejs-express構建一個簡單的網站（四）—angular路由初步

上一篇文章對用戶發來的註冊和登陸信息進行了處理，並實現了將註冊用戶信息插入到mysql數據庫的數據表和從mysql數據庫的數據表中查詢到用戶的登陸信息並返回用戶認證信息，從這篇起，開始構建前端的登陸和註冊頁面，並實現angular路由。
爲了讓你們可以方便理解，我簡單的畫了一張我這個程序的路由分析圖：

建立初始頁面並設置總路由

初始頁面app.component.html的代碼以下：

<div class="bg">
  <div class="jumbotron jumbotron-fluid text-center">
    <div class="container">
      <h1 class="display-3">{{title}}</h1>
      <p class="lead">{{lead}}</p>
      <hr class="my-4">
      <p class="content">{{content}}
      </p>
    </div>
  </div>
  <router-outlet></router-outlet>
</div>

它是由一個bootstrap的jumbotron組件和一個router-outlet組成，在jumbotron中的標題、lead和內容應該隨着導航到不一樣的頁面而改變，因此我將這3個標籤的內容分別用插值表達式title、lead、content代替。爲了作到這一點，我建立了一個JumbotronServive服務提供商，經過rxjs的消息推送來實現。JumbotronServive的代碼以下：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
export class Jumbotron{
    constructor(
        public title:string,
        public lead:string,
        public content:string
    ){}
}
@Injectable()
export class JumbotronServive{
    private jumbSource = new Subject<Jumbotron>();
    jumb$ = this.jumbSource.asObservable();
    setJumbotron(jumb: Jumbotron){
        this.jumbSource.next(jumb);
    }  
}

首先建立了一個Jumbotron類，包含3個屬性title、lead、content分別對應jumbotron中的標題、lead和內容，而後寫一個服務提供商類，在這個類中聲明瞭一個rxjs的Subject對象(Subject是容許值被多播到多個觀察者的一種特殊的Observable),而後調用Subject的asObservable()聲明一個Observable對象jumb$來訂閱Subject發送的消息。最後聲明一個setJumbotron來發送修改過的Jumbotron對象。在AppComponent類中，咱們就能夠訂閱並更改jumbotron中的標題、lead和內容。代碼以下：

jumServ.jumb$.subscribe(
      jumb=>{
        this.title = jumb.title;
        this.lead = jumb.lead;
        this.content = jumb.content;
      });

router-outlet：路由出口，用於標記該在哪裏顯示視圖，也就是說導航到的全部路由視圖都會在<router-outlet></router-outlet>標籤中顯示。
angular-cli(如下簡稱ng)已經爲咱們寫好了基本的AppModule（Angular程序的根模塊，Angular經過引導根模塊來啓動該應用）,在這裏列出看一下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    JumbotronServive,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule裝飾器將AppModule標記爲 Angular 模塊類（也叫NgModule類）。 @NgModule接受一個元數據對象，告訴 Angular 如何編譯和啓動應用。
@NgModule有如下屬性：

• imports — 本模塊聲明的組件模板須要的類所在的其它模塊，其中最重要的是BrowserModule，這個在每一個在瀏覽器中運行應用都須要它。
• declarations —聲明本模塊中擁有的視圖類，在AppModule中定義了應用的惟一組件AppComponent。
• bootstrap — 根組件，Angular 建立它並插入index.html宿主頁面。
• providers - 服務的建立者，並加入到全局服務列表中，可用於應用任何部分，在這裏加入了JumbotronServive，用於提供bootstrap的jumbotron組件中title、lead、content的更新。

AppRoutingModule是應用的路由模塊，具體代碼：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found.component';
const appRoutes: Routes = [
    {
        path:'',
        redirectTo:'/users',
        pathMatch:'full'
    },
    {path: '**', component: PageNotFoundComponent}
];
@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule{}

首先定義個路由數組，其中的路由對象包括路由路徑（path）、和路由對應的組件（component），由於咱們的網站一打開就進入用戶管理界面，在導航到首頁時須要直接跳轉到users路由，首頁路由（''）沒有對應組件，而是直接跳轉到users路由。path:'**'路由的做用是在找不到任何路由時，訪問PageNotFoundComponent組件。
定義路由數組後，用@NgModule裝飾器導入RouterModule，並將路由數組傳遞給RouterModule的forRoot數組。
最後導出RouterModule模塊。