https://www.dreamstime.com/royalty-free-stock-photo-computer-code-html-image27861755

Domain model & Refactoring

จากโพสที่แล้ว เรามีการกำหนดคลาสของ Item ไว้ในตัวของ ItemComponent ซึ่งจริงๆ แล้วในระบบที่ใหญ่และซับซ้อน จะทำการแยก data ออกมาต่างหาก ตอนนี้เราจะลองมาทำการแยก domain model ของ Item ออกไปจากตัว component

Domain model

เราจะสร้างไฟล์ใหม่ที่มีชื่อว่า item.model.ts โดยการกด New file แล้วแยกโค๊ดได้แบบนี้

// item.model.ts
export class Item {
  constructor (
    public id: number,
    public description: string,
    public price: number,
    public comment: string
  ) {}
}

แล้วจะต้อง import คลาสนี้ใน app.ts แล้วเราจะใช้คำสั่ง new เพื่อสร้าง object ของ Item แทนที่จะใช้ array

// app.ts
import {Item} from './item.model'
export class ItemComponent {
 items: Array<Object>;
 constructor() {
   this.items = [ 
      new Item(1,'ไม้จิ้มฟัน',20),
      new Item(2,'เรือรบ', 150) ,
      new Item(3,'สากกระเบือ',300),
      new Item(4,'Kinder egg', 45) 
    ];
 }

Refactoring

ใหนๆ ก็แยก domain model ออกไปแล้ว คิดว่าถึงเวลาต้อง refactor code แล้วเพราะตอนนี้ code บางส่วนรวมกันอยู่อย่างสะเปะสะปะ

• app.module.ts

เริ่มต้นด้วยการสร้างไฟล์ที่มีชื่อว่า app.module.ts ซึ่งเราจะให้เป็น root module และแยกเอาเฉพาะส่วนที่เป็น module ไปจากไฟล์ app.ts

// app.module.ts
//our root app module
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ItemComponent) from './item.component'
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ ItemComponent ],
  bootstrap: [ ItemComponent ]
})
export class AppModule {}

• item.component.ts

จะเก็บโค๊ดที่เป็นของ ItemComponent เท่านั้น.

//item.component.ts
import {Component} from '@angular/core'
import {Item} from './item.model'
@Component({
  selector: 'my-app',
  templateUrl: './src/item.component.html',
})
export class ItemComponent {
 items: Array<Object>;
 constructor() {
   this.items = [ 
      new Item(1,'ไม้จิ้มฟัน',20),
      new Item(2,'เรือรบ', 150) ,
      new Item(3,'สากกระเบือ',300),
      new Item(4,'Kinder egg', 45) 
     ];
 }
}

เราได้แยกส่วนที่เป็น template ไปสร้างไฟล์ใหม่ที่ชื่อว่า item.component.html เพื่อจะแยกส่วนเฉพาะที่เป็น html และเปลี่ยนมาใช้ property ที่ชื่อว่า templateUrl แทน

• item.component.html

<div class="card card-block" *ngFor="let item of items">
   <h4 class="card-title">สินค้า: {{item.description}}</h4>
   <p class="card-text">ราคา: {{item.price}} บาท</p>
</div>

ซึ่งโครงสร้างของ folder และ file ของ app จะเป็นแบบนี้

จะเห็นได้ว่าโค๊ดจะแยกเป็นสัดส่วนตามหน้าที่ของมัน จำนวนบรรทัดในไฟล์จะลดลง ซึ่งจะทำให้ดูโค๊ดง่ายขึ้น (หรือป่าว) ทดลองรันโปรแกรมดู จะได้ผลเหมือนเดิม

ฝากทิ้งท้ายเราควรเช็ค console ของ browser ทุกครั้งว่าไม่มี error ใดๆเกิดขึ้น ถ้าหาใช้ chrome ให้กดปุ่ม F12 แล้วดูที่ console. ซึ่งหลังจาก refactor แล้ว console ยังไม่มี error เกิดขึ้น

ดูโค๊ดได้ที่ https://plnkr.co/edit/qOzpQx55NgdwPEyNcJkc?p=preview