在 windows 上安裝 angular：angular cli、node.js 和構建工具指南
本文翻譯自How to Install angular on Windows: A Guide to Angular CLI, Node.JS, and Build Tools，作者為Ahmed Bouchefra
在本教程中，我們將學習如何在 Windows 中安裝 Angular CLI 并使用它來創建 Angular 項目。
什么是 Angular CLI？Angular CLI 是用于初始化和使用 Angular 項目的官方工具。它可以幫助您避免復雜配置和構建工具（如 typescript、webpack 等）的麻煩。
安裝 Angular CLI 后，您需要運行一個命令來生成一個項目，并運行另一個命令來使用本地開發服務器來運行您的應用程序。
與當今大多數現代前端工具一樣，Angular CLI 構建在 Node.js 之上。
Node.js 是一種服務器技術，允許您在服務器上運行 JavaScript 并構建服務器端 Web 應用程序。然而，Angular 是一種前端技術，因此即使您需要在開發計算機上安裝 Node.js，它也僅用于運行 CLI。
一旦構建了用于生產的應用程序，您將不需要 Node.js，因為最終的捆綁包只是靜態 html、css 和 JavaScript，可以由任何服務器或 CDN 提供服務。
盡管如此，如果您正在使用 Angular 構建全棧 Web 應用程序，并且您喜歡使用 JavaScript 作為前端和后端，則可能需要 Node.js 來創建后端部分。
查看 MEAN 堆棧——它是一個包含 mongodb、express（構建在 Node.js 之上的 Web 服務器和 REST API 框架）和 Angular 的架構。如果您想要逐步入門教程，可以閱讀本文。
在本例中，Node.js 用于構建應用程序的后端部分，并且可以替換為您想要的任何服務器端技術，例如 php、ruby 或 Python。但 Angular 不依賴 Node.js，除了它的 CLI 工具和從 npm 安裝包。
npm 代表 Node 包管理器。它是托管 Node 包的注冊表。近年來，它還被用來發布前端包和庫，如 Angular、React、vue.js 甚至 Bootstrap。
注意：您可以免費下載我們的《Angular 8 書：使用 Angular 8 構建您的第一個 Web 應用程序》。
在 Windows 上安裝 Angular CLI首先，您需要在開發計算機上安裝 Node 和 npm。有很多方法可以做到這一點，例如：
使用 NVM（Node 版本管理器）在系統中安裝和使用多個版本的 Node，使用對應的操作系統的官方包管理器從官方網站安裝它。讓我們保持簡單并使用官方網站。只需訪問下載頁面并獲取 Windows 的二進制文件，然后按照安裝向導操作即可。您可以通過在命令提示符中運行以下命令來確保系統上安裝了 Node，該命令應顯示已安裝的 Node 版本：
$ node -v
接下來，運行以下命令來安裝 Angular CLI：
$ npm install @angular/cli
命令成功完成后，您應該已經安裝了 Angular CLI。
Angular CLI 快速指南安裝 Angular CLI 后，您可以運行許多命令。讓我們首先檢查已安裝的 CLI 的版本：
$ ng version
如下圖所示：
ng version您可能需要運行的第二個命令是 help 命令，用于獲取完整的使用幫助：
$ ng help
ng help CLI 提供以下命令： add: 向您的項目添加對外部庫的支持。 build (b): 將 Angular 應用程序編譯到給定輸出路徑上名為 dist/ 的輸出目錄中。必須從工作空間目錄中執行。 config: 檢索或設置 Angular 配置值。
doc (d): 在瀏覽器中打開 Angular 官方文檔 (angular.io)，并搜索給定的關鍵字。
e2e (e): 構建并提供 Angular 應用程序，然后使用 Protractor 運行端到端測試。
generate (g): 根據原理圖生成和/或修改文件。
help: 列出可用命令及其簡短描述。
lint (l): 在給定項目文件夾中的 Angular 應用程序代碼上運行 linting 工具。
new (n): 創建一個新的工作區和一個初始的 Angular 應用程序。
run: 運行項目中定義的自定義目標。
serve (s): 構建并服務您的應用程序，根據文件更改進行重建。
test (t): 在項目中運行單元測試。
update: 更新您的應用程序及其依賴項。請參閱https://update.angular.io/
version (v): 輸出 Angular CLI 版本。
xi18n: 從源代碼中提取 i18n 消息。
生成項目您可以使用 Angular CLI 通過在命令行界面中運行以下命令來快速生成 Angular 項目：
$ ng new frontend
注意：frontend是項目的名稱。當然，您可以為您的項目選擇任何有效的名稱。由于我們將創建一個全棧應用程序，因此我使用 frontend 作為前端應用程序的名稱。
如前所述，CLI 會詢問您是否要添加 Angular 路由？，您可以通過輸入 y（是）或 n（否）來回答，這是默認選項。它還會詢問您要使用的樣式表格式（例如 CSS）。選擇您的選項并按 Enter 鍵繼續。
ng new frontend
frontend Angular 1目錄結構之后，您將使用目錄結構和一堆配置和代碼文件創建項目。它將主要采用 TypeScript 和 json 格式。我們看看各個文件的作用：
/e2e/：包含網站的端到端（模擬用戶行為）測試/node_modules/：使用 npm install 將所有第三方庫安裝到此文件夾/src/：包含應用程序的源代碼。大部分工作將在這里完成/app/：包含模塊和組件/assets/：包含圖像、圖標和樣式等靜態資源/environments/：包含環境（生產和開發）特定的配置文件browserslist：autoprefixer 需要 CSS 支持favicon.ico：網站圖標index.html：主要的 HTML 文件karma.conf.js：Karma（測試工具）的配置文件main.ts：AppModule 引導的主啟動文件polyfills.ts：Angular 所需的 polyfillstyles.css：項目的全局樣式表文件test.ts：這是 Karma 的配置文件tsconfig.*.json：TypeScript 的配置文件angular.json：包含 CLI 的配置package.json：包含項目的基本信息（名稱、描述和依賴項）README.md：包含項目描述的 markdown 文件tsconfig.json：TypeScript 的配置文件tslint.json：TSlint（靜態分析工具）的配置文件為您的項目服務Angular CLI 提供了一個完整的工具鏈，用于在本地計算機上開發前端應用程序。因此，您不需要安裝本地服務器來為您的項目提供服務 —您可以簡單地從終端使用 ng serve 命令在本地為您的項目提供服務。
首先導航到項目的文件夾中并運行以下命令：
$ cd frontend $ ng serve
您現在可以導航到 https://www.php.cn/link/0b49a9811e1fc2a3b5eebf2411061887 地址來開始使用您的前端應用程序。如果您更改任何源文件，該頁面將自動實時重新加載。 運行結果如下圖所示：
ng serve運行結果生成Angular構件Angular CLI 提供了 ng generate 命令，可幫助開發人員生成基本的 Angular 構件，例如模塊、組件、指令、管道和服務：
$ ng generate component my-component
my-component 是組件的名稱。 Angular CLI 將自動在 src/app.module.ts 文件中添加對組件、指令和管道的引用。
如果您想將組件、指令或管道添加到另一個模塊 （主應用程序模塊 app.module.ts 除外），您只需在組件名稱前加上模塊名稱和斜杠 即可：
$ ng g component my-module/my-component
my-module 是現有模塊的名稱。
結論在本教程中，我們了解了如何在 Windows 計算機上安裝 Angular CLI，并使用它從頭開始初始化一個新的 Angular 項目。
我們還看到了您可以在整個項目開發過程中使用的各種命令來生成 Angular 工件，例如模塊、組件和服務。
查看我們的其他 Angular 教程。
您可以通過作者的個人網站、Twitter、LinkedIn 和 github 聯系或關注作者。
參考資料How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools
