Örnek ile AngularJS'de Bağımlılık Enjeksiyonu

AngularJS'de Bağımlılık Enjeksiyonu nedir?

Bağımlılık Enjeksiyonu, bağımlılıkları çözmek için kontrolün tersine çevrilmesini uygulayan bir yazılım tasarım modelidir.

Kontrolü Ters Çevirme : Nesnelerin, işlerini yapmak için güvendikleri başka nesneler yaratmadığı anlamına gelir. Bunun yerine, bu nesneleri bir dış kaynaktan alırlar. Bu, bağımlılık enjeksiyonunun temelini oluşturur, burada bir nesne diğerine bağımlıysa; birincil nesne, bağımlı nesneyi yaratma sorumluluğunu almaz ve ardından onun yöntemlerini kullanır. Bunun yerine, harici bir kaynak (AngularJS'de AngularJS çerçevesinin kendisidir) bağımlı nesneyi oluşturur ve daha fazla kullanım için kaynak nesneye verir.

Öyleyse önce bağımlılığın ne olduğunu anlayalım.

Yukarıdaki diyagram, veritabanı programlamada günlük bir ritüelin basit bir örneğini göstermektedir.

'Model' kutusu, normalde veritabanı ile etkileşim kurmak için oluşturulan "Model sınıfını" gösterir. Yani artık veritabanı, "Model sınıfının" işlev görmesi için bir bağımlılıktır.
Bağımlılık enjeksiyonu ile, tüm bilgileri veritabanından almak ve model sınıfına girmek için bir servis oluşturuyoruz.

Bu eğitimin geri kalanında, bağımlılık enjeksiyonuna ve bunun AngularJS'de nasıl yapıldığına daha fazla bakacağız.

Bu eğitimde öğreneceksiniz-

AngularJS'de Bağımlılık Olarak Hangi Bileşen Enjekte Edilebilir?
Bağımlılık Enjeksiyonu Örneği

Değer bileşeni
Hizmet

AngularJS'de Bağımlılık Olarak Hangi Bileşen Enjekte Edilebilir?

Angular.JS'de, bağımlılıklar bir "enjekte edilebilir fabrika yöntemi" veya "yapıcı işlevi" kullanılarak enjekte edilir.

Bu bileşenlere bağımlılıklar olarak "hizmet" ve "değer" bileşenleri eklenebilir. Bunu $ http hizmetiyle ilgili daha önceki bir konuda görmüştük.

$ Http hizmetinin bir PHP web uygulaması aracılığıyla bir MySQL veya MS SQL Server veritabanından veri almak için AngularJS içinde kullanılabileceğini zaten görmüştük.

$ Http hizmeti normalde aşağıdaki şekilde denetleyici içinden tanımlanır.

 sampleApp.controller ('AngularJSController', function ($scope, $http)

Şimdi $ http hizmeti yukarıda gösterildiği gibi denetleyicide tanımlandığında. Bu, denetleyicinin artık $ http hizmetine bağımlı olduğu anlamına gelir.

Dolayısıyla, yukarıdaki kod çalıştırıldığında, AngularJS aşağıdaki adımları gerçekleştirecektir;

"$ Http hizmetinin" somutlaştırılmış olup olmadığını kontrol edin. "Denetleyicimiz" artık "$ http hizmetine" bağlı olduğundan, bu hizmetin bir nesnesinin denetleyicimizin kullanımına sunulması gerekir.
AngularJS, $ http hizmetinin somutlaştırılmadığını anlarsa, AngularJS bir $ http nesnesi oluşturmak için 'fabrika' işlevini kullanır.
Angular.JS içerisindeki enjektör, daha fazla işlem için denetleyicimize $ http hizmetinin bir örneğini sağlar.

Artık bağımlılık denetleyicimize enjekte edildiğine göre, artık daha fazla işlem için $ http hizmetindeki gerekli işlevleri çağırabiliriz.

Bağımlılık Enjeksiyonu Örneği

Bağımlılık enjeksiyonu 2 şekilde uygulanabilir

Biri "Değer Bileşeni" üzerinden yapılır
Diğeri bir "Hizmet" aracılığıyla

Her iki yolun uygulanmasına daha ayrıntılı bakalım.

1) Değer bileşeni

Bu kavram, basit bir JavaScript nesnesi oluşturma ve daha sonraki işlemler için denetleyiciye iletme gerçeğine dayanmaktadır.

Bu, aşağıdaki iki adım kullanılarak gerçekleştirilir

Adım 1) Değer bileşenini kullanarak bir JavaScript nesnesi oluşturun ve ana AngularJS.JS modülünüze ekleyin.

Değer bileşeni iki parametre alır; biri anahtar, diğeri ise oluşturulan javascript nesnesinin değeridir.

Adım 2) JavaScript nesnesine Angular.JS denetleyicisinden erişin

Event Registration
Guru99 Global Event
{{ID}}

Yukarıdaki kod örneğinde, aşağıdaki ana adımlar gerçekleştirilmektedir.

```
sampleApp.value ("TutorialID", 5);
```

Angular.JS JS modülünün değer işlevi, "TutorialID" adlı bir anahtar / değer çifti ve "5" değeri oluşturmak için kullanılıyor.

sampleApp.controller('AngularJSController', function ($scope,TutorialID)

TutorialID değişkeni artık denetleyici tarafından bir işlev parametresi olarak erişilebilir hale gelir.

```
 $scope.ID =TutorialID;
```

TutorialID'nin 5 olan değeri, şimdi $ kapsam nesnesinde ID adlı başka bir değişkene atanıyor. Bu, 5 değerinin denetleyiciden görünüme geçirilebilmesi için yapılmaktadır.

```
{{İD}}
```

Kimlik parametresi görünümde bir ifade olarak görüntüleniyor. Böylece sayfada '5' çıktısı görüntülenecektir.

Yukarıdaki kod yürütüldüğünde, çıktı aşağıdaki gibi gösterilecektir.

2) Hizmet

Hizmet, denetleyicinize göstermek ve enjekte etmek istediğiniz bir dizi işlevden oluşan tek bir JavaScript nesnesi olarak tanımlanır.

Örneğin, "$ http", denetleyicilerinize enjekte edildiğinde, Angular.JS'de gerekli işlevleri sağlayan bir hizmettir.

(get (), sorgu (), kaydet (), kaldır (), sil ()).

Bu işlevler daha sonra denetleyicinizden uygun şekilde çağrılabilir.

Kendi hizmetinizi nasıl oluşturabileceğinize dair basit bir örneğe bakalım. İki sayı ekleyen basit bir toplama hizmeti oluşturacağız.

Event Registration
Guru99 Global Event

Result: {{result}}

Yukarıdaki örnekte, aşağıdaki adımlar gerçekleştirilmiştir

 mainApp.service('AdditionService', function()

Burada ana AngularJS JS modülümüzün servis parametresini kullanarak 'AdditionService' adlı yeni bir servis oluşturuyoruz.

```
 this.Addition = function(a,b)
```

Burada hizmetimiz içinde Addition adında yeni bir işlev oluşturuyoruz. Bu, AngularJS'in denetleyicimizin içinde Ekleme Hizmetimizi başlattığı anlamına gelir, daha sonra 'Ekleme' işlevine erişebiliriz. Bu fonksiyon tanımında, bu fonksiyonun a ve b olmak üzere iki parametreyi kabul ettiğini söylüyoruz.

```
 return a+b; 
```

Burada, sadece parametreleri ekleyen ve katma değeri döndüren Toplama fonksiyonumuzun gövdesini tanımlıyoruz.

 mainApp.controller('DemoController', function($scope, AdditionService)

Bu, bağımlılık enjeksiyonunu içeren ana adımdır. Denetleyici tanımımızda, artık 'Ekleme Hizmeti' hizmetimize atıfta bulunuyoruz. AngularJS bunu gördüğünde, 'AdditionService' türünde bir nesne başlatacaktır.

 $scope.result = AdditionService.Addition(5,6);

Şimdi hizmetimizde tanımlanan 'Addition' fonksiyonuna erişiyoruz ve onu kontrolörün $ kapsam nesnesine atıyoruz.

Dolayısıyla bu, hizmetimizi nasıl tanımlayabileceğimize ve bu hizmetin işlevselliğini denetleyicimizin içine nasıl yerleştirebileceğimize dair basit bir örnektir.

Özet:

Adından da anlaşılacağı gibi Bağımlılık Enjeksiyonu, çalışma zamanında modüllere bağımlı işlevselliği enjekte etme sürecidir.
Bağımlılık enjeksiyonunun kullanılması, daha yeniden kullanılabilir bir koda sahip olmanıza yardımcı olur. Birden çok uygulama modülünde kullanılan ortak bir işlevselliğe sahipseniz, en iyi yol bu işlevselliğe sahip bir merkezi hizmet tanımlamak ve ardından bu hizmeti uygulama modüllerinize bağımlılık olarak eklemektir.
AngularJS'nin değer nesnesi, denetleyicinize basit JavaScript nesnelerini enjekte etmek için kullanılabilir.
Hizmet modülü, birden çok AngularJS modülünde yeniden kullanılabilen özel hizmetlerinizi tanımlamak için kullanılabilir.