初探 Angular｜基本介紹與環境建置

關於 Angular

The modern web developer’s platform（一套框架，多種平臺）

Angular 是由 Google 開發，基於 TypeScript 編寫的 JavaScript 前端框架，常和同為三大框架的 React 和 Vue 比較。

1.x 版的 AngularJS 其實還算是函式庫，直到 Angular 2 版本出現之後，與其說是一套框架，更常被稱作是一個開發平台，因為 Angular 強大的地方在於，整合了非常多功能給開發者使用：

可參考 Angular 2 skill map。

以下是官網提供的 Angular 架構圖：

Angular App 主要由這八個元素構成：

Metadata 元資料、描述資料
- 在 @Component、@NgModule 裝飾器函式中，用於描述該元件的附加資料
- 元資料中指定的樣式只會作用於該元件
Template：模板，呈現畫面
- 權重：Template Input Variable（模板輸入變數）= Template Reference Variable（模板參考變數） > Component Variable
Component：元件，為最小 UI 單位
- Directive + Template 的組合
Dependency Injection：倚賴注入
- DI 是一種 Design Pattern，為了將功能集中，減少相依性的設計模式
Service：服務，針對特定事情處理邏輯
Directive：指令，有三種呈現形式
- Component 元件，擁有樣板的指令
- Structural Directive 結構指令
  - 修改檢視結構
  - 如：*ngFor、*ngIf、NgSwitch，星號是用來簡化復雜語法的「語法糖」
- Attribute Directive 屬性指令
  - 改變元素的外觀或行為
  - 如：NgClass、NgStyle、NgModel
Data Binding：資料綁定
- Property Binding 屬性單向綁定
- Event Binding 事件單向綁定
- Two Way Binding 屬性與事件雙向綁定
Module：模組，打包功能以實現功能模組化

參考資料：

詳細可參考 Angular 官方文件。

要執行一個簡單的 Angular 應用，可使用 Angular CLI 工具來加速開發，建議使用 Node.js 的 npm 套件管理工具來安裝 Angular CLI。

可在終端機輸入下方指令，查看版本資訊，確認是否有安裝成功：

$ node -v

使用 Angular CLI 開發工具，可透過 ng 命令，快速產生 Directive 元件、服務元件（Service Component）、管線元件（Pipe Component），或是路由設定，並執行多種開發任務，比如測試、打包和釋出。

輸入下方指令進行安裝：

$ npm install -g @angular/cli

如果是在 mac 系統，指令必須加上 sudo，切換成管理員帳戶才有權限安裝：

$ sudo npm install -g @angular/cli

可輸入 ng version 或是 ng v 指令查看版本資訊，確認是否安裝成功，畫面如下：

透過 new 指令，可在當前目錄建立一個 Angluar 工作空間（Workspace），並初始化 Angular 專案所需要的配置：

$ ng new my-app

安裝需要一段時間，完成後會出現 Packages installed successfully. Successfully initialized git. 這段文字：

除了透過 NPM 安裝必要套件，還會利用 Git 進行版本控制，並完成第一次提交（commit）。

在本地端 build 和 serve 專案，並運行在 http://localhost:4200/：

$ cd my-app
$ ng serve --open

預設畫面如下：

若使用 VSCode（Visual Studio Code）編輯器，可安裝一個叫做 Angular Extension Pack 的擴充套件，整合了 Angular 相關擴充套件方便使用：

詳細可參考這篇：[Angular 深入淺出三十天] Day 04 - 資料夾結構說明。

建立好 Angular 專案之後，預設架構如下：

根目錄 my-app：一個新的 workspace
子目錄 src/：主要開發原始碼
- app/：包含整個網頁應用程式的 Module、Component、Service
- assets/：圖片等靜態資源
- environments/：環境變數設定檔
子目錄 e2e/：E2E 測試的程式碼
browserslist：用來定義專案支援的瀏覽器與版本
angular.json：Angular CLI 設定檔
karma.conf.js：Karma 設定檔，用來進行單元測試，專案建立時會預設使用這套工具
tsconfig.json：TypeScript 編譯設定檔
tslint.json：TSLint 設定檔，為 TypeScript 的格式驗證工具，提高程式碼可讀性、偵測功能性錯誤
其他相關配置檔案

透過 Angular CLI 提供的指令，我們能快速建立一個專案架構，其中最常使用 ng generate 來產生 Component、Service、Pipe 等檔案的程式碼。

指令如下：

$ ng generate component <name>

或簡化成：

$ ng g c <name>

舉例來說，如果要建立一個叫做 todo-list 的 Component，指令是 ng g c todo-list，接著 Angular 就會建立四個檔案，以及更新 app.module.ts：

因為工作需要，而開始接觸 Angular 這套前端框架，卻也了解到這套工具涵括的功能種類眾多！

雖然一時半刻還無法消化，但其實也不是說剛開始就要完全了解，有些概念還是和 React 有相似之處，總之就先跟著官網提供的練習指南，一步一步跟著實作，慢慢踏入 Angular 的世界！

參考資料：