Memodenkan Sudut: Apa yang Baharu dalam Sudut 19

Angular 19 telah tiba secara rasmi dan ia padat dengan pelbagai ciri yang bertujuan untuk meningkatkan pengalaman, prestasi dan kebolehsuaian pembangun.

Dalam artikel ini, saya akan membimbing anda melalui sorotan utama dan perkara yang menjadikan Angular 19 sebagai langkah penting ke hadapan untuk pembangunan web moden.

1. Penghidratan Bertambah: Pengubah Permainan untuk SSR

Pengenalan penghidratan tambahan dalam Angular 19 membawa Perenderan Sisi Pelayan (SSR) ke tahap yang lebih tinggi. Tidak seperti pendekatan penghidratan penuh tradisional, penghidratan tambahan membenarkan komponen yang diberikan pelayan untuk menghidrat hanya apabila mereka memasuki port pandangan atau menjadi interaktif.

Ini menghasilkan masa muat yang lebih cepat dan pengalaman pengguna yang lebih baik. Ciri ini kini berada dalam pratonton pembangun, tetapi ia menunjukkan janji yang baik untuk mengoptimumkan beban awal dan meningkatkan markah Lighthouse.

Untuk mencapai matlamat ini, Angular bekerjasama dengan Chrome Aurora untuk membawakan pengalaman SSR yang lebih lancar yang boleh disesuaikan dengan penggunaan dunia sebenar, memfokuskan pada penghidratan malas. Pembangun kini boleh menggunakan arahan seperti @defer untuk mengawal dengan tepat apabila komponen harus terhidrat, menjadikan proses itu sangat cekap.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

2. Ulangan Acara: Memastikan Interaksi Pengguna Lancar

Masalah biasa dalam apl yang diberikan sebelah pelayan ialah kelewatan antara interaksi pengguna dan JavaScript yang bertanggungjawab untuk mengendalikan interaksi yang dimuatkan.

Main semula acara, kini didayakan secara lalai dalam Angular 19, menangkap peristiwa pengguna semasa pemuatan awal dan memainkannya semula apabila JavaScript yang diperlukan tersedia. Ini memastikan pengalaman pengguna yang lancar, walaupun apl masih dalam proses penghidratan.

Penghantaran acara dikuasakan oleh perpustakaan yang sama yang digunakan oleh Carian Google (Wiz) dan telah diuji oleh berbilion pengguna.

Untuk mendayakan main semula acara, Angular menggunakan persediaan berikut dalam pembekal penghidratan:

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Ini memastikan bahawa sebarang interaksi pengguna yang berlaku sebelum JavaScript dimuatkan sepenuhnya tidak hilang, memberikan pengalaman yang lancar.

3. Mod Render Tahap Laluan: Kawalan Halus Ke Atas Rendering

Angular 19 memperkenalkan mod pemaparan peringkat laluan, yang membolehkan pembangun menentukan cara laluan individu dalam aplikasi harus diberikan—sama ada pada pelayan, klien atau prapaparan semasa proses binaan.

Ini memberikan kawalan terperinci ke atas strategi pemaparan, membolehkan pembangun mengoptimumkan prestasi dan SEO berdasarkan keperluan khusus setiap laluan.

Contoh: Laluan log masuk boleh diberikan bahagian pelayan untuk masa pemuatan awal yang lebih pantas, manakala laluan papan pemuka boleh diberikan bahagian pelanggan untuk meningkatkan interaktiviti. Fleksibiliti ini membantu memastikan setiap bahagian aplikasi dioptimumkan untuk kes penggunaan yang dimaksudkan.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Angular juga menyediakan cara mudah untuk menyelesaikan parameter laluan semasa prapemarahan, membenarkan halaman prapaparan yang sangat disesuaikan:

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

Antara muka baharu ini, ServerRoute, memberikan pembangun kawalan yang lebih besar terhadap cara kandungan dihantar, meningkatkan pengalaman pengguna dan SEO.

4. Penggantian Modul Panas (HMR) Baru Dapat Segera

Angular 19 memperkenalkan HMR segera, membenarkan gaya dan templat dikemas kini tanpa memuatkan semula keseluruhan apl. Ini bermakna pembangun dapat melihat kesan perubahan mereka dengan serta-merta, menjadikan kitaran pembangunan lebih lancar dan pantas. Penggantian modul panas untuk gaya didayakan secara lalai dalam v19! Untuk mencuba HMR untuk templat gunakan:

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Untuk melumpuhkan ciri ini tentukan "hmr": false sebagai pilihan pelayan pembangunan, atau gunakan secara alternatif:

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

5. Sokongan Tanpa Zon: Evolusi Berterusan

Enam bulan lalu, Angular memperkenalkan sokongan tanpa zon percubaan. Sejak itu, Angular telah mengulangi API dan mempertingkatkannya—menambah sokongan untuk pemaparan sebelah pelayan dan menambah baik pengalaman ujian.

Angular bekerjasama dengan pasukan Google Fonts untuk menjadikan aplikasi mereka tanpa zon dan menilai pengalaman pembangun. Hasilnya melebihi jangkaan, tetapi masih terdapat beberapa lagi sentuhan penggilap sebelum mengalihkan API ini ke pratonton pembangun.

Angular 19 terus bergerak ke arah masa depan di mana operasi tanpa zon menjadi lalai, memudahkan pengesanan perubahan dengan ketara dan menjadikan aplikasi lebih ramping.

Untuk bereksperimen dengan tanpa zon, gunakan persediaan berikut:

export const routeConfig: ServerRoute = [{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
    const dataService = inject(ProductService);
    const ids = await dataService.getIds();
    return ids.map(id => ({ id }));
  },
}];

6. Isyarat Terpaut: Keadaan Reaktif dengan Kesedaran Kontekstual

Salah satu tambahan baharu yang paling hebat ialah isyarat terpaut. Dengan ciri ini, isyarat yang diikat bersama mengekalkan perhubungan mereka walaupun semasa data dikemas kini. Ini amat berguna untuk senario di mana berbilang titik data perlu kekal disegerakkan secara dinamik. Contohnya, mengekalkan keadaan lungsur turun atau pilihan yang diperoleh daripada sumber reaktif lain kini lebih mudah dan memerlukan kurang plat dandang.

NG_HMR_TEMPLATES=1 ng serve

API linkedSignal menyediakan cara mudah untuk menyatakan kebergantungan antara elemen stateful tanpa menggunakan kesan. API baharu mempunyai dua bentuk: versi ringkas (ditunjukkan di sini) dan versi lanjutan yang memberikan pembangun akses kepada nilai sebelumnya bagi isyarat terpaut dan sumber.

7. Peningkatan Bahan Sudut

Bahan Angular juga mendapat peningkatan yang ketara dalam Angular 19. Kini terdapat API bertema baharu yang lebih disesuaikan, membolehkan pembangun mengatasi gaya dengan mudah dan mengubah rupa dan rasa komponen Bahan Sudut tanpa menyelami lebih mendalam CSS bersarang. Dokumentasi setiap komponen juga termasuk tab Penggayaan untuk rujukan lebih mudah tentang cara membuat perubahan ini.

Komponen Drag and Drop yang dinanti-nantikan akhirnya telah ditambahkan secara asli pada Angular Material, membolehkan pembangun melaksanakan interaksi drag-and-drop yang canggih tanpa bergantung pada perpustakaan pihak ketiga.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Untuk menyesuaikan komponen individu:

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

8. Skrip Migrasi untuk Isyarat

Menghijrahkan apl anda kepada model kereaktifan berasaskan isyarat baharu kini lebih mudah berkat skrip migrasi terbina dalam. Skrip ini membantu mengalihkan input, output dan pertanyaan sedia ada anda untuk menggunakan isyarat dan bukannya penghias Angular yang lebih lama, memastikan apl anda kekal moden dengan usaha yang minimum.

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

9. Dasar Keselamatan Kandungan Dipertingkat

Keselamatan ialah satu lagi fokus utama keluaran ini. Angular 19 memperkenalkan sokongan untuk auto CSP (Dasar Keselamatan Kandungan), yang secara automatik menambah konfigurasi CSP selamat pada aplikasi anda untuk mengelakkan serangan XSS dan kelemahan lain secara lalai. Ini merupakan langkah penting ke arah amalan keselamatan yang lebih baik dengan konfigurasi manual yang kurang.

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

10. Masa Depan Pengujian dalam Sudut

Akhir sekali, nota utama mengenai ujian—Karma sedang ditamatkan dan memihak kepada alatan yang lebih moden seperti Jest dan Web Test Runner. Menjelang pertengahan 2025, Karma tidak akan disokong lagi, yang memberikan pembangun masa yang mencukupi untuk berhijrah kepada persediaan ujian yang lebih andal yang menyepadukan dengan lancar dengan seluruh ekosistem Angular moden.

Membungkus

Angular 19 bukan sekadar kemas kini; ia adalah versi berfikiran ke hadapan yang mengoptimumkan untuk kedua-dua pembangun dan pengalaman pengguna. Dengan ciri seperti penghidratan tambahan, ulang tayang acara, mod pemaparan peringkat laluan, HMR segera, langkah ke arah tanpa zon dan pelbagai peningkatan produktiviti, versi ini membawa Angular lebih dekat kepada idealnya—rangka kerja moden, berprestasi tinggi, mesra pembangun .

Jika anda ingin berhijrah atau memulakan projek baharu, Angular 19 menyediakan asas kukuh yang menyokong ciri termaju dan amalan terbaik yang berkembang. Beritahu saya ciri yang paling anda teruja atau jika anda mempunyai sebarang soalan tentang penggunaan Angular 19 dalam projek anda!

Atas ialah kandungan terperinci Memodenkan Sudut: Apa yang Baharu dalam Sudut 19. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!