Apa yang Baru di Angular v16?

Angular, dikelola oleh Google, adalah kerangka kerja sumber terbuka yang banyak digunakan untuk mengembangkan aplikasi web. Ini menawarkan Anda perangkat yang kuat dan berbagai fitur yang memungkinkan Anda membuat aplikasi web yang dinamis, responsif, dan dapat diskalakan.

Peluncuran Angular versi 16 baru-baru ini memperkenalkan pembaruan dan peningkatan yang menarik untuk pengalaman pengembangan, serta kinerja dan stabilitas aplikasi yang lebih baik.

1. Sinyal Sudut

Sinyal Sudut adalah perpustakaan yang memungkinkan definisi nilai reaktif dan pembentukan ketergantungan di antara mereka. Berikut adalah contoh sederhana tentang cara memanfaatkan Sinyal Angular dalam aplikasi Angular:

@Komponen ({
 pemilih: 'aplikasi saya',
 mandiri: BENAR,
 templat: `
{{ nama lengkap() }} "setNama('John')">Klik</button>
`,
})
eksporkelas Aplikasi {
 nama depan = sinyal('Jane');
 nama belakang = sinyal('Kelinci betina'





instagram viewer
);
 nama lengkap = dihitung(() =>`${ini.nama depan()}${ini.nama keluarga()}`);
konstruktor() {
 memengaruhi(() =>menghibur.catatan('Nama diubah:', ini.nama lengkap()));
 }
 setName (NamaBaru: rangkaian) {
ini.firstName.set (namaBaru);
 }
}

Cuplikan kode di atas membuat nilai terkomputasi yang disebut fullName, yang bergantung pada sinyal firstName dan lastName. Selain itu, ini mendefinisikan efek, fungsi panggilan balik yang berjalan setiap kali nilai sinyal yang dibacanya berubah.

Dalam hal ini, nilai fullName bergantung pada firstName dan lastName, jadi mengubah salah satunya akan memicu efeknya. Ketika nilai firstName diatur ke John, browser mencatat pesan berikut ke konsol:

 Nama diubah: John Doe.

2. Koleksi Baru Ng Mandiri

Mulai dari Angular v16, Anda dapat membuat proyek mandiri baru sejak awal! Untuk mencoba pratinjau pengembang dari skema mandiri, pastikan Anda telah menginstal Angular CLI v16 dan menjalankan perintah berikut:

ng baru --mandiri

Dengan melakukan ini, Anda akan mendapatkan struktur proyek yang lebih sederhana tanpa NgModul. Selain itu, semua generator dalam proyek akan menghasilkan arahan, komponen, dan pipa yang berdiri sendiri!

3. Pemetaan Parameter Rute Otomatis

Pertimbangkan konfigurasi perutean sebagai berikut:

eksporconst rute: Rute = [{
 jalur: 'cari:/id',
 komponen: SearchComponent,
 menyelesaikan: {
 detail pencarian: searchResolverFn
 }
}];

Sebelum Angular 16, Anda perlu menyuntikkan layanan ActivatedRoute untuk mengambil parameter URL, parameter kueri, atau data terkait untuk URL tertentu.

Berikut adalah contoh bagaimana Anda harus melakukannya:

@Komponen({
 ...
})
eksporkelas SearchComponent {
 readonly #activatedRoute = menyuntikkan (ActivatedRoute);
 hanya baca id$ = ini.#activatedRoute.paramMap (peta(parameter => params.get('pengenal')));
 data hanya baca$ = ini.#activatedRoute.data.map(({
 searchDetails
 }) => Detail pencarian);
}

Dengan Angular 16, Anda tidak perlu lagi menyuntikkan layanan ActivatedRoute untuk mengambil berbagai parameter rute karena Anda dapat mengikatnya langsung ke input komponen.

Untuk mengaktifkan fungsionalitas ini di aplikasi yang menggunakan sistem modul, atur nilai yang sesuai di opsi RouterModule:

RouterModule.forRoot (rute, {
 bindComponentInputs: BENAR
})

Untuk aplikasi mandiri, Anda perlu memanggil fungsi sebagai gantinya:

provideRoutes (rute, withComponentInputBinding());

Setelah Anda mengaktifkan fungsi ini, komponen menjadi lebih sederhana:

@Komponen({
 ...
})
eksporkelas SearchComponent {
@Memasukkan() pengenal!: rangkaian;
@Memasukkan() cariDetails!: CariDetails;
}

4. Masukan yang Diperlukan

Fitur yang sangat dinantikan untuk komunitas Angular adalah kemampuan untuk menandai input tertentu sesuai kebutuhan. Hingga saat ini, Anda harus menggunakan berbagai solusi untuk mencapai hal ini, seperti memunculkan kesalahan di file NgOnInit siklus hidup jika variabel tidak ditentukan atau memodifikasi pemilih komponen untuk memasukkan yang wajib input.

Namun, kedua solusi ini memiliki kelebihan dan kekurangannya masing-masing. Mulai dari versi 16, membuat input yang diperlukan semudah menyediakan objek konfigurasi di metadata anotasi input:

@Memasukkan({
 diperlukan: BENAR
}) nama!: rangkaian;

5. Vite sebagai Dev Server

Angular 14 memperkenalkan bundler JavaScript baru yang disebut EsBuild, yang secara signifikan meningkatkan waktu pembuatan sekitar 40%. Namun, Anda hanya dapat menyadari perolehan kinerja ini selama fase pembuatan dan bukan selama pengembangan dengan server dev.

Dalam rilis Angular yang akan datang, alat pembuatan Vite memungkinkan penggunaan EsBuild selama pengembangan juga.

Untuk mengaktifkan fitur ini, perbarui konfigurasi builder di file angular.json sebagai berikut:

"arsitek": {
"membangun": {
"pembangun": "@angular-devkit/build-angular: browser-esbuild",
"pilihan": {
 ...
 }
 }

Harap perhatikan bahwa fungsi ini masih bersifat eksperimental.

Meningkatkan Pengalaman dan Kinerja Pengembangan

Versi Angular 16 menghadirkan pembaruan menarik seperti Sinyal Angular untuk mengelola data, proyek mandiri pembuatan, pemetaan parameter rute otomatis, input yang diperlukan, dan integrasi Vite untuk peningkatan perkembangan. Penyempurnaan ini meningkatkan pengalaman pengembangan dan meningkatkan kinerja aplikasi.