叡揚資訊

GSS 技術部落格

在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗，希望大家不管是喜歡或是有意見，都可以回饋給我們，讓我們有機會和大家對話並一起成長！
若有任何問題請來信：gss_crm@gss.com.tw

6 分鐘閱讀時間 (1257 個字)

字體大小: + –

Angular #3 - 細談 Angular 整個 Scaffolding 流程

程式語言前端

2021/06/24, 週四

1470 點擊

0 評論

Angular 的 Scaffolding 主要是透過 CLI 達成的
- 這主要分為很多個部份，主要都是在產出檔案／目錄／設定檔
  - e2e - 整合測試相關的設定
  - node_modules - 外部相依套件的所在，包版的時候記得這個部份是不用的
  - src - 程式主要就是寫在這個地方啦！底下還有區分
    - app - AppComponent 的所在，還有一些相的 module
    - assets - 放靜態資源的地方
    - environments - 可區分開發或 Production 的一些設定值
    - favicon.ico - 我的最愛及頁面左上角顯示的 Logo
    - index.html - 整個網頁的根頁面
    - main.ts - Angular 程式的進入點
    - polyfills.ts - 為了瀏覽器相容可匯入的點，polyfill 可參考 MDN 的說明
    - style.css - 全系統共用的 Light css
    - test.ts - 測試的進入點，並非 App 的一部份
    - tsconfig.app.json - Typescript 針對 app 的設定
    - tsconfig.spec.json - Typescript 針對測試的設定
    - typings.d.ts - Typings 的設定(目前還不太詳細知道它是用來做什麼的，之後再補充)
  - .editorconfig - 編輯器相關的設定
  - angular.json - CLI 針對這個專案相關的設定
  - karma.conf.js - 單元測試的設定
  - package.json - 套件管理，裡面列出了所有相依的 package
  - protractor.conf.js - 整合測試的設定
  - README.md - 這個專案的相關文件，預設會說是用什麼工具產的，怎麼啟動測試 server，跑測試…等
  - tsconfig.json - Typescript 編譯相關的設定
  - tslint.json - Typescript 的 lint rule
- 以上全部都是在 ng new 的時候的產出，但不僅限於此
Angular 至少需要一個 Component 跟一個 Module 才能運作
- Component 就像是一塊塊的樂高
- Module 則是樂高的包裝
- 透過引入不同的 Module，可以延用別人的智慧結晶不重新造輪
- 自行切分 Module 可以將邏輯相近的 Component 放在一起(還有其它的作用以後再提)
一開始的那個 Component 被定義在 app.component.ts
- 檔案雖然說那樣命名，稱呼上是叫它AppComponent
  - 它是所有 Component 的根，其他的 Component 或是一般的 HTML 都可以從這一層層往下長
  - 可以把它想像成樂高底下那個綠色的平臺，Component 從不同的 Module 取出後都是組在它上面
  - 這個檔案的內容長得如下:
```
  import { Component } from '@angular/core';

  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      title = 'app works!';
  }
```
    - 從 @angular/core 透過 import 引用 Component 這個 Decorator
    - Component Decorator 被掛在 AppComponent 這個 class
    - Decorator 主要用來提供額外的資訊
      - selector 指的是給這個 Component 自定義一個 tag，有這個例子來看就是 <app-root>
      - templateUrl 就是這個 Component 渲染出來的時候的內容檔案
      - styleUrls 是 AppComponent 專屬的 CSS(還記得前面提到的 shadow DOM?)
- 這裡定義了一個類別
  - 這個類別有一個屬性 title, 並有一個預設值 'app works'
  - title 在 template 上以雙花括號使用，被渲染的時候會顯示其值 => 在 Angular 稱之為 Interpolation
```
<h1>
  {{ title }}
</h1>
```
一開始的 Module 被定義在 app.module.ts
- 它的內容如下:
```
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';

  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
```
  - 這個 module 從兩個地方引用其他的 Module
    - angular module - Angular 官方提供的 module，像是 @angular/core, @angular/platform-browser
    - 其他自定義的 module，目前只有 AppComponent
  - @NgModule 這個 decorator 是用來宣告這個類別是一個 Module
    - 嗯？前面不是說只要 export 就是 module嗎？
    - 沒錯，只不過在 Angular 中的 module 又細分為 NgModule, Component, Service, Directive, ...等等
    - 為了避免誤會，以後都會直接直呼其名，e.g. Component，而 module 測是前面提到的包裝的概念
    - 簡單來說 Component 負責功能，Module 負責包裝
  - NgModule 帶給類別的資訊如下:
    - declarations 包含了一個陣列，列出使用到的 Component
    - imports 是用來匯入其他的 Module
    - providers 是用來定義可用的 service
    - bootstrap 是其中最重要的一個, 它告訴 Angular，渲染會從這個 Component 開始

Bootstrapping

開始渲染的流程
Angular CLI 是透過 webpack 處理這塊

我們可以從 angular.json 這個檔案看到建置這個 app 跟一個 main.ts 有關

那 main.ts 裡又是什麼呢?

  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';

  if (environment.production) {
    enableProdMode();
  }

  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

main.ts 的職責就是要 bootstrap 這個 app
11-12 行是真正開始 bootstrap 的程式碼

index.html
- 我們看到的畫面，都是從這個檔案開始的：
  - 它其實就是個簡單的檔案:
```
<html>
<body>
  <app-root></app-root>
</body>
</html>
```
  - 當 Bootstrap 發生之後，會發生幾件事
    - <app-root> 會被解析
    - 解析的過程是一層層遞迴下去的，就像 html 的結構一樣
    - 最後呈現在畫面上的結果就是 bootstrap 的結果
    - header/footer/menu bar 通常可以加在這層
小結一下
- Angular 的程式運作大致上是如下:
  - 從 main.ts 開始
  - 引入了 AppModule 及其他 bootstrap 相關的類別
  - AppModule 中定義了 AppComponent 為 bootstrap 的起始點
  - 接著產了 service 的實例並匯入其他的 Module
  - 再來遞迴解析 AppComponent 的 Template 中其他的 Component 直到沒有東西為止
  - 當全部被解析完時就會顯示結果在 index.html 上