Co to jest moduł AngularJS?
Moduł definiuje funkcjonalność aplikacji, która jest stosowana do całej strony HTML za pomocą dyrektywy ng-app. Definiuje funkcje, takie jak usługi, dyrektywy i filtry, w sposób ułatwiający ich ponowne użycie w różnych aplikacjach.
We wszystkich naszych wcześniejszych samouczkach można zauważyć dyrektywę ng-app używaną do definiowania głównej aplikacji Angular. To jedna z kluczowych koncepcji modułów w Angular.JS.
W tym samouczku nauczysz się:
- Jak stworzyć moduł w AngularJS
- Moduły i kontrolery
Jak stworzyć moduł w AngularJS
Zanim zaczniemy od tego, czym jest moduł, spójrzmy na przykład aplikacji AngularJS bez modułu, a następnie zrozummy potrzebę posiadania modułów w swojej aplikacji.
Rozważmy utworzenie pliku o nazwie „DemoController.js” i dodanie poniższego kodu do pliku
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
W powyższym kodzie stworzyliśmy funkcję o nazwie „DemoController”, która będzie działać jako kontroler w naszej aplikacji.
W tym kontrolerze po prostu dodajemy 2 zmienne a i b oraz przypisujemy dodanie tych zmiennych do nowej zmiennej c i przypisujemy ją z powrotem do obiektu zasięgu.
Teraz stwórzmy nasz główny Sample.html, który będzie naszą główną aplikacją. Wstawmy poniższy fragment kodu na naszej stronie HTML.
Globalne wydarzenie Guru99
{{do}}W powyższym kodzie włączamy DemoController, a następnie wywołujemy wartość zmiennej $ scope.c za pomocą wyrażenia.
Ale zwróć uwagę na naszą dyrektywę ng-app, ma ona pustą wartość.
- Zasadniczo oznacza to, że wszystkie kontrolery, które są wywoływane w kontekście dyrektywy ng-app, mogą być dostępne globalnie. Nie ma granicy, która oddziela od siebie wielu kontrolerów.
- Obecnie we współczesnym programowaniu zła praktyka polega na tym, że kontrolery nie są podłączone do żadnych modułów i sprawiają, że są one dostępne globalnie. Dla kontrolerów musi być zdefiniowana jakaś logiczna granica.
I tu właśnie pojawiają się moduły. Moduły służą do tworzenia separacji granic i pomagają w oddzielaniu kontrolerów na podstawie funkcjonalności.
Zmieńmy powyższy kod, aby zaimplementować moduły i dołączyć nasz kontroler do tego modułu
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Zwróćmy uwagę na kluczowe różnice w powyższym kodzie
var sampleApp = angular.module('sampleApp',[]);Specjalnie tworzymy moduł AngularJS o nazwie „sampleApp”. Stworzy to logiczną granicę dla funkcjonalności, które będzie zawierał ten moduł. Więc w naszym powyższym przykładzie mamy moduł, który zawiera kontroler pełniący rolę dodania 2 obiektów zakresu. Stąd możemy mieć jeden moduł z logiczną granicą, która mówi, że ten moduł będzie wykonywał tylko funkcjonalność obliczeń matematycznych dla aplikacji.
sampleApp.controller('DemoController', function($scope)Dołączamy teraz kontroler do naszego modułu AngularJS „SampleApp”. Oznacza to, że jeśli nie będziemy odnosić się do modułu „sampleApp” w naszym głównym kodzie HTML, nie będziemy w stanie odwołać się do funkcjonalności naszego kontrolera.
Nasz główny kod HTML nie będzie wyglądał tak, jak pokazano poniżej
Guru99 Global Event
{{c}}Zwróćmy uwagę na kluczowe różnice w kodzie napisanym powyżej oraz w naszym poprzednim kodzie
W naszym tagu ciała
- Zamiast mieć pustą dyrektywę ng-app, teraz wywołujemy moduł sampleApp.
- Wywołując ten moduł aplikacji, możemy teraz uzyskać dostęp do kontrolera „DemoController” i funkcji obecnych w kontrolerze demonstracyjnym.
Moduły i kontrolery
W Angular.JS wzorzec używany do tworzenia nowoczesnych aplikacji internetowych polega na tworzeniu wielu modułów i kontrolerów w celu logicznego oddzielenia wielu poziomów funkcjonalności.
Zwykle moduły będą przechowywane w oddzielnych plikach JavaScript, które różniłyby się od głównego pliku aplikacji.
Spójrzmy na przykład, jak można to osiągnąć.
W poniższym przykładzie
- Stworzymy plik o nazwie Utilities.js, który będzie zawierał 2 moduły, jeden do wykonywania funkcji dodawania, a drugi do wykonywania funkcji odejmowania.
- Następnie utworzymy 2 oddzielne pliki aplikacji i uzyskamy dostęp do pliku Utility z każdego pliku aplikacji.
- W jednym pliku aplikacji uzyskamy dostęp do modułu w celu dodania, aw drugim uzyskamy dostęp do modułu do odejmowania.
Krok 1) Zdefiniuj kod dla wielu modułów i kontrolerów.
var AdditionApp = angular.module('AdditionApp',[]);AdditionApp.controller('DemoAddController', function($scope) {$scope.a=5;$scope.b=6;$scope.c=$scope.a + $scope.b;});var SubractionApp = angular.module('SubtractionApp',[]);SubractionApp.controller('DemoSubtractController', function($scope) {$scope.a=8;$scope.b=6;$scope.d=$scope.a - $scope.b;});Zwróćmy uwagę na kluczowe punkty w powyższym kodzie
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Zostały utworzone 2 oddzielne moduły Angular, jeden o nazwie „AdditionalApp”, a drugi o nazwie „SubtractionApp”.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Istnieją 2 oddzielne kontrolery zdefiniowane dla każdego modułu, jeden nazywa się DemoAddController, a drugi to DemoSubtractController. Każdy kontroler ma oddzielną logikę do dodawania i odejmowania liczb.
Krok 2) Utwórz główne pliki aplikacji. Utwórzmy plik o nazwie ApplicationAddition.html i dodajmy poniższy kod
Addition Addition :{{c}}Zwróćmy uwagę na kluczowe punkty w powyższym kodzie
Odwołujemy się do naszego pliku Utilities.js w naszym głównym pliku aplikacji. To pozwala nam odwoływać się do dowolnych modułów AngularJS zdefiniowanych w tym pliku.
Uzyskujemy dostęp do modułu „AdditionApp” i DemoAddController za pomocą odpowiednio dyrektywy ng-app i ng-controller.
{{c}}Ponieważ odwołujemy się do wyżej wymienionego modułu i kontrolera, możemy odwołać się do zmiennej $ scope.c za pomocą wyrażenia. Wyrażenie będzie wynikiem dodania 2 zmiennych zakresu a i b, które zostało przeprowadzone w kontrolerze „DemoAddController”
W ten sam sposób zrobimy dla funkcji odejmowania.
Krok 3) Utwórz główne pliki aplikacji. Utwórzmy plik o nazwie „ApplicationSubtraction.html” i dodajmy poniższy kod
Addition Subtraction :{{d}}Zwróćmy uwagę na kluczowe punkty w powyższym kodzie
Odwołujemy się do naszego pliku Utilities.js w naszym głównym pliku aplikacji. To pozwala nam odwoływać się do dowolnych modułów zdefiniowanych w tym pliku.
Uzyskujemy dostęp do modułu SubtractionApp i DemoSubtractController za pomocą odpowiednio dyrektywy ng-app i ng-controller.
{{d}}Ponieważ odwołujemy się do wyżej wymienionego modułu i kontrolera, możemy odwołać się do zmiennej $ scope.d za pomocą wyrażenia. Wyrażenie będzie wynikiem odejmowania 2 zmiennych zakresu a i b, które zostało przeprowadzone w kontrolerze „DemoSubtractController”
Podsumowanie
- Bez użycia modułów AngularJS kontrolery zaczynają mieć zasięg globalny, co prowadzi do złych praktyk programistycznych.
- Moduły służą do oddzielania logiki biznesowej. Można utworzyć wiele modułów, aby były logicznie rozdzielone w ramach tych różnych modułów.
- Każdy moduł AngularJS może mieć zdefiniowany i przypisany do niego własny zestaw kontrolerów.
- Podczas definiowania modułów i kontrolerów są one zwykle definiowane w oddzielnych plikach JavaScript. Te pliki JavaScript są następnie przywoływane w głównym pliku aplikacji.