使用 angular-cli 安裝 Angular

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

先決條件:

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

npm install -g typingsyarn global add typings

npm install -g @angular/cliyarn 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 可以產生:

Scaffolding 型別 用法
module ng g module my-new-module
component ng g component my-new-component
directive ng g directive my-new-directive
pipe ng g pipe my-new-pipe
service ng g service my-new-service
class ng g class my-new-class
interface ng g interface my-new-interface
enum ng g enum my-new-enum

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

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 頁面