Published in

CheHipster

2 min readAug 24, 2017

เริ่มเขียน Angular บน Plunker เลยละกัน

โพสที่แล้วได้รู้จัก Angular Plunker ไปบ้างแล้ว โพสนี้จะลองเริ่มเขียนโปรแกรมกันเลย ซึ่งจะใช้ Plunker เป็น editor. ถ้ายังจำกันได้เราจะเริ่มด้วยการกดปุ่ม New->Angular

Imports

เริ่มที่ไฟล์ app.ts

// app.ts
import { Component } from '@angular/core';

เป็นการบอกว่าให้นำโค๊ดของ Component จากโมดูล ‘@angular/core’ ซึ่ง SystemJs จะทำหน้าที่นี้ให้ (SystemJs อธิบายคร่าาวไว้ในโพสที่แล้ว)

หากใครเคยเขียน Java หรือ Python มันก็คือคอนเซปเดียวกันกับการ import นั่นเอง.

Components

ต่อด้วยการสร้างคลาสที่มีชื่อว่า ItemComponent

// app.ts
import { Component } from '@angular/core';class ItemComponent {}

Component เป็นฟีเจอร์ของ Angular ที่เปิดให้เราสามารถที่จะสร้าง HTML tagใหม่. เราจะสร้าง custom tags เพื่อให้ Angular ทำงานกับ tag เหล่านี้. เราจะใช้ tag <my-app> เป็นตัวเชื่อมระหว่างคลาส ItemConponent กับ HTML.

เรายังจะใช้ฟีเจอร์ของ TypeScript อีกคือ annotation หรือ decorator และจะใช้ annotation ที่มีชื่อว่า @Component .

// app.tsimport { Component } from '@angular/core';@Component({
  selector: 'my-app'
})
class ItemComponent {}

annotation @Component จะช่วยเพิ่มโค๊ดที่เป็น boilerplate ให้กับคลาส,ฟังก์ชั่น หรือ property ที่เราจะใช้งานให้เอง. การที่เราเซ็ท my-app ให้กับ selector คือการบอกให้ Angular ค้นหา tag ใน HTML ที่ใช้ <my-app></my-app> เพื่อมาทำงานกับ instance ของคลาส ItemComponent.

Template

เป็น attribute ของ Component ที่จะแสดงผลไปที่ tag <my-app> ในไฟล์ HTML.

// app.tsimport { Component } from '@angular/core';@Component({
  selector: 'my-app’,
  template: `
<h1>สินค้า: ไม้จิ้มฟัน</h1>
<h2>ราคา: 20 บาท</h2>
`,
})
class ItemComponent {}

สังเกตุว่าใน attribute template ก็จะเป็น tag HTML และการเขียนอยู่ในเครื่องหมาย "`" back-tick ซึ่งเป็นอีกฟีเจอร์ของ ES6 JavaScript ที่จะรองรับการเขียน mult-line strings.

ไฟล์ index.html

// index.html
<body>
  <my-app></my-app>
</body

Angular Modules

Angular จะจัดการโค๊ดไว้ในลักษณะโมดูลหรือ NgModules ภายในโมดูลก็จะประกอบไปด้วยหลายๆ component .

Angular application อาจะจะประกอบไปด้วยหลายๆ โมดูลทำงานร่วมกัน แต่อย่างน้อยจะต้องมี 1 โมดูล ซึ่งเราจะเรียกมันว่า root module หรือ AppModule .

หลังจากที่ทำ component และเพิ่ม tag ที่ HTML แล้ว เราจะต้องบอก Angular ว่าเราจะใช้งาน Angular ที่ component อันใหน ซึ่งตรงนี้เรียกว่า bootsrapping.

// app.tsimport { Component, NgModule } from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';@Component({
  selector: 'my-app’,
  template: `
<h1>สินค้า: ไม้จิ้มฟัน</h1>
<h2>ราคา: 20 บาท</h2>
`,
})
export class ItemComponent {}@NgModule({
   imports: [BrowserModule],
   declarations: [ItemComponent],
   bootstrap: [ItemComponent]
})
export class AppModule{}

NgModule มี parameter คือ

imports

คือการบอกให้ Angular ใช้งาน Angular Module อื่นๆที่เราต้องการใช้งาน และเกือบทุกๆ Angular application root ควรจะต้อง import Broswer Module.

declarations

คือการประกาศชื่อของ component ต่างๆ ที่เป็นของ module นั้นๆ.

bootstrap

เป็นการบอกว่า component ใหนเป็น root component ใช้เพื่อเริ่มทำงาน.

BrowserModule เป็นโมดูลที่ Angular เอาไว้ทำงานกับ Browser.

Bootstrapping

หลังจากที่ได้ AppModule ซึ่งเป็น root module ของเรา ตอนนี้เราจะบอกให้ระบบของเริ่มทำงานด้วยไฟล์ main.ts

main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';platformBrowserDynamic().bootstrapModule(AppModule)

Angular ไม่ได้จำกัดการทำงานไว้แต่เพียง Browser เท่านั้น ดังนั้นในกรณีนี้เราจึงต้องบอกให้ Angular ว่าเรากำลังจะทำงานกับ Browser เราเลยต้องใช้ ฟังก์ชั่น platformBrowserDynamic เพื่อทำการ bootstrap ระบบของเรา

รันโปรแกรม

กดปุ่ม Run

โค๊ดเก็บไว้ที่นี่ https://plnkr.co/edit/KF85SuypAtA8XNrkld83?p=info

สรุป

component เป็นส่วนสำคัญพื้นฐานของ Angular application ซึ่งจะทำหน้าที่เชื่อมต่อระหว่าง HTML กับ JavaScript. ถ้าเราจะมอง Angular application ให้เป็นลักษณะของ tree นั้นส่วนล่างสุดจะประกอบขึ้นจาก component หลายๆ ตัว ส่วนบนถัดมาจะมี root component และส่วน Angular Module จะเป็นส่วนบนสุดที่รวมเอาหลายๆ component เข้าด้วยกัน

References:
https://codecraft.tv/courses/angular/quickstart/overview/
https://angular.io/
https://jhipster.github.io/