本文將從頭開始編寫實際的代碼來完成一個angular2的demo。
題外話是其實angular2官網的快速開始項目已經很酷炫了，但其側重快速二字，只夠拿來練習玩耍，倒是github上確實已經有了一些不錯的angular2-starter。
1. 安裝必要的node環境與npm
當然TS環境也是必須的，目前TS已經更新到了2.1.5+，筆者使用的就是2.1.5版本，且最好使用2.0以上版本的TS，否則會有一些尷尬的問題(包括類型定義以及編譯錯誤)。
2.關於編輯器
筆者使用的是VSCode，使用其他熱門的編輯器都可以自己喜歡就行，甚至可以用VisualStudio(但是在網上見過有人用VS2015來開發涉及到npm包的項目，即使是Mac頂配版也能卡爆炸)。
3. 底層目錄結構
想象自己在寫一個后台語言項目，我們所寫的文件最終都要經過編譯生成目標文件才運行，ng2也是這樣，編寫的是.ts文件，最終由我們配置好的編譯器(webpack)進行編譯生成目標代碼並運行。
所以除了angular2依賴以外，必須配置好底層的webpack。所有的依賴包都通過前面安裝的npm來安裝。下面給出package.json：
package.json
package.json用於管理npm依賴，然后還需要tsconfig.json來配置TS，以及tsconfig.webpack.json來配合webpack編譯：
tsconfig.json
tsconfig.webpack.json
然后是webpack的配置文件，入口為webpack.config.js：
webpack.config.js
此配置文件將根據運行編譯時的參數決定使用開發環境的編譯方式還是生產環境的編譯方式，具體的編譯配置就不貼上來了，可以到文末給出的github地址查看整個項目。
4. angular2的配置
第3節的配置是項目npm依賴、TypeScript以及webpack的配置，給整個項目提供了依賴，並幫助編譯以后會寫的實際項目代碼，與angular2的關系其實不大，但是是angular2項目運行的前提。現在要來配置angular2了，以webpack作為模塊化工具的話，需要一個入口文件index.html以及幾個入口腳本：
main.browser.ts
polyfills.browser.ts
前者的作用是引導angular2程序的運行，后者的作用是管理angular2的所有依賴(由於angular2使用了很多ES新特性，所以需要一些依賴來擴展不支持新特性的瀏覽器的功能)。
實際代碼可能還需要有aot模式的引導文件(預編譯模式，更適用於生產環境，效率高非常多)，以及一個自定義的類型聲明文件(幫助編寫TS代碼)。
5. 實際要寫的代碼——app目錄與assets目錄
配置好所有東西后，就輪到親手來寫angular2代碼了，專門新建一個app目錄來存放這些代碼，以及一個assets文件來存放靜態資源。
一個最簡單的angular2項目需要以下幾個文件：
app.module.ts
app.component.ts
一個是根模塊一個是根組件，在此先不提angular2具體語法，先把項目成功運行起來為重。
為了讓webpack找到我們的angular2代碼，以及成功引導angular2項目，還必須添加一個環境文件以及一個索引文件：
index.ts
environment.ts
下面是現在的文件目錄結構：
現在只要先運行 npm install 安裝好所有npm包，然后運行指令 npm run server:dev 就可以運行起第一個angular2項目了！
后記：
此angular2 demo的配置有使用到AngularClass的hmr插件，並且搭建的目的以學習與總結為主，實際開發中還需要配置單元測試等東西，可以直接查看AngularClass的angular-webpack-starter開源項目，其給出了一套非常完善的angular2啟動項目，值得花費一些時間來看懂。
最后給出此demo的github地址：