Belajar Angular, Basic Application 5

Dependency Injection di dalam Angular
Published di Angular, a year ago

Contoh sederhana dari Dependency Injection dalam kehidupan sehari-hari adalah memasak makan malam, interpretasi-nya adalah sebagai berikut:

  1. Anda membutuhkan bahan-bahan seperti bawang merah, bawang putih, daging, dan rempah-rempah.
  2. Anda membutuhkan alat memasak seperti wajan, dapur, dan pisau.
  3. Anda mengolah bahan-bahan dan menggunakan alat memasak untuk memasak makan malam.

Dalam contoh ini, bahan-bahan dan alat memasak adalah dependensi yang diperlukan untuk memasak makan malam. Dependency Injection berarti bahwa Anda menggunakan bahan-bahan dan alat memasak yang dibutuhkan untuk memasak makan malam. Dalam Angular, Dependency Injection bekerja dengan cara yang sama. Anda menentukan dependensi yang dibutuhkan oleh komponen atau service dan Angular akan memastikan bahwa dependensi tersebut tersedia dan digunakan pada waktu yang tepat. Ini membuat pengembangan aplikasi lebih mudah dan terstruktur.


Berikut adalah beberapa contoh lain dari dependency injection dalam kehidupan nyata:

  1. Pabrik memproduksi mobil: Dalam proses produksi mobil, pabrik membutuhkan beberapa komponen seperti mesin, ban, dan bahan bakar. Pabrik menggunakan dependency injection dengan memasukkan mesin, ban, dan bahan bakar ke dalam mobil yang akan diproduksi.
  2. Rumah sakit: Dalam melakukan operasi, rumah sakit membutuhkan beberapa peralatan medis seperti jarum suntik, infus, dan alat bantu lainnya. Rumah sakit menggunakan dependency injection dengan memasukkan peralatan medis ke dalam pasien yang akan dioperasi.
  3. Sistem pemeliharaan mesin: Dalam melakukan pemeliharaan mesin, sistem membutuhkan beberapa bahan seperti oli, filter, dan peralatan lainnya. Sistem menggunakan dependency injection dengan memasukkan bahan tersebut ke dalam mesin yang akan dilakukan pemeliharaan.

Dengan menggunakan prinsip dependency injection, proses produksi, operasi, dan pemeliharaan menjadi lebih efisien dan mudah dilakukan, karena komponen atau bahan yang dibutuhkan sudah tersedia dan dapat digunakan secara langsung.


Dalam dokumen resmi Angular, terdapat penjelasan mengenai dependency injection (DI) yang dapat membantu Anda menuliskan kebutuhan dari kelas TypeScript Anda tanpa harus peduli tentang cara menginstansiasinya. Alihkan tugas ini pada Angular, yang akan mengaturnya untuk Anda. Desain pattern ini memungkinkan Anda menulis kode yang lebih mudah dites dan fleksibel. Meskipun pemahaman mengenai dependency injection tidaklah kritis untuk memulai menggunakan Angular, namun sangat disarankan sebagai best practice. Banyak aspek dari Angular memanfaatkan dependency injection dalam beberapa tingkat.

Dengan kata lain, dependency injection membantu Anda untuk memisahkan responsibilitas dalam aplikasi. Anda dapat menentukan kebutuhan atau dependensi dari suatu kelas tanpa harus memikirkan bagaimana cara menginstansiasinya. Angular akan mengaturnya untuk Anda dan memastikan bahwa dependensi tersebut tersedia dan dapat digunakan oleh kelas yang membutuhkannya. Hal ini membuat kode Anda lebih mudah dites dan fleksibel, sehingga dapat digunakan dengan baik dalam berbagai situasi dan kondisi.


Contohnya, kita akan membuat satu class Logger yang akan menuliskan pesan ke console browser. Pseudo code nya:

  1. Buat sebuah kelas logger.service.ts di root folder src,
  2. Buat hello-di.component.ts
  3. Buat hello-di.component.html
  4. Daftarkan hello-di.component.html ke app.module.ts
  5. Panggil `<hello-di></hello-di> di app.component.html
  6. Running ng-serve di terminal, dan lihat hasilnya di browser


Dukung Saya supaya tetap menulis artikel-artikel yang baik, membayar sewa domain, dan server untuk blog ini. Caranya dengan donasi cendol via Trakteer.id.


No image

Fadly Dzil Jalal

PHP, Yii2 Framework, Laravel, Java, Java Swing, Hibernate, Javascript, Angular, React, MySQL, MongoDB


Dapatkan USD 200 untuk develop aplikasimu di DigitalOcean DigitalOcean Referral Badge