[Angular2]透過Visual Studio Code來建立 Angular2 Quick Start

本文介紹使用 Visual Studio Code 來建立 Angular2 Quick Start 範例。

一開始就官網建立目錄(我建的是 Angular2SeedWithVSCode),

然後輸入 code . 

就會開啟 Visual Studio Code 了哦!

再來就是將建立 package.json, systemjs.config.js, tsconfig.json 及 typings.json ,

並將官網的內容貼進去並存檔。

再從選單中開啟命令視窗(檢視=>整合式終端機),然後輸入 npm install ,如下,



因為在 package.json 中 postinstall 有設定要再裝 typings  ("postinstall": "typings install"),所以也會有 typings 的目錄哦!

package裝好了之後,就再新增一個 app 的目錄,然後建立 main.ts, app.module.ts 及 app.component.ts ,

並將官網的 Code 貼進去並存檔(可以在 命令視窗中下 npm run tsc ,看看對應的js檔是否有產生出來)。

最後在根目錄新增 index.html 及 styles.css ,並將官網的內容貼上並存檔。

然後在命令視窗中輸入 npm start ,就可以看到簡單結果呈現在 Browser 上面。

因為是下 tsc -w ,所以這時您可以調整 app.component.ts 的 template 的內容,然後存檔,它會馬上編譯並更新在 Browser 中哦!


如果要停止的話,請在命令視窗中輸入 Ctrl + C 再按 y 就可以了。

真的很快就可以完成了哦!

Example: https://github.com/rainmakerho/angular2quickstartVSCode

 

參考資料

Angular 官網

Hi, 

亂馬客Blog已移到了 「亂馬客​ : Re:從零開始的軟體開發生活

請大家繼續支持 ^_^