Angular9 搭建環(huán)境

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

前提條件

1. 相關(guān)知識

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

• HTML5
• CSS3
• javascript

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

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

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

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

1. npm 包管理器

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

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

搭建步驟

1. 安裝 Angular CLI

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

• 使用 npm 命令安裝 CLI ，請打開終端輸入如下命令：

npm install -g @angular/cli

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

您要在 Angular 工作區(qū)上下文中開發(fā)應(yīng)用，需要創(chuàng)建一個新的工作空間和初始入門應(yīng)用。

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

ng new my-app

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

3. 運行應(yīng)用

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

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

cd my-app
ng serve --open

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

--open可縮寫為-o，該選項會自動打開您的瀏覽器訪問 "http://localhost:4200/" ，網(wǎng)頁展示如下：