Angular9 搭建環(huán)境

在正式使用 Angular 框架之前，我們需要搭建本地開(kāi)發(fā)環(huán)境和工作空間。

前提條件

1. 相關(guān)知識(shí)

要想使用 Angular 框架，您必須先熟悉以下技術(shù)：

• HTML5
• CSS3
• javascript

注：
- 關(guān)于 Typescript 只會(huì)非常有用，但非必備技能。

1. 關(guān)于Node.js

確保您的開(kāi)發(fā)環(huán)境中包含了 Node.js 和一個(gè)包管理器。

注：
Angular 需要 Node.js V10.9.0或更高版本。
- 在終端中運(yùn)行 node -v命令可檢查您的 Node.js 版本。
- 若要獲取 Node.js ，請(qǐng)轉(zhuǎn)到 nodejs.org 。

1. npm 包管理器

Angular、Angular CLI 和 Angular 應(yīng)用都依賴于 npm 包中提供的特性和功能。要想下載并安裝 npm 包，您必須擁有一個(gè) npm 包管理器。

注：
在安裝了 Node.js 后會(huì)默認(rèn)安裝 npm 客戶端命令行界面。
- 在終端中運(yùn)行 npm -v命令可檢查您是否成功安裝了 npm 客戶端。

搭建步驟

1. 安裝 Angular CLI

Angular CLI 可以幫助您創(chuàng)建項(xiàng)目、生成應(yīng)用和庫(kù)代碼，以及執(zhí)行各種開(kāi)發(fā) 任務(wù)，比如測(cè)試，打包和部署。

• 使用 npm 命令安裝 CLI ，請(qǐng)打開(kāi)終端輸入如下命令：

npm install -g @angular/cli

2。 創(chuàng)建工作空間和初始應(yīng)用

您要在 Angular 工作區(qū)上下文中開(kāi)發(fā)應(yīng)用，需要?jiǎng)?chuàng)建一個(gè)新的工作空間和初始入門(mén)應(yīng)用。

• 運(yùn)行 CLI 命令 ng new并提供 my-app名稱作為參數(shù)。

ng new my-app

• ng new命令會(huì)提示您提供要將哪些特性包含在初始應(yīng)用中。若無(wú)特殊要求，可按 Enter或Return接受默認(rèn)值。

3. 運(yùn)行應(yīng)用

Angular CLI 中包含一個(gè)服務(wù)器，方便您在本地構(gòu)建和提供應(yīng)用。

• 轉(zhuǎn)到 workspace 文件夾（my-app）。
• 使用 CLI 命令 ng serve和--open選項(xiàng)來(lái)啟動(dòng)服務(wù)器。

cd my-app
ng serve --open

注：
- ng serve命令會(huì)啟動(dòng)開(kāi)發(fā)服務(wù)器、監(jiān)視文件，并在這些文件發(fā)生更改時(shí)重建應(yīng)用。

--open可縮寫(xiě)為-o，該選項(xiàng)會(huì)自動(dòng)打開(kāi)您的瀏覽器訪問(wèn) "http://localhost:4200/" ，網(wǎng)頁(yè)展示如下：