Dependency Injection w AngularJS na przykładzie

Spisie treści:

Anonim

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

Dependency Injection to wzorzec projektowania oprogramowania, który implementuje odwrócenie kontroli w celu rozwiązywania zależności.

Odwrócenie kontroli : Oznacza to, że obiekty nie tworzą innych obiektów, na których polegają przy wykonywaniu swojej pracy. Zamiast tego uzyskują te obiekty z zewnętrznego źródła. Stanowi to podstawę wstrzyknięcia zależności, w którym jeden obiekt jest zależny od innego; obiekt podstawowy nie bierze odpowiedzialności za tworzenie obiektu zależnego, a następnie używanie jego metod. Zamiast tego zewnętrzne źródło (które w AngularJS jest samą strukturą AngularJS) tworzy zależny obiekt i przekazuje go obiektowi źródłowemu do dalszego wykorzystania.

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

Powyższy diagram przedstawia prosty przykład codziennego rytuału w programowaniu baz danych.

  • Pole „Model” przedstawia „Klasę modelu”, która jest zwykle tworzona w celu interakcji z bazą danych. Więc teraz baza danych jest zależna od działania „klasy modelu”.
  • Poprzez wstrzyknięcie zależności tworzymy usługę, która pobiera wszystkie informacje z bazy danych i dostaje się do klasy modelu.

W pozostałej części tego samouczka przyjrzymy się dokładniej wstrzykiwaniu zależności i sposobowi jego realizacji w AngularJS.

W tym samouczku nauczysz się:

  • Który komponent można wstrzyknąć jako zależność w AngularJS
  • Przykład wstrzykiwania zależności
    • Składnik wartości
    • Usługa

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

W Angular.JS zależności są wstrzykiwane przy użyciu „metody fabrycznej do wstrzykiwania” lub „funkcji konstruktora”.

Te komponenty mogą być wstrzykiwane z komponentami „service” i „value” jako zależnościami. 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 bazy danych MySQL lub MS SQL Server za pośrednictwem aplikacji internetowej PHP.

Usługa $ http jest zwykle definiowana z poziomu kontrolera 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.

Więc kiedy powyższy kod zostanie wykonany, AngularJS wykona następujące kroki;

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

Teraz, gdy zależność jest wprowadzona 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

Wstrzykiwanie zależności można zaimplementować na 2 sposoby

  1. Jeden to „składnik wartości”
  2. Innym jest „Usługa”

Przyjrzyjmy się bliżej realizacji obu sposobów.

1) Składnik wartości

Koncepcja ta opiera się na fakcie stworzenia prostego obiektu JavaScript i przekazania go do kontrolera do dalszego przetwarzania.

Jest to realizowane za pomocą poniższych dwóch kroków

Krok 1) Utwórz obiekt JavaScript, używając komponentu wartości i dołącz 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 obiektu JavaScript z kontrolera Angular.JS

Event Registration


Guru99 Global Event

{{ID}}

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

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

Funkcja wartości modułu JS Angular.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 kontrolera jako parametr funkcji.

  1.  $scope.ID =TutorialID;

Wartość TutorialID wynosząca 5 jest teraz przypisywana do innej zmiennej o nazwie ID w obiekcie $ scope. Odbywa się to tak, aby wartość 5 mogła zostać przekazana ze sterownika do widoku.

  1. {{ID}}

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

Po wykonaniu powyższego kodu dane wyjściowe zostaną pokazane jak poniżej

2) Usługa

Usługa jest zdefiniowana jako pojedynczy obiekt JavaScript 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 umieszczeniu w kontrolerach zapewnia niezbędne funkcje

(get (), query (), save (), remove (), delete ()).

Te funkcje można następnie odpowiednio wywołać ze swojego kontrolera.

Spójrzmy na prosty przykład, jak możesz stworzyć własną usługę. Zamierzamy stworzyć prostą usługę dodawania, która dodaje dwie liczby.

Event Registration

Guru99 Global Event




Result: {{result}}

W powyższym przykładzie wykonywane są 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 kiedy AngularJS tworzy instancję naszej usługi AdditionService w naszym kontrolerze, moglibyśmy wtedy uzyskać dostęp do funkcji „Dodawanie”. W tej definicji funkcji mówimy, że ta funkcja przyjmuje dwa parametry, a i b.

  1.  return a+b;

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

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

To jest główny krok, który obejmuje wstrzyknięcie zależności. W naszej definicji kontrolera odnosimy się teraz do naszej usługi „AdditionalService”. Gdy AngularJS zobaczy to, utworzy wystąpienie obiektu typu „AdditionService”.

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

Uzyskujemy teraz dostęp do funkcji „Dodatek”, która jest zdefiniowana w naszym serwisie i przypisujemy ją do obiektu $ scope kontrolera.

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

Podsumowanie:

  • Dependency Injection, jak sama nazwa wskazuje, jest procesem wstrzykiwania zależnych funkcji do modułów w czasie wykonywania.
  • Korzystanie z iniekcji zależności pomaga w uzyskaniu kodu, który można ponownie wykorzystać. Jeśli masz wspólną funkcjonalność, która jest używana w wielu modułach aplikacji, najlepszym sposobem jest zdefiniowanie usługi centralnej z tą funkcją, a następnie wstrzyknięcie tej usługi jako zależności w modułach aplikacji.
  • Obiekt wartości AngularJS może zostać użyty do wstrzyknięcia prostych obiektów JavaScript do kontrolera.
  • Moduł usług może służyć do definiowania usług niestandardowych, które mogą być ponownie wykorzystywane w wielu modułach AngularJS.