Moduły AngularJS

Co to jest moduł AngularJS?

Moduł definiuje funkcjonalność aplikacji, która jest stosowana do całej strony HTML za pomocą dyrektywy ng-app. Definiuje ona funkcjonalność, taką jak usługi, Dyrektywyi filtrów w sposób ułatwiający ich ponowne wykorzystanie w różnych aplikacjach.

Powyższa ilustracja podsumowuje tę granicę.

We wszystkich naszych wcześniejszych tutoriale, zauważyłeś dyrektywę ng-app służącą do definiowania głównej aplikacji Angular. To jedna z kluczowych koncepcji modułów w AngularJS.

⚠️ Uwaga dotycząca wersji: Wsparcie AngularJS zakończyło się w styczniu 2022 r.. Nowoczesny Angular Używa @NgModule, a jego domyślnymi komponentami są samodzielne komponenty. Poniższy kod ma charakter historyczny.

Jak utworzyć moduł w AngularJS

Zanim zaczniemy omawiać, czym jest moduł, przyjrzyjmy się przykładowi Aplikacja AngularJS bez modułu, a następnie zrozumieć potrzebę posiadania modułów w swojej aplikacji.

Rozważmy utworzenie pliku o nazwie „DemoController.js” i dodanie do niego poniższego kodu

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 pełniła rolę kontrolera w naszej aplikacji.

W tym kontrolerze po prostu dodajemy 2 zmienne a i b i przypisujemy dodawanie tych zmiennych do nowej zmiennej c, a następnie przypisujemy ją z powrotem do zmiennej c. zakres obiekt.

Stwórzmy teraz nasz główny plik Sample.html, który będzie naszą główną aplikacją. Wstawmy poniższy fragment kodu na naszą stronę HTML.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

W powyższym kodzie dołączamy nasz 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 dostęp do wszystkich kontrolerów wywoływanych w kontekście dyrektywy ng-app można uzyskać globalnie. Nie ma granicy oddzielającej wiele kontrolerów od siebie.
• We współczesnym programowaniu złą praktyką jest niepodłączanie kontrolerów do żadnych modułów i udostępnianie ich globalnie. Dla kontrolerów musi być zdefiniowana pewna logiczna granica.

I tu właśnie pojawiają się moduły. Moduły służą do tworzenia separacji granic i pomagają w oddzielaniu sterowników w oparciu o funkcjonalność.

Zmieńmy powyższy kod, aby zaimplementować moduły i podłączmy 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 kodzie napisanym powyżej

1. var sampleApp = angular.module('sampleApp',[]);

   Specjalnie tworzymy moduł AngularJS o nazwie „sampleApp”. Utworzy to logiczną granicę dla funkcjonalności, które będzie zawierał ten moduł. Zatem w powyższym przykładzie mamy moduł zawierający kontroler pełniący rolę dodawania 2 obiektów zakresu. Zatem możemy mieć jeden moduł z granicą logiczną, która mówi, że moduł ten będzie realizował jedynie funkcjonalność obliczeń matematycznych dla aplikacji.

2. sampleApp.controller('DemoController', function($scope)

   Teraz dołączamy kontroler do naszego modułu AngularJS „sampleApp”. Oznacza to, że jeśli nie odwołamy się do modułu „sampleApp” w głównym kodzie HTML, nie będziemy mogli odwołać się do funkcjonalności naszego kontrolera.

Setter kontra getter: kątowy.moduł tworzy moduł tylko wtedy, gdy zależność przekazywana jest tablica; bez niej wywołanie pobiera istniejący moduł.

Nasz główny kod HTML będzie teraz wyglądał tak, jak pokazano poniżej

<body ng-app="sampleApp">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Zwróćmy uwagę na kluczowe różnice w kodzie napisanym powyżej i naszym poprzednim kodzie

<body ng-app="sampleApp">

W naszym tagu ciała,

• Zamiast pustej dyrektywy ng-app, wywołujemy teraz moduł sampleApp.
• Wywołując ten moduł aplikacji, możemy teraz uzyskać dostęp do kontrolera „DemoController” i funkcjonalności obecnych w kontrolerze demonstracyjnym.

Moduły i kontrolery w AngularJS

In angularjs, wzór użyty do rozwojuping Współczesne aplikacje internetowe opierają się na tworzeniu wielu modułów i kontrolerów w celu logicznego oddzielenia różnych poziomów funkcjonalności.

Zwykle moduły będą przechowywane oddzielnie JAVASCRIPT plików, 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

• Utworzymy plik o nazwie Utilities.js, który będzie zawierał 2 moduły: jeden do wykonywania funkcji dodawania, a drugi do wykonywania funkcji podrzędnych.traccja.
• 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, a w drugim uzyskamy dostęp do modułu w celu podzłożenia.traccja.

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 kodzie zapisanym powyżej

1.  var AdditionApp = angular.module('AdditionApp',[]);
    var SubractionApp = angular.module('SubtractionApp',[]);

   Utworzono dwa oddzielne moduły AngularJS, jeden o nazwie „AdditionApp”, a drugi o nazwie „SubtracAplikacja tionApp'.

2. AdditionApp.controller('DemoAddController', function($scope)
   SubractionApp.controller('DemoSubtractController', function($scope)

   Dla każdego modułu zdefiniowano 2 oddzielne kontrolery: jeden nazywa się DemoAddController, a drugi DemoSubtractController. Każdy kontroler ma osobną logikę do dodawania i podrzędnychtraccja liczb.

Krok 2) Utwórz główne pliki aplikacji. Utwórzmy plik o nazwie ApplicationAddition.html i dodajmy poniższy kod

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

Zwróćmy uwagę na kluczowe punkty w kodzie zapisanym powyżej

1. <script src="/lib/Utilities.js"></script>

   Odwołujemy się do naszego pliku Utilities.js w naszym głównym pliku aplikacji. Dzięki temu możemy odwoływać się do dowolnych modułów AngularJS zdefiniowanych w tym pliku.

2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

   Uzyskujemy dostęp do modułu „AdditionApp” i DemoAddController za pomocą dyrektywy ng-app i kontroler ng odpowiednio.

3. {{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 aib, które zostało przeprowadzone w kontrolerze „DemoAddController”

   Tak samo zrobimy w przypadku subtracfunkcja cji.

Krok 3) Utwórz główne pliki aplikacji. Utwórzmy plik o nazwie „ApplicationSub”traction.html” i dodaj poniższy kod

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

Zwróćmy uwagę na kluczowe punkty w kodzie zapisanym powyżej

1. <script src="/lib/Utilities.js"></script>

   Odwołujemy się do naszego pliku Utilities.js w naszym głównym pliku aplikacji. Dzięki temu możemy odwoływać się do dowolnych modułów zdefiniowanych w tym pliku.

2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

   Uzyskujemy dostęp do „Sub”tracModuł tionApp i DemoSubtractController za pomocą dyrektywy ng-app i odpowiednio ng-controller.

3. {{d}}

   Ponieważ odwołujemy się do wspomnianego modułu i kontrolera, możemy odwołać się do zmiennej $scope.d za pomocą wyrażenia. Wyrażenie będzie wynikiem podrzędnegotracanaliza 2 zmiennych zakresu a i b, która została przeprowadzona w „DemoSub”tracKontroler tController

FAQ