Angular Academy · Pelajaran

Mengapa Komponen Standalone

Lihat cara komponen standalone menyederhanakan Angular.

Mengapa Komponen Standalone adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Mengapa Komponen Mandiri?

Komponen mandiri memungkinkan Anda membangun aplikasi Angular tanpa NgModules. Komponen menyatakan dependensinya sendiri sehingga blok penyusunnya berdiri sendiri dan lebih mudah dipahami.

Era NgModule

Secara tradisional, setiap komponen, direktif, dan pipe harus dideklarasikan di dalam @NgModule. Modul mengelompokkan deklarasi serta mengelola impor dan ekspor.

Hal ini menambahkan kode pendukung yang berulang dan lapisan pengalihan tambahan.

Masalah yang Disebabkan NgModules

NgModules menimbulkan hambatan umum: lupa mendeklarasikan komponen, mendeklarasikannya di dua modul, bingung membedakan impor dan deklarasi, serta modul bersama berukuran besar yang memuat terlalu banyak hal.

Gagasan Komponen Mandiri

Dengan komponen mandiri, setiap komponen mencantumkan tepat apa yang dibutuhkannya melalui array imports miliknya sendiri. Tidak ada modul pusat yang harus mengetahuinya.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<p>Hello</p>'
})
export class HelloComponent {}

Dependensi yang Berdiri Sendiri

Karena komponen mandiri mendeklarasikan dependensinya sendiri, Anda dapat membaca satu file dan mengetahui semua hal yang diandalkannya. Hal ini meningkatkan kejelasan dan dukungan alat pengembangan.

Lebih Sedikit Kode Pendukung

Tidak perlu lagi mencocokkan deklarasi dan ekspor di berbagai modul. Anda mengimpor komponen secara langsung di tempat penggunaannya, mirip dengan cara kerja modul ES.

Tree-Shaking yang Lebih Baik

Komponen mandiri membuat grafik dependensi menjadi eksplisit, sehingga membantu pengemas menghapus kode yang tidak digunakan dan dapat menghasilkan paket yang lebih kecil.

Pemuatan Malas Menjadi Sederhana

Rute dapat memuat komponen mandiri secara malas langsung melalui impor dinamis, tanpa memerlukan pembungkus modul fitur.

// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)

Bawaan Baru

Pada versi Angular terbaru, mandiri menjadi bawaan untuk komponen yang baru dibuat. NgModules tetap berfungsi, tetapi komponen mandiri adalah jalur yang direkomendasikan ke depannya.

Interoperabilitas dengan NgModules

Kode mandiri dan kode berbasis modul dapat saling beroperasi. Komponen mandiri dapat diimpor ke dalam NgModule, dan komponen berbasis NgModule dapat menggunakan impor mandiri, sehingga migrasi menjadi lebih mudah.

Hal yang Masih Perlu Dikonfigurasi

Penyiapan di seluruh aplikasi, seperti perute atau klien HTTP, disediakan melalui penyedia bootstrapApplication, bukan modul akar, yang akan Anda lihat nanti.

Cek Singkat: Mengapa Mandiri

Apa manfaat utama komponen mandiri?

Ringkasan: Mengapa Mandiri

Komponen mandiri menghilangkan kode pendukung NgModule dengan memungkinkan setiap komponen mendeklarasikan dependensinya sendiri. Hal ini menghasilkan kode yang lebih jelas, pemuatan malas yang lebih mudah, dan tree-shaking yang lebih baik. Komponen mandiri kini menjadi bawaan. Selanjutnya: membuatnya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengapa Komponen Standalone” gratis?

Ya — teks lengkap “Mengapa Komponen Standalone” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengapa Komponen Standalone”?

Lihat cara komponen standalone menyederhanakan Angular. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Mengapa Komponen Standalone” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy