Layanan dan Injectable
Buat layanan injectable untuk logika bersama.
Layanan dan Injectable 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.
Layanan dan Injectable
Layanan adalah kelas yang menyimpan logika atau status yang dapat digunakan kembali, seperti pengambilan data atau penyimpanan bersama. Angular membuat dan membagikan layanan melalui injeksi dependensi.
Mengapa Menggunakan Layanan
Komponen seharusnya berfokus pada tampilan. Pindahkan logika bisnis, panggilan API, dan status bersama ke dalam layanan agar dapat digunakan kembali dan diuji secara terpisah.
Dekorator Injectable
Tandai kelas layanan dengan @Injectable agar Angular dapat membuatnya dan menginjeksikannya di tempat yang diperlukan.
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService {}providedIn root
providedIn: 'root' mendaftarkan layanan ke injektor akar aplikasi. Angular membuat satu instans bersama (singleton) untuk seluruh aplikasi.
Penyedia yang Dapat Dihapus dari Pohon
Karena penyedia dideklarasikan pada kelas dengan providedIn, layanan yang tidak digunakan dapat dihapus dari paket secara otomatis melalui tree-shaking.
Layanan dengan Status
Layanan sering menyimpan status. Dengan signal, tampilkan status reaktif dari layanan.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
count = signal(0);
increment() { this.count.update(v => v + 1); }
}Layanan dengan Metode
Tambahkan metode yang dapat dipanggil komponen untuk menjalankan tindakan atau mengambil data.
@Injectable({ providedIn: 'root' })
export class GreetingService {
greet(name: string): string {
return 'Hello, ' + name;
}
}Membuat Layanan
CLI membuat kerangka layanan dengan dekorator Injectable yang sudah ditambahkan.
ng g service dataSingleton Membagikan Status
Karena layanan root adalah singleton, setiap komponen yang menginjeksikannya melihat instans dan status yang sama. Inilah cara komponen berbagi data.
Layanan Dapat Menginjeksikan Layanan
Sebuah layanan dapat bergantung pada layanan lain. Misalnya, layanan data dapat menggunakan layanan HttpClient untuk membuat permintaan.
Buat Layanan Tetap Fokus
Berikan satu tanggung jawab yang jelas kepada setiap layanan. Layanan kecil dan fokus lebih mudah diuji serta digunakan kembali daripada layanan besar yang mengerjakan banyak hal.
Pemeriksaan Cepat: Injectable
Mendaftarkan layanan singleton.
Ringkasan: Layanan
Anda telah mempelajari bahwa layanan menyimpan logika dan status yang dapat digunakan kembali, ditandai dengan @Injectable, serta menggunakan providedIn: root untuk mendaftarkan singleton yang berlaku di seluruh aplikasi. Layanan berbagi status antar komponen dan dapat bergantung pada layanan lain. Berikutnya: fungsi inject.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Layanan dan Injectable” gratis?
Ya — teks lengkap “Layanan dan Injectable” 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 “Layanan dan Injectable”?
Buat layanan injectable untuk logika bersama. 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 “Layanan dan Injectable” 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
- Layanan dan Injectable
- Fungsi inject
- Penyedia dan Cakupan
- Token Injeksi