Angular Academy · Pelajaran

Angular Tanpa Zon

Jalankan Angular tanpa Zone.js.

Pelajaran 3 daripada 413 langkah

Angular Tanpa Zon ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Melangkaui Zone.js

Zone.js mempunyai overhed dan menampal API global. Angular moden menawarkan mod tanpa zon, yang memacu pengesanan perubahan melalui isyarat dan pemberitahuan eksplisit, bukannya tampalan zon.

Mendayakan Mod Tanpa Zon

Sediakan pembekal pengesanan perubahan tanpa zon dalam konfigurasi but anda.

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

Membuang Zone.js

Dalam mod tanpa zon, anda juga membuang polipil zone.js daripada konfigurasi binaan, sekali gus mengurangkan saiz berkas dan kos permulaan.

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

Apakah yang Mencetuskan Pengesanan Sekarang?

Tanpa zon, Angular menjadualkan pengesanan perubahan apabila: isyarat yang dibaca dalam templat berubah, paip async mengeluarkan nilai, pengikatan peristiwa dicetuskan, atau markForCheck() dipanggil.

Isyarat Adalah Teras

Aplikasi tanpa zon sangat bergantung pada isyarat untuk mengurus keadaan. Membaca isyarat dalam templat mewujudkan kebergantungan; mengemas kininya memberitahu Angular untuk menyegarkan paparan tersebut.

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

Peristiwa Tetap Memberi Pemberitahuan

Pengikatan peristiwa templat memberitahu Angular secara terus, jadi interaksi pengguna terus mengemas kini UI tanpa zon.

<button (click)="count.update(c => c + 1)">+</button>

Asinkron Tanpa Zon

setTimeout mentah atau operasi asinkron bukan isyarat tidak lagi mencetuskan pengesanan secara automatik. Balut keadaan sedemikian dalam isyarat atau panggil markForCheck().

setTimeout(() => this.ready.set(true), 1000);

Keserasian Paip async

Paip async terus berfungsi dalam mod tanpa zon kerana ia menandakan paparan untuk disemak secara eksplisit pada setiap pengeluaran nilai.

<p>{{ data$ | async }}</p>

Pustaka Pihak Ketiga

Sesetengah pustaka menganggap Zone.js menyediakan pengesanan automatik. Dalam mod tanpa zon, anda mungkin perlu membalut panggilan baliknya untuk mengemas kini isyarat atau memanggil markForCheck() secara manual.

Manfaat

Mod tanpa zon bermaksud berkas yang lebih kecil, permulaan yang lebih pantas, kurang kitaran tambahan yang tidak dijangka, serta model mental yang lebih jelas: UI hanya dikemas kini apabila keadaan yang anda jejaki benar-benar berubah.

Status Eksperimen

Pembekal itu dinamakan provideExperimentalZonelessChangeDetection kerana API tersebut masih distabilkan. Gunakannya untuk aplikasi baharu yang mengutamakan isyarat dan uji dengan teliti.

Semakan Pantas

Uji pemahaman anda tentang Angular tanpa zon.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari bahawa provideExperimentalZonelessChangeDetection() menghapuskan keperluan terhadap Zone.js, dengan memacu kemas kini melalui isyarat, peristiwa, paip async dan markForCheck() untuk menghasilkan aplikasi yang lebih kecil, pantas dan boleh dijangka.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Angular Tanpa Zon” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Angular Tanpa Zon”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Angular Tanpa Zon”?

Jalankan Angular tanpa Zone.js. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Angular Tanpa Zon” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy