接下來會直接實戰操作NG2的模組化功能

在實戰操作之前要先推薦一個很好用的Visual Studio Code Extension

這是Angular User Group的Kevin大大分享的好用Extension

Angular Doc，這個Extension不只可以幫你產生視覺化的專案架構，它也很完美的整合Angular-Cli的操作，你只要按右鍵就可以產生你要的元件架構在你指定的檔案目錄下，完全不需要打開命令列做操作。

在這次的實戰中，我想要做一個提供旅遊服務的網站，像是KKDay一樣，目前先提供二種服務，一種是提供套裝行程(Tour)，一種是提供旅遊中的各種所需票券(Ticket)，例如迪士尼的門票。

首先我們先用Angular-cli用以下的指令建立專案

ng new my-ng2-lab

裝好Angular Doc後，我們就可以在VSCode的任何一個資料夾按右鍵，快速的產生需要的元件。

假設我現在要產生的是網站的Header，我可以選擇ng g Component的選項，輸入元件名稱，他就會自動產生出來在我剛剛選擇的資料夾底下。

而且不僅僅是產生好檔案結構，它也自動把自己宣告在相關的moudule.ts檔案中，我們可以觀察app.module.ts如下。

是不是超級貼心的呢！只要動動滑鼠就可以完成簡單的專案設定，這個方便的Extension，讓我們更能專心的Focus在專案開發的商業邏輯上。

今天因為時間不多的關係，先讓我寫到這吧，明天再來繼續。

提供今天的Github專案進度檔案