Angular 4 教學 | angular vscode
有不只一位前端工程師問我,為什麼要用VisualStudio2017做為Angular4教學工具,他們又不寫.NET,所以我重新改用VisualStudioCode來做為Angular4教學的開發工具。本篇將介紹如何開始撰寫Angular4(Angular2),包含各項套件的安裝說明及相依關係。前言安裝軟體的部分我就沒有詳細介紹,以下是我使用到的工具跟語言。開發工具:VisualStudioCode。官網下載頁面基本上VSCode就是純文字編輯工具,你要用Sublime、Notepade++、Atom、TextEdit都可以。[1]Nodejs6.9.x以上版本及npm3以上版本。官網下載頁面[2]有很多人問我為什麼不用VSCode來做...
有不只一位前端工程師問我,為什麼要用 Visual Studio 2017 做為 Angular 4 教學工具,他們又不寫 .NET,所以我重新改用 Visual Studio Code 來做為 Angular 4 教學的開發工具。本篇將介紹如何開始撰寫 Angular 4 (Angular 2),包含各項套件的安裝說明及相依關係。
前言安裝軟體的部分我就沒有詳細介紹,以下是我使用到的工具跟語言。
開發工具:
Visual Studio Code。官網下載頁面基本上 VS Code 就是純文字編輯工具,你要用 Sublime、Notepade++、Atom、TextEdit都可以。
[1]Nodejs 6.9.x 以上版本及 npm 3 以上版本。官網下載頁面[2]有很多人問我為什麼不用 VS Code 來做為 Angular 4 的開發工具,因為三個原因:
在我們部門前端工程師要包含 ASP.NET MVC、Web API 等,所以要寫 C# 控制伺服端事件。用不同的 IDE 開發對我們來說並不方便。我從 Visual Studio 2003 就開始用 Visual Studio,用習慣了轉不了。其實是我念舊…Visual Studio 2017 這麼貴,而 VS Code 免費。公司有花錢買 Visual Studio 2017,我當然選貴的用阿!也人問我為什麼不用 Angular CLI,不是 Angular CLI 不好,純粹是我個人是喜歡一步一步自己建置需要的東西。Angular CLI 也是很方便的選擇喔!請參考 Angular CLI 官網[3]
1. 建立專案資料夾新增一個資料夾,然後用 VS Code 打開。可以在左邊的 EXPLORER 看到你開始的資料夾名稱,如下圖:
2. 安裝 npm 套件2.1. 建立 npm package在 VS Code 中按下 Ctrl + ~,可以在 VS Code 中打開 Console 介面。
建立 npm package 指令如下:
執行完就可以看到自動建立了 package.json。如下:
2.2. 開發套件因為要把 TypeScript 的 *.ts 檔案,透...