Setiap hari, kami memposting saran, trik, atau hanya beberapa bagian berguna dari pengalaman kami dengan Angular. Gerakan ini mendapat sambutan hangat dan didukung oleh komunitas pengembang.
Saya memutuskan untuk menulis artikel tentang sepuluh trik yang paling disukai dan menjelaskan konsep yang ditampilkan di dalamnya secara lebih rinci.
Ayo mulai!
Tokenkan objek global!
Tweet paling populer berbicara tentang token DI dari objek global.
Di frontend, kami terbiasa dengan fakta bahwa ada banyak objek di lingkungan global. Kami menggunakan objek seperti jendela, dokumen, metode pengambilan, lokasi dan kami tidak pernah mengharapkannya ada.
Tapi, misalnya, di Angular Universal atau lingkungan pengujian di Jest, tidak ada browser, tidak ada objek jendela, tidak ada DOM. Dan dengan melewatkan entitas ini melalui aplikasi melalui token, Anda tidak akan pernah mengalami masalah dalam menggunakannya, menggantinya, atau menguji kode Anda.
Mewarisi dari Observable atau Subject
Saya tahu banyak pengembang yang membuat layanan bagus di aplikasi mereka. Layanan ini melakukan satu hal dengan baik. Dan, karena kami menggunakan RxJS di ekosistem Angular, layanan semacam itu hanya dapat berisi satu bidang dengan Dapat diamati atau Subjek di dalamnya untuk mengubah data.
Situasi seperti itu dapat disederhanakan dengan mewarisi layanan dari Observable atau Subject:
Nilai kontrol sebagai ReplaySubject
Mungkin ada situasi ketika perlu untuk berlangganan valueChanges dari kontrol reaktif, memulai aliran dari nilai saat ini. Sekarang Anda tidak perlu menemukan kembali roda, tetapi cukup tambahkan pembungkus ini ke diri Anda sendiri:
Membuat aplikasi lebih baik untuk tampilan DPI Tinggi
Tahukah Anda bahwa Anda dapat dengan mudah melacak pengguna dengan layar DPI Tinggi?
Selain itu, Anda bahkan dapat menyediakan elemen media dengan resolusi yang sesuai untuk monitor tersebut menggunakan tag media asli dan tanpa upaya tambahan:
Jangan lupakan pipanya
Pipa adalah alat yang hebat untuk bekerja dengan gaya kerangka Angular. Mereka memungkinkan kita untuk tetap deklaratif dalam template komponen kita. Sangat menyedihkan bahwa beberapa pengembang Angular menghindari membuat pipa mereka sendiri: dengan mereka Anda dapat mengubah data dengan rapi di hampir semua situasi.
Dan berikut adalah contoh pipa universal untuk konversi data:
Buat kotak pisang Anda
Fitur Angular ini memiliki banyak nama: banana-in-a-box, two-way binding, atau hanya input-output. Pendekatan ini biasanya ditemukan dalam formulir saat bekerja dengan [(ngModel)]. Tapi tahukah Anda bagaimana menerapkan ini untuk komponen Anda sendiri?
RxJS - dunia yang tidak dikenal
Saya selalu mencoba untuk memeriksa semua parameter dan kelebihan beban untuk operator RxJS yang saya gunakan. Alasan: banyak dari mereka memiliki opsi tersembunyi, belajar yang Anda dapat menulis beberapa aliran lebih cepat dan lebih mudah.
Selain itu, ada juga operator yang kurang populer. Mereka jarang menemukan, tetapi mereka dapat menyelesaikan beberapa masalah tertentu dalam satu baris kode, bukan dalam aliran yang besar dan rumit.
Misalnya, salah satu penemuan ini bagi saya adalah fungsi perbandingan di operator differentUntilChanged:
Dan ada juga tweet populer tentang RxJS. Sedikit trik untuk membuat komponen Anda sedikit lebih mudah diperluas:
Atau operator defaultIfEmpty, yang memungkinkan Anda untuk memasukkan logika yang berguna ke dalam aliran dalam satu baris kode:
Anda bahkan dapat menulis alternatif Anda sendiri untuk ngFor
Dan satu hal terakhir: Angular memiliki sintaks khusus untuk pemilih direktif seperti untuk ... dari ... Anda dapat menggunakannya untuk membuat ngFor Anda sendiri untuk tugas apa pun.
Misalnya, Anda bisa melakukan ngFor cepat untuk melakukan iterasi pada objek Map. Atau cara sederhana untuk mengulang indeks dari satu nomor ke nomor lain:
Kesimpulan
Angular itu besar dan memiliki lebih banyak fitur. Saya memiliki sejumlah ide untuk trik dan trik baru dari praktik terbaik kami yang saya rencanakan untuk dibagikan dengan komunitas. Jika Anda tertarik dengan tweet baru seperti ini, ikuti saya di Twitter . Dan semoga harimu menyenangkan!