Create UI components with Angular 6 Step By Step

credit image : https://www.youtube.com/watch?v=nMancGZMtAI

Angular 6 พัฒนาด้วยภาษา TypeScript โดยมีการแบ่งการทำงานออกเป็นส่วนๆ เรียกว่า Component

Component คือ ?

Component ใน Angular เปรียบได้กับกับจิ๊กซอว์ที่มาประกอบกันเป็นหน้าตาของเว็บไซต์ ดังรูป

tag <app-root> คือ Component ชิ้นหนึ่งที่ถูกสร้างมาในตอน Generate new Project

แล้ว <app-root> ต้นทางมันอยู่ที่ไหนกัน ?

เปิดดูที่ไฟล์ app.component.ts

ภายใต้ @Component จะพบว่ามี metadata อยู่ 3 ชุด คือ

1. selector ตัวนี้คือชื่อของ Component นั่นคือ app-root นี่เอง เวลาเรียกใช้ก็ใช้ในแท็ก <app-root>
2. templateUrl ก็คือไฟล์ presentation หรือไฟล์แสดงผลของ Component นี้
3. styleUrls คือไฟล์ css ที่ใช้เฉพาะกับ Component นี้เท่านั้น (สามารถเรียกใช้ได้หลายไฟล์)

ส่วนการพัฒนาโปรแกรมใดๆ ที่เป็นความสามารถของ Component นี้ สามารถพัฒนาได้ภายใต้บล็อก export โดยภาษาที่ใช้พัฒนาคือภาษา TypeScript

เริ่มต้นสร้าง Component navbar

1. In Terminal window, type:

ng generate component navbar

จะเห็นว่าใน 1 Component ที่ Angular CLI สร้างให้เราจะประกอบไปด้วย

1. xxx.component.html
2. xxx.component.spec.ts
3. xxx.component.ts
4. xxx.component.css

2. Open file navbar.component.ts จะเห็นว่าชื่อ Component นี้คือ app-navbar (สามารถเปลี่ยนได้)

3. Open file navbar.component.html และเพิ่ม code ดังนี้

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DEMO-ANGULAR6</a>
</nav>

4. นำ Navbar Component มาแสดงบนหน้า Web โดยเพิ่ม<app-navbar>ที่ app.component.html

<app-navbar></app-navbar>

5. Open Browser จะเห็นได้ว่า Navbar Componet ที่เราเพิ่มเข้ามาได้แสดงบนสุดของหน้า Web ตามที่ต้องการ

ถ้าเราเพิ่ม <app-navbar> ไว้ที่ไฟล์ app.component.html หมายถึง Navbar จะแสดงทุกหน้าของ Web

ในบทความถัดไปจะทำการเปลี่ยนหน้า Page ผ่านการใช้ App Routing Module กันค่ะ