Angular入門到精通系列教程（4）- 開發環境搭建以及入手專案

Jack Niu發表於2021-01-11
Angular開發環境

瞭解了一些Angular的基本概念後，如果想進一步學習Angular，接下來讓我們來搭建本地開發環境，並從一個入門專案瞭解Angular的基本用法。

環境:

  • Angular CLI: 11.0.6
  • Angular: 11.0.7
  • Node: 12.18.3
  • npm : 6.14.6
  • IDE: VSCode

1. 本地開發環境搭建

本地開發環境搭建只需要node.js, 和Angular CLI。

1.1. node.js

官網（https://nodejs.org/）下載最新的LTS（Long Time Support)版本的node.js，安裝。

說明：

  1. LTS（Long Time Support)版本, 官方會支援更長時間，比如打補丁，改bug等。相對更穩定、靠譜。
  2. node.js 安裝後，同時會安裝npm

檢查本地node.js, npm環境

# node.js 版本
node -v
# npm 版本
npm -v

1.2. Angular CLI

angular-cli又稱 Angular腳手架，是angular開發團隊自行維護的一個開發工具，用於快速生成專案或者元件的框架以提高效率。可以方便的生成angular app、component、service 等等， 並且可以通過引數，按照自己的需求去建立。可以說是angular開發必不可少的利器。(參考：https://cli.angular.io/)

npm安裝最新版本@angular/cli

npm install -g @angular/cli

檢查本地angular環境

ng v

說明：

  1. 該命令如果在非angular專案下執行，返回全域性的Angular CLI環境版本
  2. 在angular專案下執行, 返回當前angular專案使用的angular，angular CLI，以及核心angular元件的版本。
  3. 全域性Angular CLI版本有何能與專案的Angular CLI版本不一致，不衝突。專案中，使用專案制定的CLI版本。

2. 開發工具 - Visual Studio Code

推薦使用，Visual Studio Code （VSCode），微軟開發的，可以說是現今為止最好的免費的Angular開發工具。並且有很多非常好用的外掛。

推薦外掛：

  • Angular Language Service： Angular語法自動提示, Angular開發必備。 This extension provides a rich editing experience for Angular templates, both inline and external templates.
    This extension is brought to you by members of the Angular team. It is fantastic at helping write solid code in the html templates.
  • Prettier - 程式碼自動格式化外掛。VS Code plugin for prettier/prettier, which formats code consistently. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
  • Code Spell Checker - 語法檢查外掛. 註釋可以寫中文，變數名不行吧，如果拼寫不對不好看吧。所以推薦把這個語法檢查外掛裝上。
  • GitLens - GIT 輔助外掛。If you use git, this is quite helpful. GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • Markdown All in One： 如果用Markdown寫東西，這個東西一定要有，增加了對MD檔案的很多支援，比如生成目錄(TOC)， 目錄編號等。

第一個Anuglar專案

建立第一個anuglar專案

使用Anuglar CLI可以很輕鬆的建立angular專案。使用的Angular版本與當前環境的Anuglar CLI一致。

# 建立angular專案，專案名 ·my-ngular-app·
ng new my-ngular-app
# 進入專案目錄
cd my-ngular-app
# 啟動angualar專案
ng serve

說明

  1. ng 是angular CLI的簡稱
  2. ng serve: 啟動angular專案。

Angular CLI常用命令

  1. ng serve: 啟動angular專案。預設情況下，angular CLI檢測程式碼改動，如果檔案改動，自動編譯更改部分程式碼，然後重新載入（reload）頁面。
  2. ng build: 編譯程式碼，預設輸出到根目錄下的dist目錄。
  3. ng test： 執行單元測試（Unit Test）

線上實戰專案

Angular官方提供了2個新手入門專案，並且都是基於StackBlitz（針對 Web 開發者的線上 IDE），可以不使用本地環境，直接基於Web學習和練習Angular。

新手專案：Basic Angular app

入門專案：Tour of Heroes

相關文章