AngularJS Bağımlılık Enjeksiyonu Bileşenleri

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.

⚠️ Sürüm notu: AngularJS desteği Ocak 2022'de sona erdi.Güvenlik yamaları olmadan. Modern Angular, @Injectable sağlayıcıları aracılığıyla enjeksiyon yapar ve enjekte et()Aşağıdaki kod tarihsel nitelikte kalacaktır.

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 nasıl gerçekleştirildiğine daha yakından bakacağız. angularjs.

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

AngularJS'de bağımlılıklar, "enjekte edilebilir fabrika yöntemi" veya "yapıcı fonksiyon" 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.

Bir AngularJS modül Enjekte edilebilir nesneleri beş farklı yöntemle kaydeder.

$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;

1. “$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.
2. AngularJS, $http hizmetinin başlatılmadığını tespit ederse, AngularJS bir $http nesnesi oluşturmak için 'fabrika' işlevini kullanır.
3. AngularJS içindeki enjektör daha sonra $http hizmetinin bir örneğini, daha fazla işlem için denetleyicimize sağlar.

Açıklama biçimleri: Örtük açıklama Parametre adlarını okuduğu için küçültme işlemi bunu bozar. Satır içi dizi gösterimi ve `$inject` bu işlemden etkilenmez; `ng-app` üzerindeki `ng-strict-di` örtük ek açıklamayı reddeder.

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

1. Bunlardan biri “Değer Bileşeni”dir.
2. 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 yapı oluşturmaya dayanmaktadır. JavaSenaryo Nesneyi alıp daha fazla işlem için denetleyiciye iletiyor.

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

) 1 Adım Hat için bir JavaDeğer bileşenini kullanarak bir komut dosyası nesnesi oluşturun ve bunu ana AngularJS modülünüze ekleyin.

Değer bileşeni iki parametre alır; biri anahtar, diğeri ise değeri JavaOluşturulan komut dosyası nesnesi.

) 2 Adım Erişim JavaKomut dosyası nesnesi AngularJS 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 aşağıdaki adımları gerçekleştirir.

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

   AngularJS modülünün `value` fonksiyonu, "TutorialID" adında bir anahtar-değer çifti ve "5" değerini oluşturmak için kullanılıyor.

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

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

3.  $scope.ID =TutorialID;

   TutorialID'nin değeri olan 5, artık ID adlı başka bir değişkene atanıyor. $kapsam Bu işlem, denetleyiciden görünüme 5 değerinin iletilebilmesi için yapılıyor.

4. {{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", AngularJS'de denetleyicilerinize enjekte edildiğinde gerekli işlevleri sağlayan bir servistir.

( 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

1.  mainApp.service('AdditionService', function()

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

2.  this.ADDITION = function(a,b)

   Burada servisimiz içinde ADDITION adında yeni bir fonksiyon oluşturuyoruz. Bu, AngularJS'in denetleyicimiz içinde AdditionService'i örneklediğinde, 'ADDITION' fonksiyonuna erişebileceğimiz anlamına gelir. Bu fonksiyon tanımında, bu fonksiyonun a ve b olmak üzere iki parametre kabul ettiğini belirtiyoruz.

3.  return a+b;

   Burada, parametreleri toplayıp toplam değeri döndüren ADDITION fonksiyonumuzun gövdesini tanımlıyoruz.

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

   Bu, bağımlılık enjeksiyonunu içeren ana adımdır. Kontrolcü tanımımızda, artık 'AdditionService' servisimize referans veriyoruz. AngularJS bunu gördüğünde, 'AdditionService' türünde bir nesne oluşturacaktır.

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

   Şimdi servisimizde tanımlanmış olan 'ADDITION' fonksiyonuna erişiyoruz ve bunu denetleyicinin $scope nesnesine atıyoruz.

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

SSS