อัพเดตเนื้อหาแล้ว สามารถใช้กับ Angular 2 และ Angular 4 เป็นต้นไปจ้า
โดยปกติ Angular CLI จะช่วยนักพัฒนาเว็บแอพพลิเคชั่นสร้าง Component ต่างๆ ได้รวดเร็วมาก
ช่วงหลังพลสังเกตเทคนิคที่ค้นพบจากการอบรมเรื่อง Angular 4 and MEAN Stack ให้กับพี่น้อง ตามที่ต่างๆ ก็ขอเอามาเขียนแชร์ไว้ในแฟนเพจกับ Youtube Channel แล้วกัน
พื้นฐานคำสั่งสร้าง Component ใน Angular
หากเราใช้ Angular CLI ทำงาน (พลแนะนำมาก โดยเฉพาะสำหรับมือใหม่ จะเรียนรู้การทำงานได้เร็วกว่า) จะมีคำสั่งอมตะในการสร้าง Component แบบต่างๆ คือ
ng g <ประเภทของ Component> <ชื่อ Component> [ออฟชั่นที่ต้องการ]
เช่นถ้าต้องการสร้าง Component ธรรมดาชื่อ Product Component ก็จะเป็น
ng g component product
หรือถ้าต้องการสร้าง Class ธรรมดาชื่อ User ไว้เก็บข้อมูลจาก Database หรือ Web API ก็อาจจะใช้
ng g class user
หรือถ้าต้องการสร้าง Service component สำหรับติดต่อกับส่วน Authentication ก็ใช้
ng g service authentication
โฟลเดอร์ที่ Angular CLI จะสร้างไฟล์ Component เก็บไว้
ตามปกติ Angular CLI จะสร้างไฟล์ของ Component ต่างๆ เก็บไว้อ้างอิงจาก โฟลเดอร์ src/app/ แต่ตอนนี้มีเพียง Component ธรรมดาเท่านั้นที่มีการสร้างไฟล์แยกเก็บไว้ในโฟลเดอร์ของตัวเอง เช่น
ng g component login
จะได้ไฟล์ 4 ไฟล์ ในโฟลเดอร์ชื่อ login ดังนี้
src/app/login/login.component.css src/app/login/login.component.html src/app/login/login.component.spec.ts src/app/login/login.component.ts
แต่ถ้าเราสั่งสร้าง Service ล่ะ?
ng g service user
เราจะได้ไฟล์ของ User service มาใน src/app แทน
src/app/user.service.spec.ts src/app/user.service.ts
เทคนิคสร้าง Component ต่างๆ เก็บไว้ในโฟลเดอร์ย่อย
จะเห็นว่า ถ้าปล่อยให้ Angular CLI สร้างเก็บไฟล์ Component ตามปกติ อาจจะไม่ที่เป็นชอบใจของหลายๆ คน ที่ต้องการจะเก็บไฟล์แยกกลุ่มกันไว้
เช่นอยากเก็บพวก Class ที่เป็นตัวแทนของข้อมูลจาก Web API ไว้ในโฟลเดอร์ชื่อ models เป็นต้น
ทางหนึ่งคือการมานั่งย้ายไฟล์เอง แต่จะดีไหม หากเราสั่งสร้างไว้ในโฟลเดอร์ที่ต้องการได้ตั้งแต่ต้น?
ให้ลองสั่งแบบนี้แทนครับ
ng g <ประเภทของ Component> /<ชื่อโฟลเดอร์>/<ชื่อ Component>
เช่นถ้าต้องการสร้าง Class ชื่อ User เก็บไว้ในโฟลเดอร์ชื่อ models ก็ต้องสั่ง
ng g class /models/user
หรือถ้าต้องการสร้าง Service Component ชื่อ Product เก็บไว้ในโฟลเดอร์ชื่อ services ก็ต้องสั่ง
ng g service /services/product
ยกเลิกการสร้างไฟล์ spec.ts
ค่าเริ่มต้นที่ Angular CLI กำหนดให้กับ Component เกือบทั้งหมด คือการสร้างไฟล์ spec.ts เพื่อใช้ในการเขียน Test ในการพัฒนาแบบ TDD (Test Driven-Development) กับ Component แต่ละตัว
ซึ่งการรัน Test นี้สามารถทำได้ผ่านคำสั่ง ng test โดย Angular CLI เลือกใช้ JavaScript Test Framework อย่าง Jasmine และระบบ Task Runner อย่าง Karma ในการทำงาน
จริงอยู่ที่เราไม่จำเป็นต้องสนใจไฟล์ spec.ts หรือจะลบทิ้งก็ได้ ไม่มีผลการการทำงานหลักของเว็บแอพพลิเคชั่น แต่หากเราไม่ต้องการตั้งแต่แรก จะสั่ง Angular CLI ยังไง?
ทำได้โดยการกำหนด option ของคำสั่ง ด้วย --spec=false หรือ --spec false นั่นเอง เช่น
ng g component checkout --spec=false
จะทำให้ Angular CLI ไม่สร้างไฟล์ spec.ts มาให้เรา มีแค่ 3 ไฟล์ จากปกติ 4 ไฟล์
create src/app/checkout/checkout.component.css create src/app/checkout/checkout.component.html create src/app/checkout/checkout.component.ts
สั่งเพิ่ม Service, Pipe, Directive, และ Guard เข้าไปใน Angular Module
โดยปกติ Angular Module จะเชื่อม Component ต่างๆ เข้าระบบให้สามารถทำงานได้ หรือในอีกทางหนึ่งคือ Component ต่างๆ จะต้องมีการประกาศใน Module ด้วยถึงจะทำงานได้อย่างปกติ
Angular CLI ในเวอร์ชั่นที่พลเขียนอยู่นี้ จะทำการเพิ่ม Component แบบธรรมดาเข้าไปในไฟล์ app.module.ts ให้ตอนที่สร้างขึ้นมา แต่กลับไม่ทำให้แบบเดียวกันในการสร้าง Component แบบอื่นๆ
เราสามารถบอกให้ Angular CLI เพิ่ม Component จำพวก Service, Pipe, Directive, หรือ Guard เข้าไปในไฟล์ app.module.ts หรือ Module ที่ต้องการได้ โดยการกำหนดค่าใช้ option ชื่อ –module หรือ –m ล่ะครับ เช่น
ng g service Department --m app
จะเป็นการสร้างไฟล์ของ Department Service Component ขึ้นมา และมีการไปเพิ่มไว้ในส่วนของ Provider ใน app.module.ts ให้ด้วย (ปกติต้องไปเพิ่มเอง!)
@NgModule({
....
providers: [ DepartmentService ],
...
})
สรุป
จะเห็นว่าหากเราศึกษาเทคนิคในการใช้ Angular CLI ละเอียดอีกนิดหนึง จะทำให้เกิดความง่าย และสะดวกสบายในการพัฒนาเว็บแอพพลิเคชั่น หรือโมบายล์แอพพลิเคชั่นด้วย Angular 2 และ Angular 4 เป็นต้นไปแน่นอน