reveal.js

# บทที่ 4

Front-end Framework ด้วย Angular

---

## เป้าหมาย

- เข้าใจ **Front-end Framework** และ **Angular**
- สร้างแอปแบบ **Component-based**
- ใช้ **Template**, **Data Binding** และ **Directive**
- แยก logic ด้วย **Service**
- จัดหน้าเว็บด้วย **Routing**
- ใช้ **Forms** และ **HTTP Client** เบื้องต้น

---

## Angular ช่วยอะไร

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
flowchart LR
  A[HTML/CSS/JS<br/>พื้นฐาน] --> B[Component<br/>แบ่ง UI]
  B --> C[Service<br/>logic กลาง]
  C --> D[Router<br/>หลายหน้า]
  D --> E[Angular App<br/>ดูแลง่าย]
</pre>

---

## Angular CLI

```bash
ng new product-dashboard
cd product-dashboard
ng serve
ng generate component pages/products
ng generate service services/product
```

| คำสั่ง | ใช้ทำอะไร |
|---|---|
| `ng new` | สร้างโปรเจกต์ |
| `ng serve` | เปิด dev server |
| `ng generate component` | สร้าง component |
| `ng generate service` | สร้าง service |

---

## Component Tree

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#b8bb26'}}}%%
flowchart TD
  A[AppComponent<br/>โครงหลัก] --> B[HeaderComponent<br/>ส่วนหัว]
  A --> C[RouterOutlet<br/>พื้นที่หน้า]
  C --> D[HomePage<br/>หน้าแรก]
  C --> E[ProductsPage<br/>สินค้า]
  E --> F[ProductCard<br/>การ์ด]
  A --> G[FooterComponent<br/>ส่วนท้าย]
</pre>

---

## Component

```ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  styleUrl: './product-card.component.css'
})
export class ProductCardComponent {
  @Input() name = '';
  @Input() price = 0;
}
```

---

## Template

```html
<article class="product-card">
  <h2>{{ name }}</h2>
  <p>{{ price }} บาท</p>
</article>
```

- Template คือ HTML ของ component
- ใช้ binding เพื่อแสดงข้อมูล
- แยก style และ logic ออกจากกัน

---

## Data Binding

| รูปแบบ | Syntax | ใช้เมื่อ |
|---|---|---|
| Interpolation | `{{ value }}` | แสดงข้อความ |
| Property | `[src]="imageUrl"` | ส่งค่าให้ property |
| Event | `(click)="save()"` | รับ event |
| Two-way | `[(ngModel)]="keyword"` | form input |

---

## Binding Example

```html
<h1>{{ title }}</h1>

<button type="button" (click)="search()">
  ค้นหา
</button>
```

---

## Directives

```html
@if (products.length === 0) {
  <p>ยังไม่มีข้อมูลสินค้า</p>
} @else {
  @for (product of products; track product.id) {
    <app-product-card
      [name]="product.name"
      [price]="product.price">
    </app-product-card>
  }
}
```

---

## Service Flow

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#d3869b'}}}%%
flowchart LR
  A[ProductsComponent<br/>หน้า] --> B[ProductService<br/>ข้อมูล]
  B --> C[HttpClient<br/>เรียก API]
  C --> D[Backend API<br/>ฐานข้อมูล]
</pre>

---

## Service

```ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  getProducts() {
    return [
      { id: 1, name: 'Keyboard', price: 850 },
      { id: 2, name: 'Mouse', price: 420 }
    ];
  }
}
```

---

## Inject Service

```ts
import { Component, inject } from '@angular/core';
import { ProductService } from '../services/product.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html'
})
export class ProductsComponent {
  private productService = inject(ProductService);

products = this.productService.getProducts();
}
```

---

## Routing

```ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailComponent }
];
```

---

## Router Outlet

```html
<header>
  <a routerLink="/">Home</a>
  <a routerLink="/products">Products</a>
</header>

<router-outlet></router-outlet>
```

| Traditional Page | Angular Routing |
|---|---|
| โหลดทั้งหน้าใหม่ | เปลี่ยน component |
| ช้ากว่าเมื่อโหลดซ้ำ | เร็วและต่อเนื่อง |
| เหมาะกับเว็บเอกสาร | เหมาะกับ web app |

---

## Forms

```html
<form #productForm="ngForm" (ngSubmit)="save()">
  <input
    name="name"
    [(ngModel)]="productName"
    required
    minlength="3">

<button type="submit" [disabled]="productForm.invalid">
    บันทึก
  </button>
</form>
```

---

## HTTP Client

```ts
import { HttpClient } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductApiService {
  private http = inject(HttpClient);

getProducts() {
    return this.http.get('/api/products');
  }
}
```

---

## เวลาโหลดข้อมูล

- **T**: เวลารวม
- **R**: เวลา request/response
- **S**: เวลา service จัดข้อมูล
- **V**: เวลา view render

---

## Mini Project

**Product Dashboard**

```text
src/app/
  pages/home/
  pages/products/
  pages/product-detail/
  components/header/
  components/product-card/
  services/product.service.ts
  app.routes.ts
```

---

## Checklist

- แบ่ง UI เป็น component ชัดเจน
- ใช้ binding และ directive ถูกต้อง
- แยกข้อมูลไว้ใน service
- มี route อย่างน้อย 2 หน้า
- มี form และ validation เบื้องต้น
- เตรียม service สำหรับ API หรือข้อมูลจำลอง

---

## กิจกรรม

สร้าง Angular app ชื่อ **Product Dashboard**

1. มี Home และ Products
2. มี Header, Product List, Product Card
3. ใช้ service จัดการข้อมูลสินค้า
4. ใช้ binding แสดงชื่อและราคา
5. ใช้ `@for` หรือ `*ngFor`
6. มีช่องค้นหาหรือฟอร์มพร้อม validation

---

## คำถามท้ายบท

1. Component ใน Angular ประกอบด้วยอะไรบ้าง
2. Data Binding แต่ละแบบใช้ต่างกันอย่างไร
3. Service เหมาะกับงานใด
4. Routing ช่วยจัดโครงสร้างแอปอย่างไร
5. ทำไมการเรียก API ควรแยกไว้ใน service