複習一遍最新版本的 Angular

我听不见發表於2024-03-15
Angular

作為前端三大框架之一的 Angular 因為其過高的上手難度一直被忽視，自從 ng1 以後 vue 佔領了全國（大概2016年開始？），我就很久沒有再去了解過這個專案了。最近因為沉迷 Factorio 建廠，突發奇想想自己用 Nextjs 寫一個量化計算器，github 搜參考搜出個很好用的東西 factoriolab，一看是 ng 寫的頓時來了興趣，立馬跑到 ng 官網看 getting started 了，現在重新學習一遍，總結一些知識點

  • 基於元件開發應用，元件的結構為樹形層級結構，每個元件有一個 template 用於寫HTML，元件可以巢狀，元件只有一個根，這一點三個框架都是一致的
  • 元件擁有 metadata，作為元件的 property 存在，定義元件的一些配置
  • 提供了一些快捷命令生成檔案，想起 Laravel 的 php artisan gen:ooxx
    • 元件 ng generate component housingLocation --inline-template --skip-tests，快速生成一個元件
    • 介面 ng generate interface housinglocation， 幫你生成一份 TS 的 interface
    • ng generate service housing --skip-tests 建立 service
  • ⭐重要功能 1 在父元件到子元件之間共享資料使用 @Input 屬性，@Output 則是讓子元件傳遞資料到父元件，這個重要的技能讓你可以開始 動態渲染 前端資料了，很多人第一次學習前端框架觸發心流的地方之一吧，笑
  • ⭐重要功能 2 批次渲染動態資料使用指令 *ngfor，這個功能也是所有切圖仔在各類 xx管理系統 中渲染表格離不開的東西
  • ⭐重要功能 3 Angular services & 依賴注入 Dependency injection（簡稱 DI），DI 這個概念以前有一段時間很流行，在各大後端框架中傳染開來，像 PHP 的 Laravel 就深受 Java Spring 影響也搞了一個服務容器，不過這個東西大部分人用是會用，但是真的要解釋清楚十個人裡面九個人說不清，之前在知乎看過一篇文章解釋的非常好，不過就算止步於“不用 new 物件了！”這一層理解其實也夠了，後來 Golang 流行開以後還有寫 Java 的在知乎問為什麼 Golang 沒有 DI
  • Angular 中的 service 作用是作為提供資料給應用元件的過程 process，資料的來源不做假設，可以是 local，也可以來源 web service

元件一般長這個樣子，@Component 表示一個裝飾器，內部的物件是 metadata，表示 property

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HousingLocationComponent } from '../housing-location/housing-location.component';
import { HousingLocation } from '../housinglocation';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    CommonModule,
    HousingLocationComponent
  ],
  template: `
  <section>
    <form>
      <input type="text" placeholder="Filter by city">
      <button class="primary" type="button">Search</button>
    </form>
  </section>
  <section class="results">
    <app-housing-location></app-housing-location>
  </section>
  `,
  styleUrls: ['./home.component.css'],
})

export class HomeComponent {
  readonly baseUrl = 'https://angular.io/assets/images/tutorials/faa';

  housingLocation: HousingLocation = {
    id: 9999,
    name: 'Test Home',
    city: 'Test city',
    state: 'ST',
    photo: `${this.baseUrl}/example-house.jpg`,
    availableUnits: 99,
    wifi: true,
    laundry: false,
  };
}

相關文章