Komponenty wstrzykiwania zależności AngularJS

Co to jest wstrzykiwanie zależności w AngularJS?

Wstrzykiwanie zależności w AngularJS to wzorzec projektowania oprogramowania, który implementuje odwrócenie kontroli w celu rozwiązywania zależności. Decyduje o tym, jak komponenty zachowują swoje zależności. Można go wykorzystać podczas definiowania komponentów lub udostępniania bloków uruchamiania i konfiguracji modułu. Dzięki temu komponenty nadają się do ponownego użycia, testowania i konserwacji.

Odwrócenie sterowania: Oznacza to, że obiekty nie tworzą innych obiektów, na których opierają swoją pracę. Zamiast tego otrzymują te obiekty ze źródła zewnętrznego. Stanowi to podstawę wstrzykiwania zależności AngularJS, w którym jeśli jeden obiekt jest zależny od innego; obiekt podstawowy nie bierze na siebie odpowiedzialności za utworzenie obiektu zależnego, a następnie nie używa jego metod. Zamiast tego zewnętrzne źródło (które w AngularJS jest samym frameworkiem AngularJS) tworzy obiekt zależny i przekazuje go obiektowi źródłowemu do dalszego wykorzystania.

⚠️ Uwaga dotycząca wersji: Wsparcie AngularJS zakończyło się w styczniu 2022 r., bez poprawek bezpieczeństwa. Nowoczesny Angular wstrzykuje za pośrednictwem dostawców @Injectable i wstrzykiwać()Poniższy kod pozostaje historyczny.

Więc najpierw zrozummy, czym jest zależność.

Powyższy diagram przedstawia prosty przykład wstrzykiwania zależności AngularJS, będący codziennym rytuałem w programowaniu baz danych.

• Pole „Model” przedstawia „klasę modelu”, która jest normalnie tworzona do interakcji z bazą danych. Teraz baza danych jest zależnością dla „klasy modelu”, aby mogła działać.
• Poprzez wstrzykiwanie zależności tworzymy usługę pobierającą wszystkie informacje z bazy danych i dostającą się do klasy modelu.

W dalszej części tego samouczka przyjrzymy się bliżej wstrzykiwaniu zależności i sposobowi jego realizacji. angularjs.

Który komponent można wstrzyknąć jako zależność w AngularJS

W AngularJS zależności wstrzykuje się za pomocą „wstrzykiwalnej metody fabrycznej” lub „funkcji konstruktora”.

Do tych komponentów można wstrzyknąć komponenty „usługi” i „wartości” jako zależności. Widzieliśmy to we wcześniejszym temacie dotyczącym usługi $http.

AngularJS moduł rejestruje obiekty wstrzykiwalne za pomocą pięciu receptur.

Widzieliśmy już, że usługa $http może być używana w AngularJS do pobierania danych z pliku MySQL lub MS SQL Baza danych serwera poprzez a PHP Aplikacja internetowa.

Usługa $http jest zazwyczaj definiowana w kontrolerze w następujący sposób.

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

Teraz, gdy usługa $http jest zdefiniowana w kontrolerze, jak pokazano powyżej. Oznacza to, że kontroler jest teraz zależny od usługi $http.

Kiedy więc powyższy kod zostanie wykonany, AngularJS wykona następujące kroki:

1. Sprawdź, czy utworzono instancję „usługi $http”. Ponieważ nasz „kontroler” jest teraz zależny od „usługi $http”, obiekt tej usługi musi zostać udostępniony naszemu kontrolerowi.
2. Jeśli AngularJS odkryje, że usługa $http nie została utworzona, AngularJS używa funkcji „factory” do skonstruowania obiektu $http.
3. Wtryskiwacz w AngularJS udostępnia następnie naszemu kontrolerowi instancję usługi $http w celu dalszego przetwarzania.

Formularze adnotacji: Niejawna adnotacja Odczytuje nazwy parametrów, więc minifikacja je psuje. Zarówno notacja tablicowa inline, jak i $inject są w stanie to przetrwać; ng-strict-di w ng-app odrzuca adnotacje niejawne.

Teraz, gdy zależność została wstrzyknięta do naszego kontrolera, możemy teraz wywołać niezbędne funkcje w ramach usługi $http w celu dalszego przetwarzania.

Przykład wstrzykiwania zależności

W tym przykładzie dowiemy się, jak wykorzystać wstrzykiwanie zależności w AngularJS.

Wstrzykiwanie zależności można wdrożyć na 2 sposoby

1. Jednym z nich jest „składnik wartości”
2. Innym jest za pośrednictwem „usługi”

Przyjrzyjmy się implementacji obu sposobów bardziej szczegółowo.

1) Składnik wartości

Koncepcja ta opiera się na stworzeniu prostego JAVASCRIPT obiekt i przekazuje go do kontrolera w celu dalszego przetwarzania.

Realizuje się to za pomocą dwóch poniższych kroków

Krok 1) Stwórz JavaObiekt skryptu używa komponentu wartości i dołącza go do głównego modułu AngularJS.

Składnik wartości przyjmuje dwa parametry: jeden to klucz, a drugi to wartość JavaObiekt skryptu, który jest tworzony.

Krok 2) Uzyskaj dostęp do JavaObiekt skryptu z Kontroler AngularJS

<! 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>

Powyższy kod wykonuje poniższe kroki

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

   Funkcja wartości modułu AngularJS jest używana do utworzenia pary klucz-wartość o nazwie „TutorialID” i wartości „5”.

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

   Zmienna TutorialID staje się teraz dostępna dla sterownika jako parametr funkcji.

3.  $scope.ID =TutorialID;

   Wartość TutorialID, która wynosi 5, jest teraz przypisywana do innej zmiennej o nazwie ID w $zakres obiekt. Dzieje się tak, aby wartość 5 mogła zostać przekazana z kontrolera do widoku.

4. {{ID}}

   Parametr ID jest wyświetlany w widoku jako wyrażenie. Tak więc wynik „5” zostanie wyświetlony na stronie.

Gdy powyższy kod zostanie wykonany, dane wyjściowe zostaną pokazane poniżej

2) Usługa

Usługę definiuje się jako singleton JavaObiekt skryptu składający się z zestawu funkcji, które chcesz udostępnić i wstrzyknąć do kontrolera.

Na przykład „$http” to usługa w AngularJS, która po wstrzyknięciu do kontrolerów zapewnia niezbędne funkcje

(pobierz(), zapytanie(), zapisz(), usuń(), usuń()).

Funkcje te można następnie odpowiednio wywołać ze sterownika.

Przyjrzyjmy się prostemu przykładowi, jak możesz stworzyć własną usługę. Stworzymy prostą usługę dodawania, która dodaje dwie liczby.

<! 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>

W powyższym przykładzie wykonano następujące kroki

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

   Tutaj tworzymy nową usługę o nazwie „AdditionService” wykorzystując parametr usługi naszego głównego modułu AngularJS.

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

   Tutaj tworzymy nową funkcję o nazwie ADDITION w naszej usłudze. Oznacza to, że gdy AngularJS utworzy instancję usługi AdditionService w kontrolerze, będziemy mogli uzyskać dostęp do funkcji „ADDITION”. W tej definicji funkcji mówimy, że funkcja ta akceptuje dwa parametry: a i b.

3.  return a+b;

   Tutaj definiujemy treść naszej funkcji DODAWANIE, która po prostu dodaje parametry i zwraca dodaną wartość.

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

   To główny krok, który obejmuje wstrzykiwanie zależności. W naszej definicji kontrolera odwołujemy się teraz do naszej usługi „AdditionService”. Gdy AngularJS to wykryje, utworzy instancję obiektu typu „AdditionService”.

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

   Uzyskujemy teraz dostęp do funkcji „ADDITION”, która jest zdefiniowana w naszej usłudze i przypisujemy ją do obiektu $scope kontrolera.

Oto prosty przykład tego, jak możemy zdefiniować naszą usługę i wprowadzić funkcjonalność tej usługi do naszego kontrolera.

FAQ