Angular Academy · Pelajaran

Penyedia dan Cakupan

Kendalikan lokasi layanan dalam hierarki.

Penyedia dan Cakupan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Penyedia dan Cakupan

Penyedia memberi tahu Angular cara membuat dependensi. Cakupan tempat Anda mendaftarkannya menentukan jumlah instans yang ada dan pihak yang membagikannya.

Cakupan Root

providedIn: root mendaftarkan layanan di injektor root: satu singleton bersama untuk seluruh aplikasi. Ini adalah pilihan yang paling umum.

@Injectable({ providedIn: 'root' })
export class AppStore {}

Penyedia Komponen

Anda dapat membatasi cakupan layanan ke sebuah komponen dengan mencantumkannya dalam array providers komponen tersebut. Setiap instans komponen mendapatkan instansnya sendiri dari layanan.

import { Component } from '@angular/core';
import { LocalStore } from './local-store';

@Component({
  selector: 'app-panel',
  providers: [LocalStore],
  template: ''
})
export class PanelComponent {}

Mengapa Menggunakan Cakupan Komponen

Gunakan penyedia dengan cakupan komponen ketika setiap instans komponen memerlukan status terisolasi miliknya sendiri, seperti objek status formulir atau penyimpanan per widget.

Root vs Komponen

Root: satu instans yang dibagikan di mana pun. Komponen: satu instans untuk setiap instans komponen (dan turunannya). Pilih berdasarkan apakah status perlu dibagikan atau diisolasi.

Hierarki Injektor

Injektor Angular membentuk sebuah pohon. Saat menyelesaikan dependensi, Angular mencari di injektor komponen, lalu bergerak naik ke induk, dan akhirnya ke root.

Komponen Anak Mewarisi

Layanan yang disediakan pada sebuah komponen juga tersedia bagi anak komponen tersebut, kecuali jika anak menyediakan instansnya sendiri, yang akan menutupi penyedia induk.

Penyedia Tingkat Aplikasi

Anda juga dapat mendaftarkan penyedia saat bootstrap dalam array providers milik bootstrapApplication, serupa dengan cakupan root, sering kali melalui fungsi provide*.

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

useClass dan useValue

Penyedia dapat memetakan token ke kelas dengan useClass, ke nilai tetap dengan useValue, atau ke pabrik dengan useFactory, sehingga penggantian dan konfigurasi dapat dilakukan.

// providers: [{ provide: Logger, useClass: ConsoleLogger }]

Mengganti Implementasi

Karena penyedia memetakan token ke sebuah implementasi, Anda dapat mengganti implementasi (misalnya dengan tiruan dalam pengujian) tanpa mengubah pihak yang menggunakannya.

Memilih Cakupan

Gunakan root sebagai pilihan bawaan untuk singleton bersama. Gunakan penyedia komponen hanya ketika Anda memerlukan status terisolasi untuk setiap instans.

Pemeriksaan Cepat: Cakupan

Status per instans.

Ringkasan: Penyedia dan Cakupan

Anda telah mempelajari bahwa penyedia menjelaskan cara membuat dependensi dan bahwa cakupan mengatur pembuatan instans: root untuk singleton di seluruh aplikasi, serta penyedia komponen untuk isolasi per instans. Angular menyelesaikan dependensi melalui hierarki injektor, dan useClass/useValue/useFactory memungkinkan Anda mengganti implementasi. Berikutnya: token injeksi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penyedia dan Cakupan” gratis?

Ya — teks lengkap “Penyedia dan Cakupan” 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 “Penyedia dan Cakupan”?

Kendalikan lokasi layanan dalam hierarki. 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 3 dari 4.

Berapa lama pelajaran “Penyedia dan Cakupan” 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