貼心小語

前面幾篇將 web3.js 的基本功能介紹與實作完畢，已經可以透過這些功能做簡單的 DApp ，我們就來完成區塊鏈履歷的應用吧

系統規劃

與前面幾篇的設計模式差不多，所以我們沿用這些程式碼： type 、 Utils 與 ProviderService 。

模組規劃

前面有提到 Angular 是模組化開發的，所以我們將各個角色會用到的頁面切成獨立模組：

• HomeModule ：首頁模組，查看履歷頁面
• HostModule ：求職者用模組，提供求職者頁面來修改自傳、專業技術與基本聯絡方式
• GovernmentModule ：政府單位用模組，提供政府單位頁面來修改權限、部署求職者履歷合約
• SchoolModule ：教育單位用模組，提供教育單位頁面來設置學生的學歷、修課證明與專業證照
• CompanyModule ：企業單位用模組，提供企業單位頁面來設置員工於該公司的職稱與工作期間

共用 Service 與 Utils 規劃

• ProviderService ：用來取得 Provider 等操作
• Web3Utils ：用來包裝 web3.js 的 util 函式以及其他靜態的方法

types 規劃

• contract.ts ：用來定義與合約相關的資料格式與來源
• ether-unit.ts ：用來定義以太幣的單位
• transaction.ts ：用來定義與交易相關的資料格式
• form.ts： 用來定義在合約中部分列舉
• profile.ts： 用來處理取得履歷合約的資訊

建置模組

透過 AngularCLI 建置模組：

Home

輸入下方指令產生 Home 模組，並透過 --routing 產生相關路由模組：

ng g m modules/main/home --routing

輸入下方指令產生 Component 來作為顯示的頁面，並透過 --flat 來指定不產生資料夾：

ng g c modules/main/home --flat

如果沒有 AutoImport 的話，就手動在 home.module.ts 中引入 HomeComponent ，並在 declarations 中使用：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';

@NgModule({
    declarations: [HomeComponent],
    imports: [
        CommonModule,
        HomeRoutingModule
    ]
})
export class HomeModule { }

在Angular 的世界裡，如果要在模組中靜態載入 Component 就要放入 declarations 中

去設置 home-routing.module.ts ，讓在該模組的根路由下可以顯示 HomeComponent 頁面：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
    { path: '', component: HomeComponent }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomeRoutingModule { }

Host 、 Government 、 School 以及 Company 模組的做法都是一樣的，只是名稱不同，為了不要有太多重複的內容，後面就只列出指令，其餘的步驟與 Home 相同

Host

輸入下方指令產生 Host 模組，並透過 --routing 產生相關路由模組：

ng g m modules/main/host --routing

輸入下方指令產生 Component 來作為顯示的頁面，並透過 --flat 來指定不產生資料夾：

ng g c modules/main/host --flat

Government

輸入下方指令產生 Government 模組，並透過 --routing 產生相關路由模組：

ng g m modules/main/government --routing

輸入下方指令產生 Component 來作為顯示的頁面，並透過 --flat 來指定不產生資料夾：

ng g c modules/main/government --flat

School

輸入下方指令產生 School 模組，並透過 --routing 產生相關路由模組：

ng g m modules/main/school --routing

輸入下方指令產生 Component 來作為顯示的頁面，並透過 --flat 來指定不產生資料夾：

ng g c modules/main/school --flat

Company

輸入下方指令產生 Company 模組，並透過 --routing 產生相關路由模組：

ng g m modules/main/company --routing

輸入下方指令產生 Component 來作為顯示的頁面，並透過 --flat 來指定不產生資料夾：

ng g c modules/main/company --flat

路由配置與延遲載入

Angular 雖然是 SPA 框架，但它可以在前端處理路由變化，不過這樣的代價就是要一次把所有相關的檔案先載完畫面才會出現，還好 Angular 有提供 延遲載入(Lazy Loading) 的機制，來克服這個問題。那什麼是延遲載入呢？簡單來說就是需要使用哪些模組，再針對這些模組做載入的動作，可以加快首次進入畫面的速度，是非常重要且實用的功能！

路由規劃

我們對於路由的設計大致上列成以下幾點：

• / ：載入 HomeModule
• /host ：載入 HostModule
• /government ：載入 GovernmentModule
• /school ：載入 SchoolModule
• /company ：載入 CompanyModule

配置路由

打開 app-routing.module.ts ，並使用 loadChildren 來實作延遲載入，需要特別注意的就是 path 為 ** 的設計表示萬用路由，只要不是上面那些定義的路由都會執行萬用路由的結果，這邊我們是設置跳轉至首頁：

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

const routes: Routes = [
    {
        path: '',
        loadChildren: () => import('./modules/main/home/home.module').then(mod => mod.HomeModule)
    },
    {
        path: 'government',
        loadChildren: () => import('./modules/main/government/government.module').then(mod => mod.GovernmentModule)
    },
    {
        path: 'host',
        loadChildren: () => import('./modules/main/host/host.module').then(mod => mod.HostModule)
    },
    {
        path: 'school',
        loadChildren: () => import('./modules/main/school/school.module').then(mod => mod.SchoolModule)
    },
    {
        path: 'company',
        loadChildren: () => import('./modules/main/company/company.module').then(mod => mod.CompanyModule)
    },
    {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
    }
];

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

這樣就完成我們基本的路由設定了！

今日小結

開始實作 DApp，並規劃系統以及配置路由，不過今天的內容較偏向前端的基本配置，明天開始會搭配 web3.js 來開發！