本篇內(nèi)容主要講解“Angular CLI工具如何搭建并運行一個簡單項目”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Angular CLI工具如何搭建并運行一個簡單項目”吧!

創(chuàng)新互聯(lián)公司專注于烏恰企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設公司,商城網(wǎng)站建設。烏恰網(wǎng)站建設公司,為烏恰等地區(qū)提供建站服務。全流程按需定制，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

Angular中文官網(wǎng)：https://angular.cn/guide/quickstart

先決條件

在開始之前，請確保你的開發(fā)環(huán)境已經(jīng)包含了 Node.js? 和 npm 包管理器。

Node.js

Angular 需要 Node.js 的 8.x 或 10.x 版本。

• 要想檢查你的版本，請在終端/控制臺窗口中運行 node -v 命令。

• 要想安裝 Node.js，請訪問 nodejs.org。

【相關教程推薦：《angular教程》】

npm 包管理器

Angular、Angular CLI 和 Angular 應用都依賴于某些庫所提供的特性和功能，它們都是 npm 包。要下載和安裝 npm 包，你必須擁有一個 npm 包管理器。

本文中使用的是 yarn 客戶端命令行界面，管理依賴包

要想檢查你是否已經(jīng)安裝了 yarn 客戶端，請在終端/控制臺窗口中運行 yarn -v 命令。

第一步：安裝 Angular CLI

你要使用 Angular CLI 來創(chuàng)建項目、創(chuàng)建應用和庫代碼，并執(zhí)行多種開發(fā)任務，比如測試、打包和發(fā)布。

全局安裝 Angular CLI。

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

yarn global add @angular/cli

要想檢查你是否已經(jīng)安裝了 angular/cli，請在終端/控制臺窗口中運行 ng --version 命令，下圖代表安裝成功。

第二步：創(chuàng)建工作區(qū)和初始應用

Angular 工作區(qū)就是你開發(fā)應用的上下文環(huán)境。 每個工作區(qū)包含一些供一個或多個項目使用的文件。 每個項目都是一組由應用、庫或端到端（e2e）測試構成的文件。

要想創(chuàng)建工作區(qū)和初始應用項目：

• 運行 CLI 命令 ng new，并提供一個名字 my-app，如下所示：

  ng new my-app

• ng new 會提示你要把哪些特性包含在初始的應用項目中。請按回車鍵接受默認值。

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

還將創(chuàng)建下列工作區(qū)和初始項目文件：

• 一個新的工作區(qū)，根目錄名叫 my-app

• 一個初始的骨架應用項目，也叫 my-app（但位于 src 子目錄下）

• 一個端到端測試項目（位于 e2e 子目錄下）

• 相關的配置文件

初始的應用項目是一個簡單的 “歡迎” 應用，隨時可以運行它。

ng new命令后面有很多選項，詳見https://angular.cn/cli/new，由于我們的項目大多使用less編寫樣式因此需要添加后綴--style less，代表項目中默認使用less，用于樣式文件的文件擴展名或預處理程序。

完整命令：ng new my-app --style less

第三步：啟動開發(fā)服務器

Angular 包含一個開發(fā)服務器，以便你能輕易地在本地構建應用和啟動開發(fā)服務器。

1. 進入工作區(qū)目錄（my-app）。

2. 使用 CLI 命令 ng serve 啟動開發(fā)服務器，并帶上 --open 選項。

ng serve --open

ng serve 命令會自動啟動服務器，并監(jiān)視你的文件變化，當你修改這些文件時，它就會重新構建應用。

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

第四步：編輯你的第一個 Angular 組件

組件是 Angular 應用中的基本構造塊。 它們在屏幕上顯示數(shù)據(jù)、監(jiān)聽用戶輸入，并根據(jù)這些輸入采取行動。

作為初始應用的一部分，CLI 也會為你創(chuàng)建第一個 Angular 組件。它就是根組件，名叫 app-root。

1、打開 ./src/app/app.component.ts。

2、把 title 屬性從 'my-app' 修改成 'My First Angular App'。

src/app/app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App!';
}

瀏覽器將會用修改過的標題自動刷新。

3、打開 ./src/app/app.component.less 并給這個組件提供一些樣式。

src/app/app.component.less

h2 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

漂亮多了！

工作區(qū)配置文件

每個工作空間中的所有項目共享同一個 CLI 配置環(huán)境。該工作空間的頂層包含著全工作空間級的配置文件、根應用的配置文件以及一些包含根應用的源文件和測試文件的子文件夾。

應用項目文件

CLI 命令 ng new my-app 會默認創(chuàng)建名為 “my-app” 的工作空間文件夾，并在 src/ 文件夾下為工作空間頂層的根應用生成一個新的應用骨架。新生成的應用包含一個根模塊的源文件，包括一個根組件及其模板。

當工作空間文件結構到位時，可以在命令行中使用 ng generate 命令往該應用中添加功能和數(shù)據(jù)。這個初始的根應用是 CLI 命令的默認應用（除非你在創(chuàng)建其它應用之后更改了默認值）。

除了在命令行中使用 CLI 之外，你還可以使用像 Angular Console 這樣的交互式開發(fā)環(huán)境，或直接在應用的源文件夾和配置文件中操作這些文件。

對于單應用的工作區(qū)，工作空間的 src/ 子文件夾包含根應用的源文件（應用邏輯、數(shù)據(jù)和靜態(tài)資源）。對于多項目的工作空間，projects/ 文件夾中的其它項目各自包含一個具有相同結構的 project-name/src/ 子目錄。

應用源文件

頂層文件 src/ 為測試并運行你的應用提供支持。其子文件夾中包含應用源代碼和應用的專屬配置。