使用 angular-cli 安裝 Angular

此示例是 Angular 的快速設定以及如何生成快速示例專案。

先決條件：

• Node.js 6.9.0 或更高版本 。
• npm v3 或更高或紗線 。
• 輸入 v1 或更高版本。

開啟終端並逐個執行命令：

npm install -g typings 或 yarn global add typings

npm install -g @angular/cli 或 yarn global add @angular/cli

第一個命令全域性安裝 typings 庫 （並將 typings 可執行檔案新增到 PATH）。第二個在全域性安裝 @ angular / cli ，將可執行檔案 ng 新增到 PATH。

設定新專案

使用終端導航到要設定新專案的資料夾。

執行命令：

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

就是這樣，你現在有了一個用 Angular 製作的簡單示例專案。你現在可以導航到終端中顯示的連結，並檢視它正在執行的內容。

新增到現有專案

導航到當前專案的根目錄。

執行命令：

ng init

這將為你的專案新增必要的 Scaffolding。這些檔案將在當前目錄中建立，因此請務必在空目錄中執行。

在本地執行專案

為了在應用程式在瀏覽器中執行時檢視應用程式並與之互動，你必須啟動一個託管專案檔案的本地開發伺服器。

ng serve

如果伺服器成功啟動，它應顯示伺服器正在執行的地址。通常是這樣的：

http://localhost:4200

開箱即用的本地開發伺服器與熱模組重新載入相連，因此對 html，typescript 或 css 的任何更改都將觸發瀏覽器自動重新載入（但如果需要可以禁用）。

生成元件，指令，管道和服務

ng generate <scaffold-type> <name>（或簡稱 ng g <scaffold-type> <name>）命令允許你自動生成 Angular 元件：

# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false

有幾種可能型別的支架 angular-cli 可以產生：

你也可以用第一個字母替換型別名稱。例如：

ng g m my-new-module 生成一個新模組或 ng g c my-new-component 來建立一個元件。

建築/繫結

當你完成 Angular Web 應用程式的構建並且希望將其安裝在 Apache Tomcat 等 Web 伺服器上時，你需要做的就是執行 build 命令，無論是否設定了生產標誌。生產將減少程式碼並優化生產設定。

ng build

要麼

ng build --prod

然後在專案根目錄中查詢包含構建的/dist 資料夾。

如果你想要更小的生產包的好處，你還可以使用 Ahead-of-Time 模板編譯，從最終構建中刪除模板編譯器：

ng build --prod --aot

單元測試

Angular 提供內建單元測試，angular-cli 建立的每個專案都會生成一個可以花費的基本單元測試。單元測試使用 jasmine 編寫，並通過 Karma 執行。要開始測試，請執行以下命令：

ng test

此命令將執行專案中的所有測試，並在每次原始檔更改時重新執行它們，無論是測試還是來自應用程式的程式碼。

有關更多資訊，請訪問： angular-cli github 頁面