ต้องการให้เว็บไซต์ Angular รวดเร็วและเข้าถึงได้มากที่สุดไหม คุณมาถูกที่แล้ว
Angular คืออะไร
Angular เป็นเฟรมเวิร์กสำหรับการสร้างอินเทอร์เฟซผู้ใช้ โดยมีองค์ประกอบที่ใช้สร้างสรรค์เพื่อช่วยให้คุณตั้งค่าแอปพลิเคชันที่รองรับการปรับขนาดและบำรุงรักษาได้อย่างรวดเร็ว Angular ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแอปพลิเคชันที่ทํางานบนเว็บ อุปกรณ์เคลื่อนที่ หรือเดสก์ท็อปได้
คอลเล็กชันนี้มีอะไร
คอลเล็กชันนี้มุ่งเน้นที่ 5 ประเด็นหลักสำหรับการเพิ่มประสิทธิภาพแอปพลิเคชัน Angular ดังนี้
- การปรับปรุงประสิทธิภาพของแอปพลิเคชันเพื่อเพิ่ม Conversion และการมีส่วนร่วมของผู้ใช้
- ปรับปรุงความเสถียรของแอปพลิเคชันบนเครือข่ายที่ไม่ดีด้วยการแคชเนื้อหาล่วงหน้าด้วย Angular Service Worker
- การทำให้แอปพลิเคชันค้นพบได้สำหรับเครื่องมือค้นหาและบ็อตโซเชียลมีเดียโดยใช้การแสดงผลล่วงหน้าและการแสดงผลฝั่งเซิร์ฟเวอร์
- การทำให้แอปพลิเคชันติดตั้งได้เพื่อมอบประสบการณ์ของผู้ใช้ที่คล้ายกับแอป iOS/Android
- ปรับปรุงการช่วยเหลือพิเศษของแอปพลิเคชันเพื่อให้ผู้ใช้ทุกคนใช้งานและเข้าใจได้
แต่ละโพสต์ในคอลเล็กชันจะอธิบายเทคนิคที่คุณสามารถนำไปใช้กับแอปพลิเคชันของคุณเองได้โดยตรง
คอลเล็กชันนี้ไม่มีอะไรบ้าง
คอลเล็กชันนี้จะถือว่าคุณคุ้นเคยกับ Angular และ TypeScript อยู่แล้ว หากยังไม่แน่ใจ โปรดดูเอกสารประกอบของ TypeScript และคำแนะนำการเริ่มต้นใช้งาน Angular ที่ angular.io
เริ่มโปรเจ็กต์
อินเทอร์เฟซบรรทัดคำสั่ง Angular (CLI) ช่วยให้ตั้งค่าแอปพลิเคชัน Angular ฝั่งไคลเอ็นต์ได้อย่างรวดเร็ว โพสต์นี้มีการแนะนำ CLI สั้นๆ ส่วนโพสต์อื่นๆ ในคอลเล็กชันจะแสดงวิธีเพิ่มฟีเจอร์ขั้นสูง เช่น การแสดงผลฝั่งเซิร์ฟเวอร์และการสนับสนุนการติดตั้งใช้งาน
ตั้งค่า CLI
เริ่มต้นโดยติดตั้ง CLI ทั่วโลกและยืนยันว่าคุณมีเวอร์ชันล่าสุดโดยเรียกใช้คำสั่งต่อไปนี้
npm i -g @angular/cli
ng --version
ตรวจสอบว่าเอาต์พุตคำสั่งล่าสุดเป็นเวอร์ชัน 8.0.3 ขึ้นไป
หรือหากไม่ต้องการติดตั้ง 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
- การตรวจสอบการช่วยเหลือพิเศษด้วย Codelyzer