หากต้องการทำให้เว็บไซต์ Angular ของคุณทำงานได้เร็วและเข้าถึงได้ง่ายที่สุด คุณมาถูกที่แล้ว
Angular คืออะไร
Angular เป็นเฟรมเวิร์กสำหรับสร้างอินเทอร์เฟซผู้ใช้ โดยมีองค์ประกอบที่ช่วยให้คุณตั้งค่าแอปพลิเคชันที่บำรุงรักษาและปรับขนาดได้ได้อย่างรวดเร็ว Angular ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแอปพลิเคชันที่ทำงานบนเว็บ อุปกรณ์เคลื่อนที่ หรือเดสก์ท็อปได้
คอลเล็กชันนี้มีอะไรบ้าง
คอลเล็กชันนี้มุ่งเน้นที่ 5 ด้านหลักๆ ในการเพิ่มประสิทธิภาพแอปพลิเคชัน Angular ได้แก่
- การปรับปรุงประสิทธิภาพของแอปพลิเคชันเพื่อเพิ่ม Conversion และการมีส่วนร่วมของผู้ใช้
- การปรับปรุงความน่าเชื่อถือของแอปพลิเคชันในเครือข่ายที่มีคุณภาพต่ำด้วยการแคชเนื้อหาล่วงหน้าโดยใช้ Service Worker ของ Angular
- การทำให้แอปพลิเคชันค้นพบได้สำหรับเครื่องมือค้นหาและบ็อตโซเชียลมีเดียโดยใช้การแสดงผลล่วงหน้าและการแสดงผลฝั่งเซิร์ฟเวอร์
- การทำให้แอปพลิเคชันติดตั้งได้เพื่อมอบประสบการณ์ของผู้ใช้ที่คล้ายกับแอป Android/iOS
โพสต์แต่ละรายการในคอลเล็กชันจะอธิบายเทคนิคที่คุณนำไปใช้กับแอปพลิเคชันของคุณเองได้โดยตรง
สิ่งที่ไม่มีในคอลเล็กชันนี้
คอลเล็กชันนี้มีสมมติฐานว่าคุณคุ้นเคยกับ Angular และ TypeScript อยู่แล้ว หากยังไม่มั่นใจที่จะใช้เครื่องมือเหล่านี้ โปรดดูเอกสารประกอบของ TypeScript และคู่มือการเริ่มต้นใช้งาน Angular ใน angular.io
เริ่มต้นโปรเจ็กต์
อินเทอร์เฟซบรรทัดคำสั่ง (CLI) ของ Angular ช่วยให้คุณตั้งค่าแอปพลิเคชัน Angular ฝั่งไคลเอ็นต์แบบง่ายๆ ได้อย่างรวดเร็ว โพสต์นี้มีข้อมูลเบื้องต้นสั้นๆ เกี่ยวกับ CLI ส่วนโพสต์อื่นๆ ในคอลเล็กชันจะแสดงวิธีเพิ่มฟีเจอร์ขั้นสูง เช่น การแสดงผลฝั่งเซิร์ฟเวอร์และการรองรับการติดตั้งใช้งาน
ตั้งค่า CLI
เริ่มต้นด้วยการติดตั้ง CLI ทั่วโลกและตรวจสอบว่าคุณมีเวอร์ชันล่าสุดโดยเรียกใช้คำสั่งต่อไปนี้
npm i -g @angular/cli
ng version
ตรวจสอบว่าเอาต์พุตจากคำสั่งสุดท้ายแสดงผลเป็นเวอร์ชัน 8.0.3 ขึ้นไป
หรือหากไม่ต้องการติดตั้ง CLI ทั่วโลก คุณสามารถติดตั้ง CLI ในเครื่องและเรียกใช้ด้วยคำสั่ง npx ดังนี้
npm i @angular/cli
npx ng version
สร้างโปรเจ็กต์
วิธีสร้างการเรียกใช้โปรเจ็กต์ใหม่
ng new my-app
คำสั่งนี้จะสร้างไฟล์เริ่มต้นและโครงสร้างโฟลเดอร์สำหรับแอปพลิเคชันของคุณ และติดตั้งโมดูลโหนดที่จำเป็น
เมื่อกระบวนการตั้งค่าเสร็จสมบูรณ์แล้ว ให้เริ่มแอปพลิเคชันโดยเรียกใช้คำสั่งต่อไปนี้
cd my-app
ng serve
ตอนนี้คุณควรเข้าถึงแอปพลิเคชันได้ที่ http://localhost:4200
ต้องทำอะไรต่อ
ในส่วนที่เหลือของคอลเล็กชันนี้ คุณจะได้เรียนรู้วิธีปรับปรุงประสิทธิภาพและ SEO ของแอปพลิเคชัน Angular โดยมีรายละเอียดดังนี้
- การแยกโค้ดระดับเส้นทางใน Angular
- งบประมาณด้านประสิทธิภาพด้วย Angular CLI
- กลยุทธ์การดึงข้อมูลเส้นทางล่วงหน้าใน Angular
- การเพิ่มประสิทธิภาพการตรวจหาการเปลี่ยนแปลงใน Angular
- สร้างรายการขนาดใหญ่แบบเสมือนจริงด้วย Angular CDK
- การแคชล่วงหน้าด้วย Angular Service Worker
- แสดงผลเส้นทางล่วงหน้าด้วย Angular CLI
- การแสดงผลฝั่งเซิร์ฟเวอร์ด้วย Angular Universal
- เพิ่มไฟล์ Manifest ของเว็บแอปด้วย Angular CLI