Angular CLI 基本介紹 - 筆記長也NotesHazuya

Angular CLI 基本介紹

2020-12-30 21:42:00   Angular

上一篇我們已經安裝好了 Angular CLI 以及建立了 Angular 專案,雖然本來要開始寫程式了,但是在開始寫程式之前我想要先介紹一些關於 Angular CLI 以及程式架構的部分。

開始之前

在開始之前,你可以輸入以下指令確認 Angular CLI 已經安裝完成了

ng --version

出現下面的畫面基本上就是已經安裝完成了~

這個指令會顯示 CLI、NodeJs以及作業系統的版本、已經安裝的 Angular 套件(通常會顯示全域的套件,如果在專案裡面會顯示專案已經安裝的套件)

Angular CLI 指令介紹

專案建立

ng new 名稱 參數
ng n 名稱 參數

利用此指令預設會建立專案,也會建立成為工作空間,如果你只想建立工作空間可以加上--createApplication=false  參數,此外,CLI 會安裝必要套件並且加入 GIT 版控,如果不想安裝套件及加入版控可以加上參數skipInstall=false 、 --skipGit=false 與 --commit=false 。

頁面樣板

CLI 預設會將檔案分為TS、CSS以 及 HTML 三個檔案,來達到邏輯與樣式分離。--inlineTemplate=true 與 --inlineStyle=true 參數可以將 CSS 以及 HTML 都鑲在 TS 當中。另外可以使用 --style 指定樣式表為 CSS、SCSS、LESS 等樣式格式。

路由

單一網頁應用程式也有路由,可能過去學習過 Laravel 後端框架或是其他前端框架會遇過。利用 --routing=true 參數來讓 Angular 建立預設路由組。

測試

在 Angular 中預設使用 Karma 來進行單元測試,可以使用參數 --minimal=true 取消安裝預設測試框架,--skipTests=false 取消增加測試設定檔案。

安裝套件

ng add 套件名稱 參數

例如 要在專案加入 Angular Material 套件,只要執行 ng add @angular/material 就可以完成安裝,不必再手動載入。

套件更新

ng update [參數]

執行此指令不單單只是升級套件,還會針對套件有破壞性更新時(例如移除了某個元件或功能)一併更新所有使用到套件的相關檔案。

啟動專案

ng serve 專案名稱 參數
ng s 專案名稱 參數
ng serve

如果在專案之內,可以直接輸入 ng s 或 ng serve 即可。執行後會依照  angular.json 的設定來啟動專案,一但偵測到檔案變動就會重新編譯並載入。而預設佔用 4200 port,可以透過--host 與 --port  來指定路徑與port 號。

--open :啟動專案時自動開啟瀏覽器、--watch=false 與 --liveReload=false 取消監控檔案及重相載入。

建立元件

ng generate <schematic> [參數]
ng g <schematic> [參數]

此命令可以依 Angular 提供的 Schematics 來建立檔案,後續會有更詳細的說明。例如,可以利用 ng generate component <component-name> 來產生一個元件。

以下列出比較常見的 <schematic>

  • class
  • component
  • directive
  • enum
  • guard
  • interface
  • module
  • pipe
  • service

單元測試

ng test 專案名稱 參數
ng t 專案名稱 參數

E2E 測試

ng e2e 專案名稱 參數
ng e 專案名稱 參數

程式編譯

ng build <專案名稱> [參數]
ng b <專案名稱> [參數]

在專案內一樣可以只輸入 ng b 或是 ng build。執行指令後,應用程式會被編繹成 ECMAScript 讓瀏覽器可以執行的程式碼,並將結果放在 dist/project_name 目錄下。

程式發佈

ng deploy <專案名稱> [參數]

上方的 build 只是輸出到目錄,這個指令可以依照 angular.json 的配置將應用程式部署到其他環境上。

結論

Angular CLI 提供了強大的功能,從設計一直到編譯部署都變得相當容易了。雖然無法一次就了解所有指令的功能及用途,但大致上已經可以知道有哪些指令了,日後的文章將會介紹得更詳細。下一篇文章就會開始進入程式結構的部分了~

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)