Injeksi Ketergantungan Angular: Panduan Lengkap – Codewithaden

Dalam Angular, kerangka kerja DI memberikan dependensi yang dinyatakan ketika kelas itu dipakai. Panduan ini menjelaskan bagaimana DI bekerja dalam sudut dan bagaimana Anda menggunakannya untuk membuat aplikasi Anda fleksibel, efisien, dan kuat, serta dapat diuji dan dipelihara.

Injeksi ketergantungan sudut

Ketergantungan dalam Angular adalah layanan atau objek yang dibutuhkan kelas untuk melakukan fungsinya. Injeksi ketergantungan adalah pola pengkodean di mana suatu kelas meminta ketergantungan dari sumber eksternal daripada menciptakannya sendiri.

Injeksi ketergantungan sudut adalah pola desain aplikasi dasar. Angular memiliki kerangka injeksi ketergantungannya, dan Anda benar -benar tidak dapat membangun aplikasi sudut tanpa itu. Apalagi digunakan secara luas sehingga hampir semua orang menyebutnya Di

Pertama, kami akan mengambil contoh skenario di mana kami tidak menggunakan pola injeksi ketergantungan apa pun.

Di sini, saya menggambarkan contoh sebagai injeksi ketergantungan utama.

Contoh

Mari kita ambil contoh komputer. Komputer terdiri dari hal -hal berikut.

  1. Monitor
  2. CPU
  3. Papan ketik

Jadi untuk menyelesaikan komputer, kita membutuhkan ketiga hal itu.

Dalam contoh ini, kita perlu membutuhkan empat kelas untuk membangun komputer yang berfungsi penuh.

  1. Kelas Komputer
  2. Kelas Monitor
  3. Kelas CPU
  4. Kelas keyboard

Tanpa DI (Injeksi Ketergantungan)

Pertama, buat empat kelas. Keempat kelas ada di SRC >> Aplikasi direktori.

Membuat Monitor.ts kelas.

// Monitor.ts

export class Monitor {
     public monitorNo = 2;
} 

Lanjut Keyboard.ts kelas.

// Keyboard.ts

export class Keyboard {
    public keyboardNo = 1;
} 

Sekarang, buat Cpu.ts kelas.

// CPU.ts

export class CPU {
    public cpuNo = 3;
} 

Akhirnya, buat Komputer.ts kelas.

// Computer.ts

import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

export class Computer {
 
  public monitor: Monitor;
  public cpu: CPU;
  public keyboard: Keyboard;
 
  constructor() {
    this.monitor = new Monitor();
    this.cpu = new CPU();
    this.keyboard = new Keyboard();
  }
 public description = 'This Matrix computer';
  complete() {
    return `${this.description} has ` +
      `${this.monitor.monitorNo} monitors, ${this.cpu.cpuNo} cpus and, ${this.keyboard.keyboardNo} keyboard.`;
  }
} 

Untuk menyelesaikan Komputer Kelas, kita perlu mengimpor ketiga kelas di sini dan membuat satu komputer matriks yang berfungsi penuh.

Sekarang, di sini kami telah membuat tiga contoh kelas dalam konstruktor Komputer kelas.

Perhatikan bahwa Komputer Kelas tergantung pada ketiga kelas ini. Kalau tidak, itu tidak akan menyelesaikan komputer.

Kami membuat instance dalam konstruktor. Jadi monitor, CPU, dan keyboard tidak dipisahkan dari kelas komputer.

Akhirnya, kita perlu mengubah app.component.ts file untuk mengerjakan contoh ini.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	public computer: Computer;

	constructor(){
		this.computer = new Computer();
	}
  makeComputer(){
  	return this.computer.complete();
  }
} 

Dan untuk mengubah tampilan, edit app.component.html

{{makeComputer()}}!!

Keluaran

Simpan file ini dan ketik perintah berikut.

ng serve 
Catatan: Saya menggunakan CLI Angular untuk konfigurasi cepat.
Pada http://localhost:4200/
Anda dapat melihat string seperti Komputer matriks ini memiliki dua monitor, tiga CPU, dan satu keyboard. !!

Contoh dengan Injeksi Ketergantungan (DI)

Jika kita menggunakan injeksi ketergantungan, kita tidak perlu membuat contoh di konstruktor

Pertama, kita perlu memberikan semua dependensi ke app.module.ts kelas.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Monitor, CPU, Keyboard],
  bootstrap: [AppComponent]
})
export class AppModule { } 

Dalam Penyedia array, Kita perlu memberikan ketiga dependensi.

Kemudian, di Komputer.ts kelas, menyuntikkan dependensi itu ke komputer konstruktor.

// Computer.ts

import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

export class Computer { 
 constructor(public monitor: Monitor, public cpu: CPU, public keyboard: Keyboard) {}
 public description = 'This Matrix computer';
  complete() {
    return `${this.description} has ` +
      `${this.monitor.monitorNo} monitors, ${this.cpu.cpuNo} cpus, and ${this.keyboard.keyboardNo} keyboard.`;
  }
} 

Akhirnya, ubah app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';
import { Computer } from './Computer';
import { Monitor } from './Monitor';
import { CPU } from './CPU';
import { Keyboard } from './Keyboard';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
public computer: Computer;	
constructor(){
	this.computer = new Computer(new Monitor(), new CPU(), new Keyboard());
}
 makeComputer(){
  	return this.computer.complete();
  }
} 

Jadi, kami telah lulus argumen pada saat menciptakan a Komputer contoh.

Ketika instance komputer dibuat pada waktu itu, semua contoh kelas lain juga dibuat.

Setelah menyimpan file ini, output akan sama dengan yang sebelumnya.

Itu saja untuk itu.

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *