เริ่มเขียน 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/