การใช้งาน Angular CLI พื้นฐาน (ตอนที่ 2)

ฟีเจอร์ต่างๆ ของ Angular CLI และการ Build โปรเจค พร้อมความรู้สึกหลังจากใช้งาน

Source :http://www.spjeff.com/wp-content/ftp_uploads/Angular-2--Todo-List-in-SharePoint-Conte_C444/image.png

หลัังจากที่ได้เรียนรู้วิธีการสร้าง Angular CLI ในตอนที่ 1 เรียบร้อยแล้ว ตอนที่ 2 จะกล่าวถึงฟีเจอร์ต่างๆ ที่ติดมากับ Angular CLI ว่าทำอะไรได้อีกบ้าง เรามาเริ่มกันเลย..

มีอะไรบ้าง

• Generating Features
• วิธีการเพิ่มไฟล์ CSS, JavaScript ลงใน Angular CLI
• ng test คืออะไร
• วิธีการ Build โปรเจค
• ความรู้สึกหลังใช้

Generating Features

คำสั่งที่ใช้ในการสร้าง คือ ng generate <feature><options> ซึ่งสามารถสร้างส่วนต่างๆ ได้ดังนี้

1. Component

ng generate component contact

ตัวอย่างการสร้างไฟล์ component ใหม่

โครงสร้างไฟล์ที่ได้จากการรันคำสั่งสร้าง Component

เมื่อมี Component ใหม่เกิดขึ้น เราต้องทำการ Import Component เข้าไปในไฟล์ module.ts เพื่อที่จะทำความรู้จักกับทั้งโปรเจค แต่ Angular CLI นั้นจะทำการ import ให้อัตโนมัติโดยที่เราไม่ต้องไปเขียนโค้ด Import เอง… เจ๋ง!

Option

สร้าง Component ที่เป็น inline template คือจะไม่มีไฟล์ .html

ng g c COMPONENT-NAME — it

สร้าง Component ที่เป็น inline style คือจะไม่มีไฟล์ .css / .sass / .scss

ng g c COMPONENT-NAME — is

2. Directive

ng generate directive btnDelete

ตัวอย่างหน้าจอการสร้างไฟล์ directive

Angular Cli จะสร้างไฟล์ใหม่ทั้งหมด 2 ไฟล์ด้วยกัน คือ

└── btn-delete.directive.spec.ts
└── btn-delete.directive.ts

และจะทำการ Import Class ให้อัตโนมัติ ในไฟล์ app.module เช่นเดียวกัน

Option

ทำการสร้างโฟลเดอร์ชื่อ btnComfirm2 และในโฟลเดอร์จะประกอบด้วยไฟล์ directive 2 ไฟล์

ng g d btnConfirm2 –flat false

เปลี่ยนคำนำหน้าใน selector จาก app เป็น my

ng g d btnConfirm2 –prefix my

3. Service

ng generate service contactData

รูปแสดงตัวอย่างหน้าจอการสร้างไฟล์ service

Angular CLI จะสร้างไฟล์ใหม่ทั้งหมด 2 ไฟล์ด้วยกัน แต่จะมี Waring เตือนว่ายังไม่ได้กำหนด Provided ให้กับแอพพลิเคชั่น ซึ่งเราสามารถเพิ่ม Provided ได้ในไฟล์ app.module โดยการ import service เข้าไปและเรียกใช้ใน NgModule Providers ตามรูปด้านล่าง

รูปแสดงการแก้ไขโค้ดเพื่อทำการ Import Class Service มาใช้งาน

แต่หากต้องการให้ Angular CLI เพิ่มการ Import ให้อัตโนมัตินั้นก็สามารถทำได้เช่นกัน โดยใช้คำสั่ง

ng g s contactData2 –m app.module

Option จะเหมือนกันกับการสร้าง Directive

4. Pipes

ng generate pipe ConverToInches

รูปแสดงตัวอย่างหน้าจอการสร้างไฟล์ pipe

Angular Cli จะสร้างไฟล์ใหม่ทั้งหมด 2 ไฟล์ด้วยกัน คือ

└── convert-to-inches.pipe.spec.ts
└── convert-to-inches.pipe.ts

และจะทำการ Import Class ให้อัตโนมัติ ในไฟล์ app.module

Option จะเหมือนกันกับการสร้าง Directive

5. Interface, Enumeration และ Class

ng generate interface person
ng generate enum direction
ng generate class contact

Angular CLI จะสร้างไฟล์ให้ 1 ไฟล์ตามประเภทที่เรา Generate หากต้องการให้ไฟล์อยู่ภายใต้โฟลเดอร์ที่ต้องการ สามารถสร้างได้ดังนี้

ng generate class model/contact

รูปแสดงการสร้าง Class และ Interface อยู่ในโฟลเดอร์เดียวกัน

6. Module

ng generate module admin หรือ ng g m admin

รูปแสดงการสร้าง Module

Angular CLI จะทำการสร้างโฟลเดอร์และสร้างไฟล์ใหม่ให้อัตโนมัติ ต่อไปหากต้องการสร้าง Component เข้าไปในโฟลเดอร์ admin ก็ใช้คำสั่ง

ng g c admin

รูปแสดงการสร้าง Component ในโฟลเดอร์ admin

Angular CLI ก็จะทำการสร้างไฟล์ component ให้อัตโนมัติ 4 ไฟล์ด้วยกัน รวมไปถึง จะทำการ Import ตัว Class Component ลงใน admin.module ให้อัตโนมัติอีกด้วย

วิธีการเพิ่มไฟล์ CSS, JavaScript ลงใน Angular CLI

เราสามารถเพิ่มไฟล์ CSS หรือ JavaScript ที่เราสร้างขึ้นเองได้โดยการใส่ Path เข้าไปในไฟล์ .angular-cli.json

รูปแสดงการเพิ่มไฟล์ที่ต้องการใช้งานเข้าไปในโปรเจค

เมื่อทำการ Run โปรเจคขึ้นมา ไฟล์ที่เราได้เพิ่มเข้าไปใหม่จะสามารถใช้งานได้ทันที

ng test คืออะไร

เราจะเห็นไฟล์ที่เป็นสกุล spec.ts เกือบทั้งหมด ไฟล์นี้จะใช้เพื่อเขียน Test ในการพัฒนาแบบ TDD (Test Driven-Development) กับ Component แต่ละตัว ซึ่ง Angular CLI เลือกใช้ JavaScript Framework สำหรับการ Test อย่าง Jasmine และระบบ Task Runner อย่าง Karma ในการทำงาน และจะทำการตรวจสอบไฟล์ทุกครั้งที่มีการแก้ไข

วิธีการ Build โปรเจค

แน่นอนว่าหากเราพัฒนาโปรเจคอันสุดคูลของเราเรียบร้อยแล้ว ขั้นตอนต่อไปก็คือการ Build โปรเจคเพื่อเอาไปใช้งานหรือเอาไปให้ Tester ทำการ Test โปรเจค วิธีการ Build มี 2 แบบคือ

1. Development Mode

ng build --environment=dev
ng build --e=dev
ng build

2. Production Mode

ng build --environment=prod
ng build --e=prod

เมื่อ Run คำสั่ง Build โปรเจค — Angular CLI จะทำการสร้างไฟล์ Bundle ต่างๆ (จาก Webpack) ซึ่งจะเก็บไว้ในโฟลเดอร์ dist/ หาก Run คำสั่งเดิมอีกครั้ง โฟลเดอร์ dist/ ที่มีอยู่จะถูกลบและสร้างขึ้นมาใหม่

การ Build ระหว่าง -dev กับ –prod แตกต่างกันอย่างไร

• -dev จะมีการสร้างไฟล์ map ขึ้นมาแต่ -prod ไม่มี
• -dev จะไม่มีการ Build ไฟล์ CSS
• -dev จะมีขนาดไฟล์ที่ใหญ่กว่า -prod เพราะ -prod mode นั้นจะทำการ minify ที่เป็นไฟล์ JavaScript, TypeScript, SASS, และ LESS

ภาพแสดงเปรียบเทียบ -dev mode และ -prod mode

ความรู้สึกหลังใช้

ส่วนตัวผมชอบมากๆ เลยนะครับ เพราะมีฟีเจอร์ที่ใช้งานหลากหลาย ทำให้เราพัฒนาแอพลิเคชั่นที่เขียนด้วย Angular ได้เร็วยิ่งขึ้น ไม่ว่าจะเป็นการสร้าง Component สร้าง Service ที่มีฟอร์เมตมาให้เหมือนกัน ทำให้ไฟล์ทุกไฟล์เราเป็นมาตรฐานเดียวกัน และรวมไปถึงการสั่ง Build Project การ Test Project ด้วย Karma เป็นต้น ไม่ต้องหา Dependency ให้เหนื่อย

อ้างอิง

Angular CLI — Mastering the Basics — Udemy