Angular 搭建環(huán)境

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

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

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

前提條件

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

• JavaScript
• HTML
• CSS

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

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

• Node.js

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

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

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

• npm 包管理器

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

安裝 Angular CLI

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

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

npm install -g @angular/cli

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

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

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

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

ng new my-app

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

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

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

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

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

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

cd my-app
ng serve --open

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

?--open?（或者只用 ?-o? 縮寫）選項(xiàng)會(huì)自動(dòng)打開你的瀏覽器，并訪問 ?http://localhost:4200/?。

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