Wstrzykiwanie zależności AngularJS: które komponenty zostały wstrzyknięte

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

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.

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

Wstrzykiwanie zależności w AngularJS

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 pozostałej części tego samouczka przyjrzymy się bliżej wstrzykiwaniu zależności i sposobom realizacji tego w AngularJS.

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

W Angular.JS zależności są wstrzykiwane przy użyciu „metody fabrycznej, którą można wstrzykiwać” 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.

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 Angular.JS udostępnia następnie instancję usługi $http naszemu kontrolerowi w celu dalszego przetwarzania.

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 fakcie stworzenia prostego JAVASCRIPT obiektu i przekazać go kontrolerowi 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.JS.

Składnik wartości przyjmuje dwa parametry; jeden to klucz, a drugi to wartość tworzonego obiektu JavaScript.

Krok 2) Uzyskaj dostęp do JavaObiekt skryptu z Kontroler Angular.JS

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

POWIĄZANE ARTYKUŁY

W powyższym przykładzie kodu wykonywane są poniższe główne kroki

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

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

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

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

  1.  $scope.ID =TutorialID;

Wartość TutorialID wynosząca 5 jest teraz przypisana do innej zmiennej o nazwie ID w obiekcie $scope. Dzieje się tak, aby wartość 5 mogła zostać przekazana z kontrolera do widoku.

  1. {{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

Komponent wartości we wstrzykiwaniu zależności

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 Angular.JS, 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” przy użyciu parametru usługi naszego głównego modułu AngularJS JS.

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

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

  1.  return a+b;

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

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

Jest to główny krok polegający na zastrzyku zależności. W naszej definicji kontrolera odwołujemy się teraz do naszej usługi „AdditionService”. Gdy AngularJS to zobaczy, utworzy instancję obiektu typu „AdditionService”.

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

Uzyskujemy teraz dostęp do funkcji „Dodawanie”, która jest zdefiniowana w naszym serwisie 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.

Podsumowanie

  • Wstrzykiwanie zależności, jak sama nazwa wskazuje, to proces wstrzykiwania zależnych funkcjonalności do modułów w czasie wykonywania.
  • Korzystanie z wstrzykiwania zależności pomaga w uzyskaniu kodu, który można ponownie wykorzystać. Jeśli masz wspólną funkcjonalność używaną w wielu modułach aplikacji, najlepszym sposobem jest zdefiniowanie usługi centralnej z tą funkcjonalnością, a następnie wstrzyknięcie tej usługi jako zależności do modułów aplikacji.
  • Obiekt wartości AngularJS może zostać użyty do prostego wstrzyknięcia JavaObiekty skryptowe w kontrolerze za pomocą $inject angularjs.
  • Modułu usług można użyć do zdefiniowania niestandardowych usług, które można ponownie wykorzystać w wielu modułach AngularJS.

Możesz lubić: