Angular เวอร์ชันล่าสุดเปิดตัวในเดือนพฤศจิกายน Minko Gechevสรุปคุณสมบัติใหม่ที่สำคัญที่สุดในประกาศเปิดตัว ของเขา

ในบทความนี้ ฉันแชร์แหล่งข้อมูลที่จะสอนคุณว่าฟีเจอร์เชิงมุมใหม่เหล่านี้ทำงานอย่างไร:

• API แบบสแตนด์อโลน (ตอนนี้เสถียรแล้ว)
• API แบบสแตนด์อโลนของเราเตอร์ที่สั่นคลอนได้และตัวป้องกันเราเตอร์ที่ใช้งานได้
• HttpClient tree-shakable API แบบสแตนด์อโลน
• API องค์ประกอบคำสั่ง
• คำสั่งรูปภาพ

API แบบสแตนด์อโลน

ทีมเชิงมุมแนะนำ API แบบสแตนด์อโลนใน Angular v14 เป็นคุณลักษณะการแสดงตัวอย่างสำหรับนักพัฒนา ใน Angular v15 พวกเขาไม่ได้อยู่ในการแสดงตัวอย่างสำหรับนักพัฒนาและเป็นส่วนหนึ่งของพื้นผิว API ที่เสถียรอีกต่อไป

ตอนนี้ส่วนประกอบ คำสั่ง และไปป์สามารถทำเครื่องหมายเป็นแบบสแตนด์อโลน: จริง คลาสเชิงมุมที่ทำเครื่องหมายเป็นสแตนด์อโลนไม่จำเป็นต้องประกาศใน NgModule

คู่มือ"เริ่มต้นใช้งานส่วนประกอบแบบสแตนด์อโลน"ในเอกสารเชิงมุมจะอธิบายวิธีสร้างและใช้ส่วนประกอบแบบสแตนด์อโลน

API แบบสแตนด์อโลนของเราเตอร์ที่สั่นคลอนได้และตัวป้องกันเราเตอร์ที่ใช้งานได้

Andrew Scottอธิบายถึงวิธีที่เราสามารถสร้างเราเตอร์โดยไม่ใช้ a RouterModuleและวิธีใช้ตัวป้องกันเราเตอร์ที่ใช้งานได้:

หากต้องการเรียนรู้รายละเอียดเพิ่มเติมเกี่ยวกับวิธีลดขนาดบันเดิลด้วยเราเตอร์และส่วนประกอบแบบสแตนด์อโลน โปรดอ่านบทความของKevin Kreuzer :

HttpClient tree-shakable API แบบสแตนด์อโลน

ตอนนี้เราสามารถใช้ HTTP Client API ได้โดยไม่ต้องใช้HttpClientModule. Netanel Basalแสดงให้เราเห็นถึงวิธีการใช้คุณสมบัติใหม่นี้ และเขาแสดงให้เห็นว่าเราสามารถกำหนดตัวสกัดกั้นในโมดูลที่โหลดแบบ Lazy Loading ได้อย่างไร:

API องค์ประกอบคำสั่ง

จากเอกสารอย่างเป็นทางการ:

คำสั่งเชิงมุมเป็นวิธีที่ยอดเยี่ยมในการสรุปลักษณะการทำงานที่ใช้ซ้ำได้ คำสั่งสามารถใช้แอตทริบิวต์ คลาส CSS และตัวฟังเหตุการณ์กับองค์ประกอบได้

API องค์ประกอบคำสั่งช่วยให้คุณใช้คำสั่งกับองค์ประกอบโฮสต์ของคอมโพเนนต์จากภายในคอมโพเนนต์

Cédric Exbrayatอธิบายว่าทำไมเราถึงต้องการ API ใหม่นี้:

Henrique Custódiaอธิบายตัวอย่างที่ยอดเยี่ยมว่า API องค์ประกอบ Directive ทำงานอย่างไร:

เชิงมุม 15: การใช้ Directive Composition API

คำสั่งรูปภาพ

คู่มือ"เริ่มต้นใช้งาน NgOptimizedImage"ในเอกสารเชิงมุมอธิบายว่าNgOptimizedImageคำสั่งแบบสแตนด์อโลนใหม่ช่วยให้เราปรับใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับการโหลดรูปภาพได้ อย่างไร

Fábio Englert MoutinhoทดสอบNgOptimizedImageคำสั่งดังกล่าวในแอปพลิเคชันอีคอมเมิร์ซตัวอย่าง และเขาได้คะแนน Lighthouse ดีขึ้นถึง 50%:

➕ คุณเคยเห็นแหล่งข้อมูลอื่นใดที่ฉันควรเพิ่มในคู่มือการศึกษา Angular 15 หรือไม่ โปรดส่งมาให้ฉันเพื่อที่ฉันจะได้นำเสนอในบทความ!

‍เกี่ยวกับผู้เขียน

ฉันชื่อGergely Szerovayฉันทำงานเป็นหัวหน้าแผนกพัฒนาส่วนหน้า การสอน (และการเรียนรู้) เชิงมุมเป็นหนึ่งในความสนใจของฉัน ฉันใช้เนื้อหาที่เกี่ยวข้องกับ Angular เป็นประจำทุกวัน ไม่ว่าจะเป็นบทความ พอดแคสต์ การพูดคุยในการประชุม เป็นต้น

หากคุณสนใจคอลเล็กชันทรัพยากรเชิงมุมที่ยอดเยี่ยมประจำเดือนของฉันสมัครสมาชิกสิ่งพิมพ์ของฉันที่ชื่อว่า Angular Addicts คุณสามารถอ่านปัญหาก่อนหน้านี้ได้ที่นี่

และหากคุณได้เห็นบทความ ทวีต หรือทรัพยากรอื่นๆ ที่เกี่ยวข้องกับ Angular เมื่อเร็ว ๆ นี้ โปรดแจ้งให้เราทราบที่นี่ในความคิดเห็นหรือส่ง DM มาให้ฉันทางTwitter ! ฉันอาจนำเสนอในฉบับถัดไปของ Angular Addicts!

นอกจากนี้ โปรดแจ้งให้เราทราบว่าคุณสนใจหัวข้อเชิงมุมอื่นๆ ใดบ้าง ฉันมีบทความฉบับร่างจำนวนมากที่นี่บนสื่อที่รอการเผยแพร่

ติดตามฉันบนMedium , TwitterหรือLinkedInเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ Angular!