Panduan Studi Sudut 15

Dec 01 2022

Semua yang perlu Anda ketahui untuk menguasai Angular versi baru

Versi terbaru Angular dirilis pada bulan November. Minko Gechev merangkum fitur-fitur baru terpenting dalam pengumuman rilisnya.

Dalam artikel ini, saya membagikan sumber daya yang akan mengajari Anda cara kerja fitur Angular baru ini:

Standalone API (sekarang sudah stabil)
API mandiri yang dapat diguncang pohon router dan penjaga router fungsional
API mandiri HttpClient yang dapat diguncang pohon
API komposisi direktif
Arahan gambar

API mandiri

Tim Angular memperkenalkan Standalone API di Angular v14 sebagai fitur pratinjau pengembang. Di Angular v15, mereka tidak lagi dalam pratinjau pengembang dan bagian dari permukaan API yang stabil.

Komponen, arahan, dan pipa sekarang dapat ditandai sebagai standalone: true. Kelas sudut yang ditandai sebagai mandiri tidak perlu dideklarasikan dalam NgModule.

Panduan “Memulai dengan komponen mandiri” dalam dokumentasi Angular menjelaskan cara membuat dan menggunakan komponen mandiri.

API mandiri yang dapat diguncang pohon router dan penjaga router fungsional

Andrew Scott menjelaskan cara membuat router tanpa a RouterModuledan cara menggunakan pelindung router fungsional:

Untuk mempelajari detail tambahan tentang cara mengurangi ukuran bundel dengan router dan komponen mandiri, baca artikel Kevin Kreuzer :

API mandiri HttpClient yang dapat diguncang pohon

Sekarang kita dapat menggunakan HTTP Client API tanpa HttpClientModule. Netanel Basal menunjukkan kepada kita bagaimana menerapkan fitur baru ini dan dia menunjukkan bagaimana kita dapat mendefinisikan pencegat dalam modul yang dimuat lambat:

API komposisi direktif

Dari dokumentasi resmi :

Arahan sudut menawarkan cara yang bagus untuk mengenkapsulasi perilaku yang dapat digunakan kembali — arahan dapat menerapkan atribut, kelas CSS, dan pendengar acara ke suatu elemen.

API komposisi direktif memungkinkan Anda menerapkan arahan ke elemen host komponen dari dalam komponen.

Cédric Exbrayat menjelaskan mengapa kami membutuhkan API baru ini:

Henrique Custódia mengilustrasikan dengan contoh yang bagus bagaimana komposisi Directive API bekerja :

Angular 15: Menggunakan Directive Composition API

Arahan gambar

Panduan “Memulai dengan NgOptimizedImage” dalam dokumentasi Angular menjelaskan, bagaimana NgOptimizedImagearahan mandiri yang baru membantu kami menerapkan praktik terbaik pengoptimalan kinerja untuk memuat gambar.

Fábio Englert Moutinho menguji NgOptimizedImagearahan dalam contoh aplikasi e-niaga, dan dia mencapai skor Lighthouse hingga 50% lebih baik:

➕ Pernahkah Anda melihat sumber daya lain yang harus saya tambahkan ke Panduan Studi Angular 15 ini? Silakan kirim ke saya sehingga saya dapat menampilkannya di artikel!

‍Tentang penulis

Nama saya Gergely Szerovay , saya bekerja sebagai pemimpin bab pengembangan frontend. Mengajar (dan belajar) Angular adalah salah satu minat saya. Saya mengonsumsi konten yang terkait dengan Angular setiap hari — artikel, podcast, pembicaraan konferensi, apa saja.

Jika Anda tertarik dengan koleksi bulanan saya untuk sumber daya Angular yang hebat, berlangganan publikasi saya yang disebut Angular Addicts. Anda dapat membaca edisi sebelumnya di sini .

Dan jika Anda telah melihat artikel, tweet, atau sumber lain terkait Angular yang bagus akhir-akhir ini, beri tahu saya di sini di komentar atau kirimkan saya DM di Twitter ! Saya mungkin menampilkannya di edisi berikutnya dari Angular Addicts!