ในบทความนี้เรานำ Bootstrap มาใช้ในโปรเจค ซึ่ง Bootstrap เป็น CSS Framework ที่ใช้ในการตกแต่งเว็บให้มีความสวยงามและเป็นระเบียบมากยิ่งขึ้น ก่อนอื่นเราต้องติดตั้ง Bootstrap โดยใช้คำสั่ง
เปิดไฟล์ angular.json และเพิ่มโค้ดในส่วน styles
หลังจากนั้นลองรันแอพ จะเห็นได้ว่า font ของตัวอักษรเปลี่ยนแปลงไป หากต้องการดูว่า Bootstrap 3 ทำอะไรได้บ้าง สามารถดูได้ที่ https://getbootstrap.com/docs/3.3/ ต่อไปเราจะมาดูกันว่าหลังจากรันแอพแล้วเกิดอะไรขึ้นบ้าง มีการโหลดไฟล์ใดบ้าง
ไฟล์แรกที่จะถูกเรียกขึ้นมาก็คือ main.ts
ในบรรทัดที่ 11 จะมีการเรียกต่อไปยังโมดูลที่ชื่อ AppModule โดยดูจากการ import ด้านบนแล้วโมดูลนี้ก็คือไฟล์ app/app.module ซึ่งอยู่ที่ src > app > app.module.ts หากเราเข้ามาดูในไฟล์นี้จะพบโค้ดตามรูปข้างล่าง
จากรูปในบรรทัดที่15 เป็นการบอกให้เริ่มจากการโหลดคอมโพเนนท์ที่ชื่อว่า AppComponent และเราก็ดูที่ import เหมือนเดิมว่าไฟล์นี้อยู่ที่ไหน และทำการเปิดไฟล์ app.component.ts ขึ้นมา
ในส่วนของ @Component ประกอบด้วย properties :
- selector: ‘app-root’ หากไปดูที่ไฟล์ index.html เราจะพบ HTML Tag ที่ชื่อว่า app-root ซึ่งเป็นการกำหนดว่าสิ่งที่เกิดขึ้นในคอมโพเนนท์นี้จะไปใส่ไว้ในไหน โดยที่ template ในข้อ2 จะถูกเอามาใส่ใน tag app-root โดยอัตโนมัติ
- templateUrl: เพื่อบอกว่าเราจะเอา template มาจากไฟล์ไหน ในที่นี้คือ app.component.html
- styleUrls: เป็นส่วนที่ใช้ตกแต่ง โดยไฟล์ในข้อ2 จะใช้ style ที่อยู่ในไฟล์ที่กำหนด
ทดลองเพิ่มโค้ดในไฟล์ app.component.css และ index.html ตามลำดับ
และลองดูผลลัพธ์ที่เกิดขึ้น จะเห็นว่า “Hello… World” เป็นสีดำ แต่ “Welcome to My App 22-5-2018” เป็นสีแดง เป็นเพราะว่าเราตั้งค่าไว้ว่าเฉพาะคอมโพเนนท์นี้ให้ใช้ไฟล์ตกแต่งชื่อ app.component.css ทำให้ส่วนอื่นที่ไม่ได้อยู่ใน sector ที่กำหนดไม่ได้ใช้การตกแต่งนี้
