Angular CLI：入門指南 (一)

Angular CLI是一個功能強大的工具，可輕松構建高質量的Angular應用程序。 
借助Angular CLI，我們只需很少的工作即可構建，開發，測試
構建和部署Angular應用程序。
對於初學者來說，需要了解Angular CLI的一些命令，
可以幫助他們快速啟動新的Angular項目.
例如: `ng new`, `ng generate`, `ng serve`等等。
但是對於angular或者前端的專家而言，Angular CLI不僅僅是一個腳手架工具,
它是一組可以提高開發團隊的工作效率，Angular應用程序的質量和性能的工具。

什么是 Angular CLI?

Angular CLI是Angular生態系統中使用的官方命令行界面。 它的目標是使構建高質量Angular應用程序變得容易。

Angular CLI是用於Angular開發的完整工具包，它為您提供了一種方法，可以通過ng new快速構建新項目，通過ng從預定義的藍圖生成代碼，通過ng update更新現有代碼，以及通過ng add為Angular添加一些框架支持。

它還負責項目的構建過程（ng build），並為您提供了開箱即用的方法：

• 通過lint進行TSLint集成.
• 通過測試提供單元測試支持
• 通過e2e提供端到端測試支持
• 通過服務開發服務器
• 還有更多

如何安裝 ?

安裝前提

要使用Angular CLI，我們必須在計算機中安裝Node.js的最新活動LTS版本。

要驗證是否安裝了Node.js，請在終端窗口中運行node -v並檢查顯示的版本是否大於10.9。

安裝Angular CLI

安裝完node.js后npm(軟件包管理器)會一起安裝，我們將使用npm安裝 Angular CLI 打開一個窗口並在窗口中運行如下命令:

npm install -g @angular/cli

成功安裝Angular CLI后，我們就可以在命令行上將其作為ng可執行文件使用。

要驗證是否已正確安裝CLI，請在終端上運行以下命令：

ng version

這將輸出您已安裝的Angular CLI的版本以及其他一些信息，例如您正在使用的Node.js的版本以及當前的操作系統。

jasondayee-MBP:~ Home$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.14
Node: 12.13.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.14
@angular-devkit/core         8.3.14
@angular-devkit/schematics   8.3.14
@schematics/angular          8.3.14
@schematics/update           0.803.14
rxjs                         6.5.3

現在，我們准備繼續探索Angular CLI。

Hello Angular!

像我們學習其他開發語言的第一步hello word一樣，我們創建第一個項目 Hello Angular

要創建一個新的Angular項目，我們使用ng new命令：

ng new my-app  

回答以下問題后，此命令將為您創建一個新的Angular項目：

• “Do you want routing?”您很可能需要在Angular應用程序中進行路由，但是現在讓我們通過按ENTER使用默認值（No）。
• “Which stylesheet format do you want?”再次按Enter，CLI將使用CSS（默認樣式表格式）。

示例輸出：

CREATE my-app/README.md (1027 bytes)
CREATE my-app/.editorconfig (246 bytes)
CREATE my-app/.gitignore (631 bytes)
CREATE my-app/angular.json (3593 bytes)
CREATE my-app/package.json (1290 bytes)
CREATE my-app/tsconfig.json (543 bytes)
CREATE my-app/tslint.json (1988 bytes)
CREATE my-app/browserslist (429 bytes)
CREATE my-app/karma.conf.js (1018 bytes)
CREATE my-app/tsconfig.app.json (270 bytes)
CREATE my-app/tsconfig.spec.json (270 bytes)
CREATE my-app/src/favicon.ico (948 bytes)
CREATE my-app/src/index.html (291 bytes)
CREATE my-app/src/main.ts (372 bytes)
CREATE my-app/src/polyfills.ts (2838 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/test.ts (642 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (662 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (24263 bytes)
CREATE my-app/src/app/app.component.spec.ts (981 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
CREATE my-app/e2e/protractor.conf.js (810 bytes)
    Successfully initialized git.

ng new命令為新的Angular項目提供了所有必需的文件，並安裝了Angular開發所需的所有依賴項。

現在，您可以運行以下命令，進入my-app目錄並在瀏覽器中啟動新生成的項目：

cd my-app
ng serve

打開瀏覽器訪問localhost:4200 應該看到以下內容:

恭喜你！ 您已經成功開發了第一個Angular應用程序。 這就是開始使用Angular CLI所需的全部：兩個命令😉。

從CLI獲取幫助

在開始之前，我想指出一下，你可以將一些選項傳遞給大多數Angular CLI命令。 最重要的選項是--help，以獲得有關CLI的幫助。

The --help option

ng help

 ng -help
Available Commands:
  add Adds support for an external library to your project.
  analytics Configures the gathering of Angular CLI usage metrics. See https://v8.angular.io/cli/usage-analytics-gathering.
  build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  deploy (d) Invokes the deploy builder for a specified project or for the default project in the workspace.
  config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular app.
  run Runs an Architect target with an optional custom builder configuration defined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angular.io/
  version (v) Outputs Angular CLI version.
  xi18n Extracts i18n messages from source code.

For more detailed help run "ng [command name] --help"

如你所見，有很多命令。 他們中的許多人接受相似的論據和選擇，因為他們完成相似的任務。 因此，記住所有內容並不重要。 相反，專注於Angular CLI的思維模型，您將掌握最重要的命令和選項。 這將幫助您了解為什么某些Angular CLI命令以這種方式工作。