搭建本地開發(fā)環(huán)境和工作區(qū)

本指南講解了如何使用 Angular CLI 工具搭建你的 Angular 開發(fā)環(huán)境。包括：前提條件、安裝 CLI、創(chuàng)建初始工作區(qū)和入門應(yīng)用，以及在本地運行這個應(yīng)用來驗證你的搭建成果。

學(xué)習(xí) ANGULAR
如果你不熟悉 Angular，可能要從立即嘗試！開始，它可以在查看和修改一個現(xiàn)成的基礎(chǔ)版在線商店的上下文中介紹 Angular 的要點。這個獨立的教程利用交互式的 StackBlitz 環(huán)境進(jìn)行在線開發(fā)。在你準(zhǔn)備好這些之前，無需設(shè)置本地環(huán)境。

前提條件

要想使用 Angular 框架，你要先熟悉下列技術(shù)：

• JavaScript
• HTML
• CSS

關(guān)于 TypeScript 的知識會很有用，但不是必須的。

要想在你的本地系統(tǒng)中安裝 Angular，需要如下步驟：

• Node.js

Angular 需要 Node.js 的活躍 LTS 版或維護(hù)期 LTS版。

關(guān)于具體版本需求，參閱 package.json 文件中的 ?engines?。

要了解如何安裝 Node.js，參閱 nodejs.org。 如果你不確定系統(tǒng)中正在運行的 Node.js 版本是什么，請在終端窗口中運行 ?node -v?。

• npm 包管理器

Angular、Angular CLI 以及 Angular 應(yīng)用都要依賴 npm 包來實現(xiàn)很多特性和功能。要下載并安裝 npm 包，你需要一個 npm 包管理器。本指南使用 npm 客戶端命令行界面，該界面默認(rèn)安裝在 ?Node.js?。要檢查你是否安裝了 npm 客戶端，請在終端窗口中運行 ?npm -v? 。

安裝 Angular CLI

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

要使用 ?npm ?命令安裝 CLI，請打開終端/控制臺窗口，輸入如下命令：

npm install -g @angular/cli

創(chuàng)建工作區(qū)和初始應(yīng)用

你要在 Angular 工作區(qū)的上下文中開發(fā)應(yīng)用。

要創(chuàng)建一個新的工作區(qū)和初始入門應(yīng)用：

1. 運行 CLI 命令 ?ng new? 并提供 ?my-app? 名稱作為參數(shù)，如下所示：

ng new my-app

2. ?ng new? 命令會提示你提供要把哪些特性包含在初始應(yīng)用中。按 Enter 或 Return 鍵可以接受默認(rèn)值。

Angular CLI 會安裝必要的 Angular npm 包和其它依賴包。這可能要花幾分鐘的時間。

CLI 會創(chuàng)建一個新的工作區(qū)和一個簡單的歡迎應(yīng)用，隨時可以運行它。

運行應(yīng)用

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

1. 導(dǎo)航到 workspace 文件夾，比如 ?my-app?。
2. 運行下列命令：

cd my-app
ng serve --open

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

?--open?（或者只用 ?-o? 縮寫）選項會自動打開你的瀏覽器，并訪問 ?http://localhost:4200/?。

如果你的安裝和環(huán)境搭建成功了，就會看到如下頁面：