使用Visual Studio Code開發Angular 2專案 | angular vscode
Angular2於9/13推出RC7,許多人還在懷疑該不會一直到RC18吧?說時遲那時快,Angular2Team忽然在兩天後中秋節這天,閃電宣佈Angular2.0進入正式版!身為開發老兵,近年已鮮少加入Beta、TechPreview版先鋒部隊拓荒,習慣等正式版再認真以待,一則避免發展早期規格一變再變白走冤枉路,二則愈晚開始,規格、工具愈成熟,參考資源也愈多。雖依黑暗技術守則第15條:「早學搶先機,晚學撿便宜」,但NG2已成為工作專案的正式選項,只能乖乖面對新挑戰,看開發教學配月餅文旦,正式步上NG2學習之路。Angular2官網有個Angular2QuickStart教學[1...
Angular 2於9/13推出RC7,許多人還在懷疑該不會一直到RC18吧?說時遲那時快,Angular 2 Team忽然在兩天後中秋節這天,閃電宣佈Angular 2.0進入正式版!
身為開發老兵,近年已鮮少加入Beta、Tech Preview版先鋒部隊拓荒,習慣等正式版再認真以待,一則避免發展早期規格一變再變白走冤枉路,二則愈晚開始,規格、工具愈成熟,參考資源也愈多。雖依黑暗技術守則第15條:「早學搶先機,晚學撿便宜」,但NG2已成為工作專案的正式選項,只能乖乖面對新挑戰,看開發教學配月餅文旦,正式步上NG2學習之路。
Angular 2官網有個Angular 2 Quick Start 教學[1],其中有個My First Angular 2 App範例,算是新手村第一站,決定以它為對象,練習從無到有建立一個NG2專案。
初步評估,現階段Visual Studio Code[2]對NG2開發的支援較VS2015成熟完整,是IDE的首選。加上體驗過用VSCode 偵錯node.js[3],也算有一丁點基礎(其實只有0.5公分高吧 Orz),就決定是它了!
在網路上找到一段VSCode Angular2 First App Example 影片教學[4],一步步跟著做,踩了一些雷,總算有驚無險在VS Code完成我第一個NG2專案。影片一鏡到底,從無到有建立網站進行測試,講得很完整,但NG2及VSCode在影片錄製之後有些小改變,另外開發環境差異可能導致錯誤,故我還是做了重點整理,提供想用VSCode開發NG2的捧油參考。
開始前請先安裝node.js[5]及Visual Studio Code[6] 建一個FirstApp空白資料夾 使用VSCode開啟資料夾 在VSCode加入package.json等檔案 NG2教學網站的原始碼旁邊有個Copy Code按鈕,可省下選取及按Ctrl-C的步驟,請多加利用。 依序加入package.json、tsconfig.json、typings.json、systemjs.config.js(最後一個是js不是json哦)。 開啟DOS視窗,執行npm install,npm會依package.json列舉清單,下載所需的套件:...