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 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:

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

 @Component ({
   selector: 'my-app',
   standalone: true,
   template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
   firstName = signal('Jane');
   lastName = signal('Doe');
   fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
   constructor() {
       effect(() => console.log('Name changed:', this.fullName()));
   }
   setName(newName: string) {
       this.firstName.set(newName);
   }
} 

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:

  Name changed: 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 new --standalone 

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:

 export const routes: Routes = [{
   path: 'search:/id',
   component: SearchComponent,
   resolve: {
       searchDetails: 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:

 @Component({
   ...
})
export class SearchComponent {
   readonly #activatedRoute = inject(ActivatedRoute);
   readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id')));
   readonly data$ = this.#activatedRoute.data.map(({
       searchDetails
   }) => searchDetails);
} 

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(routes, {
   bindComponentInputs: true
})
 

Untuk aplikasi mandiri, Anda perlu memanggil fungsi sebagai gantinya:

 provideRoutes(routes, withComponentInputBinding()); 

Setelah Anda mengaktifkan fungsi ini, komponen menjadi lebih sederhana:

 @Component({
   ...
})
export class SearchComponent {
   @Input() id!: string;
   @Input() searchDetails!: SearchDetails;
} 

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 dalam siklus hidup NgOnInit jika variabel tidak ditentukan atau memodifikasi pemilih komponen untuk memasukkan input wajib.

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:

 @Input({
   required: true
}) name!: string;
 

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 build Vite juga memungkinkan penggunaan EsBuild selama pengembangan.

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

 "architect": {
   "build": {
       "builder": "@angular-devkit/build-angular:browser-esbuild",
       "options": {
           ...
       }
   } 

Harap perhatikan bahwa fungsi ini masih bersifat eksperimental.

Meningkatkan Pengalaman dan Kinerja Pengembangan

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