在 windows 上安裝 angular：angular cli、node.js 和構(gòu)建工具指南

本文翻譯自How to Install angular on Windows: A Guide to Angular CLI, Node.JS, and Build Tools，作者為Ahmed Bouchefra

在本教程中，我們將學(xué)習(xí)如何在 Windows 中安裝 Angular CLI 并使用它來創(chuàng)建 Angular 項(xiàng)目。

什么是 Angular CLI？Angular CLI 是用于初始化和使用 Angular 項(xiàng)目的官方工具。它可以幫助您避免復(fù)雜配置和構(gòu)建工具（如 typescript、webpack 等）的麻煩。

安裝 Angular CLI 后，您需要運(yùn)行一個(gè)命令來生成一個(gè)項(xiàng)目，并運(yùn)行另一個(gè)命令來使用本地開發(fā)服務(wù)器來運(yùn)行您的應(yīng)用程序。

與當(dāng)今大多數(shù)現(xiàn)代前端工具一樣，Angular CLI 構(gòu)建在 Node.js 之上。

Node.js 是一種服務(wù)器技術(shù)，允許您在服務(wù)器上運(yùn)行 JavaScript 并構(gòu)建服務(wù)器端 Web 應(yīng)用程序。然而，Angular 是一種前端技術(shù)，因此即使您需要在開發(fā)計(jì)算機(jī)上安裝 Node.js，它也僅用于運(yùn)行 CLI。

一旦構(gòu)建了用于生產(chǎn)的應(yīng)用程序，您將不需要 Node.js，因?yàn)樽罱K的捆綁包只是靜態(tài) html、css 和 JavaScript，可以由任何服務(wù)器或 CDN 提供服務(wù)。

盡管如此，如果您正在使用 Angular 構(gòu)建全棧 Web 應(yīng)用程序，并且您喜歡使用 JavaScript 作為前端和后端，則可能需要 Node.js 來創(chuàng)建后端部分。

查看 MEAN 堆棧——它是一個(gè)包含 mongodb、express（構(gòu)建在 Node.js 之上的 Web 服務(wù)器和 REST API 框架）和 Angular 的架構(gòu)。如果您想要逐步入門教程，可以閱讀本文。

在本例中，Node.js 用于構(gòu)建應(yīng)用程序的后端部分，并且可以替換為您想要的任何服務(wù)器端技術(shù)，例如 php、ruby 或 Python。但 Angular 不依賴 Node.js，除了它的 CLI 工具和從 npm 安裝包。

npm 代表 Node 包管理器。它是托管 Node 包的注冊(cè)表。近年來，它還被用來發(fā)布前端包和庫，如 Angular、React、vue.js 甚至 Bootstrap。

注意：您可以免費(fèi)下載我們的《Angular 8 書：使用 Angular 8 構(gòu)建您的第一個(gè) Web 應(yīng)用程序》。

在 Windows 上安裝 Angular CLI首先，您需要在開發(fā)計(jì)算機(jī)上安裝 Node 和 npm。有很多方法可以做到這一點(diǎn)，例如：

使用 NVM（Node 版本管理器）在系統(tǒng)中安裝和使用多個(gè)版本的 Node，使用對(duì)應(yīng)的操作系統(tǒng)的官方包管理器從官方網(wǎng)站安裝它。讓我們保持簡(jiǎn)單并使用官方網(wǎng)站。只需訪問下載頁面并獲取 Windows 的二進(jìn)制文件，然后按照安裝向?qū)Р僮骷纯伞Ｄ梢酝ㄟ^在命令提示符中運(yùn)行以下命令來確保系統(tǒng)上安裝了 Node，該命令應(yīng)顯示已安裝的 Node 版本：

$ node -v

接下來，運(yùn)行以下命令來安裝 Angular CLI：

$ npm install @angular/cli

命令成功完成后，您應(yīng)該已經(jīng)安裝了 Angular CLI。

Angular CLI 快速指南安裝 Angular CLI 后，您可以運(yùn)行許多命令。讓我們首先檢查已安裝的 CLI 的版本：

$ ng version

如下圖所示：

ng version您可能需要運(yùn)行的第二個(gè)命令是 help 命令，用于獲取完整的使用幫助：

$ ng help

ng help CLI 提供以下命令： add: 向您的項(xiàng)目添加對(duì)外部庫的支持。 build (b): 將 Angular 應(yīng)用程序編譯到給定輸出路徑上名為 dist/ 的輸出目錄中。必須從工作空間目錄中執(zhí)行。 config: 檢索或設(shè)置 Angular 配置值。

doc (d): 在瀏覽器中打開 Angular 官方文檔 (angular.io)，并搜索給定的關(guān)鍵字。

e2e (e): 構(gòu)建并提供 Angular 應(yīng)用程序，然后使用 Protractor 運(yùn)行端到端測(cè)試。

generate (g): 根據(jù)原理圖生成和/或修改文件。

help: 列出可用命令及其簡(jiǎn)短描述。

lint (l): 在給定項(xiàng)目文件夾中的 Angular 應(yīng)用程序代碼上運(yùn)行 linting 工具。

new (n): 創(chuàng)建一個(gè)新的工作區(qū)和一個(gè)初始的 Angular 應(yīng)用程序。

run: 運(yùn)行項(xiàng)目中定義的自定義目標(biāo)。

serve (s): 構(gòu)建并服務(wù)您的應(yīng)用程序，根據(jù)文件更改進(jìn)行重建。

test (t): 在項(xiàng)目中運(yùn)行單元測(cè)試。

update: 更新您的應(yīng)用程序及其依賴項(xiàng)。請(qǐng)參閱https://update.angular.io/

version (v): 輸出 Angular CLI 版本。

xi18n: 從源代碼中提取 i18n 消息。

生成項(xiàng)目您可以使用 Angular CLI 通過在命令行界面中運(yùn)行以下命令來快速生成 Angular 項(xiàng)目：

$ ng new frontend

注意：frontend是項(xiàng)目的名稱。當(dāng)然，您可以為您的項(xiàng)目選擇任何有效的名稱。由于我們將創(chuàng)建一個(gè)全棧應(yīng)用程序，因此我使用 frontend 作為前端應(yīng)用程序的名稱。

如前所述，CLI 會(huì)詢問您是否要添加 Angular 路由？，您可以通過輸入 y（是）或 n（否）來回答，這是默認(rèn)選項(xiàng)。它還會(huì)詢問您要使用的樣式表格式（例如 CSS）。選擇您的選項(xiàng)并按 Enter 鍵繼續(xù)。

ng new frontendfrontend Angular 1目錄結(jié)構(gòu)之后，您將使用目錄結(jié)構(gòu)和一堆配置和代碼文件創(chuàng)建項(xiàng)目。它將主要采用 TypeScript 和 json 格式。我們看看各個(gè)文件的作用：

/e2e/：包含網(wǎng)站的端到端（模擬用戶行為）測(cè)試/node_modules/：使用 npm install 將所有第三方庫安裝到此文件夾/src/：包含應(yīng)用程序的源代碼。大部分工作將在這里完成/app/：包含模塊和組件/assets/：包含圖像、圖標(biāo)和樣式等靜態(tài)資源/environments/：包含環(huán)境（生產(chǎn)和開發(fā)）特定的配置文件browserslist：autoprefixer 需要 CSS 支持favicon.ico：網(wǎng)站圖標(biāo)index.html：主要的 HTML 文件karma.conf.js：Karma（測(cè)試工具）的配置文件main.ts：AppModule 引導(dǎo)的主啟動(dòng)文件polyfills.ts：Angular 所需的 polyfillstyles.css：項(xiàng)目的全局樣式表文件test.ts：這是 Karma 的配置文件tsconfig.*.json：TypeScript 的配置文件angular.json：包含 CLI 的配置package.json：包含項(xiàng)目的基本信息（名稱、描述和依賴項(xiàng)）README.md：包含項(xiàng)目描述的 markdown 文件tsconfig.json：TypeScript 的配置文件tslint.json：TSlint（靜態(tài)分析工具）的配置文件為您的項(xiàng)目服務(wù)Angular CLI 提供了一個(gè)完整的工具鏈，用于在本地計(jì)算機(jī)上開發(fā)前端應(yīng)用程序。因此，您不需要安裝本地服務(wù)器來為您的項(xiàng)目提供服務(wù) —您可以簡(jiǎn)單地從終端使用 ng serve 命令在本地為您的項(xiàng)目提供服務(wù)。

首先導(dǎo)航到項(xiàng)目的文件夾中并運(yùn)行以下命令：

$ cd frontend $ ng serve

您現(xiàn)在可以導(dǎo)航到 https://www.php.cn/link/0b49a9811e1fc2a3b5eebf2411061887 地址來開始使用您的前端應(yīng)用程序。如果您更改任何源文件，該頁面將自動(dòng)實(shí)時(shí)重新加載。 運(yùn)行結(jié)果如下圖所示：

ng serve運(yùn)行結(jié)果生成Angular構(gòu)件Angular CLI 提供了 ng generate 命令，可幫助開發(fā)人員生成基本的 Angular 構(gòu)件，例如模塊、組件、指令、管道和服務(wù)：

$ ng generate component my-component

my-component 是組件的名稱。 Angular CLI 將自動(dòng)在 src/app.module.ts 文件中添加對(duì)組件、指令和管道的引用。

如果您想將組件、指令或管道添加到另一個(gè)模塊 （主應(yīng)用程序模塊 app.module.ts 除外），您只需在組件名稱前加上模塊名稱和斜杠 即可：

$ ng g component my-module/my-component

my-module 是現(xiàn)有模塊的名稱。

結(jié)論在本教程中，我們了解了如何在 Windows 計(jì)算機(jī)上安裝 Angular CLI，并使用它從頭開始初始化一個(gè)新的 Angular 項(xiàng)目。

我們還看到了您可以在整個(gè)項(xiàng)目開發(fā)過程中使用的各種命令來生成 Angular 工件，例如模塊、組件和服務(wù)。

查看我們的其他 Angular 教程。

您可以通過作者的個(gè)人網(wǎng)站、Twitter、LinkedIn 和 github 聯(lián)系或關(guān)注作者。

參考資料How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools