程式碼已提交至GitHub
就目前為止，demo的結構已經被拆的很細很細。元件、服務、model之間已經分割開來，下一步的目標就是把介面做的好看一點。

目前介面看上去還是太簡單，在這個看臉的世界裡，完全活不下去。

至少做成這個樣子：

在這之前，還可以做一些細微的拆分。

分離V和C

這是目前的主頁元件gundam-host.component.ts，通過註解Component裡的template和匯出的的GundamHostComponent共同組成了MVC裡的V和C。

在目前的寫法裡是沒問題的，因為介面比較簡單。

但是如果介面很複雜，VC擠在一起就又會變的很臃腫。所以在調整介面之前，先把V和C分開。

註解@Component裡除了提供了template屬性外，還提供了temlateUrl屬性。前者通過`（反單引號）包裹html程式碼來標示View，後者直接將指向的html檔案匯入進來成為View。

修改主頁元件步驟：

1. 在host包下，新建html資料夾，資料夾內新建gundam-host.component.html檔案。
   
2. 將gundam-host.component.ts中component屬性裡的html程式碼整個剪下進來。
   
3. 修改template屬性為templateUrl，使其指向剛才新建的檔案：

@Component({
  templateUrl: './html/gundam-host.component.html'
 
,
})

同理，分離detail頁面和app.component.ts元件。

把V和C徹底的分離，以後在V上搞事情就方便多了。

元件巢狀

gundam-host.component.html檔案中的程式碼，看起來有點不妥。雖然就目前而言只是簡單的用一個div包裹了span標籤進行資料展示，但是保不齊就span標籤就會被其他複雜的介面所替代。而主頁本身如果再複雜化（事實上 後期確實變的更復雜了），那麼頁面還是會變的臃腫不堪。

安全起見，先趁著介面簡單的時候把功能單一重複的介面抽提出來，形成另一個元件。這樣host元件最終會被拆分為大大小小的元件，而每一個元件之間相互獨立，以打倒更大程度上的解耦。

angular有自己的一套方法，來解決元件巢狀元件和元件抽提的問題。

這個方法就是Compoent註解中的selector屬性。

其實有關selector，在app.component.ts裡也是有的。

通過在app.component.ts裡宣告selector屬性，在public/index.html裡進行使用，把整個angular的介面給裝了進去。

所以現在覺得angular真的好省心啊，給了一堆積木想怎麼拼就怎麼拼。

下面開始抽提主頁中的列表項，使其成為一個獨立的元件。

新建host-item資料夾，在其下新建gundam-host-item.component.ts檔案，用單獨的html檔案和templateUrl屬性進行VC分離。

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

@Component({
    templateUrl: './html/gundam-host-item.component.html'
})

export class GundamHostItemComponent {

}

將原本gundam-host-item.component.ts中的html程式碼塊複製到gundam-host-item.component.html中去。

新建的類需要在在app.module.ts檔案裡註冊才能使用。（說起來angular也是Googler寫的，我說寫起來怎麼和Android的節奏那麼像似….）

修改gundam-host-item.component.ts中的@Component，增加selector屬性，屬性值設定為my-host-item

@Component({
    selector: 'my-host-item',
    templateUrl: './html/gundam-host-item.component.html'
})

在html中用

<my-host-item></my-host-item>

代替

    <div *ngFor="let gundam of gundams"  [routerLink]="['/detail', gundam.id]">
      <span>
        {{gundam.name}}
      </span>
    </div>

但是是這樣又帶來一個問題，如何把資料傳進去呢？

還是繫結

angular資料倒來倒去，都是通過繫結的方式。既然host-item裡沒有值，那就傳一個進去。

<my-host-item *ngFor="let gundam of gundams"  [routerLink]="['/detail', gundam.id]" [gundam]="gundam"></my-host-item>

[gundam]=”gundam”即是繫結宣告，宣告該元件中有一個名為gundam的屬性，然後將拆解gundams陣列得到的gundam作為值傳遞給my-host-item中的gundam屬性。

現在值已經從頁面裡傳進去了，但是在元件中還是要接收一下，否則會報錯。

具體來說，要把外界的值傳遞給Controller。

在gundam-host-item.component.ts中的inport裡增加input 類，用來進行資料的接收。

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

gundam: Gundam;

定義完畢後，在旁邊增加上@input的註解。

import { Component, Input } from '@angular/core';
import { Gundam } from './../../model/gundam';

@Component({
    selector: 'my-host-item',
    templateUrl: './html/gundam-host-item.component.html'
})

export class GundamHostItemComponent {
    @Input() gundam: Gundam;
}

再進入item的html頁面，刪去多餘*ngfor

<div>
  <span>
    {{gundam.name}}
  </span>
</div>

重新整理頁面，可以正常顯示咯。

又是一頓神拆，先把v和c分離，又進一步把主頁拆成2個元件。這樣就不怕產品經理跳出來說，“我覺得這個主頁的item需要換一下了。”~（當然，其實拿把菜刀放在旁邊是更好的選擇）~

現在，可以使用bootstrap了。