AngularJS Dependency Injection: Hangi Bileşenlerin Enjekte Edildiği

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

Bağımlılık Enjeksiyonu AngularJS'de bağımlılıkları çözmek için kontrolün tersine çevrilmesini uygulayan bir yazılım tasarım modelidir. Bileşenlerin bağımlılıklarını nasıl sürdüreceğine karar verir. Bileşenleri tanımlarken veya modülün run ve config bloklarını sağlarken kullanılabilir. Bileşenleri yeniden kullanılabilir, test edilebilir ve bakımı yapılabilir hale getirmenizi sağlar.

Kontrolün Tersine Çevirilmesi: Bu, nesnelerin işlerini yapmak için bağlı oldukları başka nesneler yaratmadıkları anlamına gelir. Bunun yerine bu nesneleri dış bir kaynaktan alıyorlar. Bu, AngularJS Bağımlılık Enjeksiyonunun temelini oluşturur; burada bir nesne diğerine bağımlıysa; birincil nesne, bağımlı nesneyi oluşturma ve daha sonra onun yöntemlerini kullanma sorumluluğunu almaz. Bunun yerine, harici bir kaynak (AngularJS'de AngularJS çerçevesinin kendisidir) bağımlı nesneyi oluşturur ve onu daha fazla kullanım için kaynak nesneye verir.

O halde önce bağımlılığın ne olduğunu anlayalım.

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

'Model' kutusu, normalde veritabanıyla etkileşim kurmak için oluşturulan "Model sınıfını" tasvir eder. Bu nedenle 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 veritabanından tüm bilgileri alıp model sınıfına girecek bir hizmet oluşturuyoruz.

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

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

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

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

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

$http servisi normalde denetleyici içerisinden aşağıdaki şekilde tanımlanır.

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

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

Yukarıdaki kod çalıştırıldığında AngularJS aşağıdaki adımları gerçekleştirecektir;

“$http hizmetinin” başlatılıp başlatılmadığını kontrol edin. “Denetleyicimiz” artık “$http hizmetine” bağlı olduğundan, bu hizmetin bir nesnesinin denetleyicimize sunulması gerekiyor.
AngularJS, $http hizmetinin başlatılmadığını tespit ederse, AngularJS bir $http nesnesi oluşturmak için 'fabrika' işlevini kullanır.
Angular.JS içindeki enjektör daha sonra daha ileri işlemler için denetleyicimize $http hizmetinin bir örneğini sağlar.

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

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

Bu örnekte AngularJS'de bağımlılık enjeksiyonunun nasıl kullanılacağını öğreneceğiz.

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

Bunlardan biri “Değer Bileşeni”dir.
Bir diğeri ise “Hizmet” yoluyladır

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

1) Değer bileşeni

Bu konsept basit bir yaratma gerçeğine dayanmaktadır. JavaSenaryo nesneyi oluşturun ve daha ileri işlemler için denetleyiciye iletin.

Bu, aşağıdaki iki adım kullanılarak uygulanır

) 1 Adım Hat için bir JavaDeğer bileşenini kullanarak script nesnesini 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.

) 2 Adım Erişim JavaKomut dosyası nesnesi Angular.JS denetleyicisi

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="sampleApp">

<div ng-controller="AngularJSController">
    <h3> Guru99 Global Event</h3>
    {{ID}}
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.value("TutorialID", 5);
    sampleApp.controller('AngularJSController', function($scope,TutorialID) {
        $scope.ID =TutorialID;
    });

</script>
</body>
</html>

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 fonksiyonu, “TutorialID” ve “5” değeri olarak adlandırılan bir anahtar-değer çifti 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 değeri artık $scope nesnesinde ID adı verilen başka bir değişkene atanıyor. Bu, 5 değerinin denetleyiciden görünüme aktarılabilmesi için yapılıyor.

```
{{ID}}
```

ID 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 çalıştırıldığında çıktı aşağıdaki gibi gösterilecektir.

2) Hizmet

Hizmet singleton olarak tanımlanır JavaDenetleyicinizde açığa çıkarmak ve enjekte etmek istediğiniz bir dizi fonksiyondan oluşan betik nesnesi.

Örneğin, “$http” Angular.JS'deki bir hizmettir ve denetleyicilerinize enjekte edildiğinde aşağıdakilerin gerekli işlevlerini sağlar:

( get() , query() , save() , kaldır(), delete() ).

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

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

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>

</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h3> Guru99 Global Event</h3>

<div ng-app = "mainApp" ng-controller = "DemoController">
    <p>Result: {{result}}</p>
</div>
<script>
    var mainApp = angular.module("mainApp", []);

    mainApp.service('AdditionService', function(){
        this.ADDITION = function(a,b) {
            return a+b;
        }
    });

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

            $scope.result = AdditionService.ADDITION(5,6);
    });
</script>

</body>
</html>

Yukarıdaki örnekte aşağıdaki adımlar gerçekleştirilir

 mainApp.service('AdditionService', function()

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

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

Burada servisimiz içerisinde Addition adında yeni bir fonksiyon oluşturuyoruz. Bu, AngularJS'nin denetleyicimizin içinde AdditionService'imizi başlattığı zaman 'Ekleme' işlevine erişebileceğimiz anlamına gelir. Bu fonksiyon tanımında bu fonksiyonun a ve b olmak üzere iki parametre kabul ettiğini söylüyoruz.

```
 return a+b;
```

Burada basitçe parametreleri toplayan 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 'AdditionService' hizmetimizi referans alıyoruz. AngularJS bunu gördüğünde 'AdditionService' türünde bir nesne başlatacaktır.

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

Artık servisimizde tanımlanan 'Ekleme' fonksiyonuna ulaşıyoruz ve onu kontrolörün $scope nesnesine atadık.

Bu, hizmetimizi nasıl tanımlayabileceğimize ve bu hizmetin işlevselliğini denetleyicimize nasıl enjekte edebileceğimize dair basit bir örnek.

ÖZET

Adından da anlaşılacağı gibi Dependency Injection, bağımlı işlevselliği çalışma zamanında modüllere enjekte etme işlemidir.
Bağımlılık enjeksiyonunu kullanmak, daha yeniden kullanılabilir bir koda sahip olmanıza yardımcı olur. Birden fazla uygulama modülünde kullanılan ortak bir işlevselliğe sahipseniz en iyi yol, bu işlevselliğe sahip merkezi bir hizmet tanımlamak ve ardından bu hizmeti uygulama modüllerinize bir bağımlılık olarak enjekte etmektir.
AngularJS'in değer nesnesi basit enjeksiyon için kullanılabilir JavaDenetleyicinizdeki komut dosyası nesnelerini $inject kullanarak angularjs.
Hizmet modülü, birden fazla AngularJS modülünde yeniden kullanılabilen özel hizmetlerinizi tanımlamak için kullanılabilir.

Beğenebilirsin: