Moduly AngularJS

Co je modul AngularJS?

Modul definuje funkčnost aplikace, která se aplikuje na celou HTML stránku pomocí direktivy ng-app. Definuje funkce, jako jsou služby, direktivy a filtry, způsobem, který usnadňuje jejich opětovné použití v různých aplikacích.

Ve všech našich dřívějších výukových programech jste si všimli direktivy ng-app používané k definování vaší hlavní aplikace Angular. Toto je jeden z klíčových konceptů modulů v Angular.JS.

Jak vytvořit modul v AngularJS

Než začneme s tím, co je modul, podívejme se na příklad aplikace AngularJS bez modulu a pak pochopíme potřebu mít moduly ve vaší aplikaci.

Zvažme vytvoření souboru s názvem "DemoController.js" a přidání níže uvedeného kódu do souboru

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

Ve výše uvedeném kódu jsme vytvořili funkci nazvanou „DemoController“, která bude v naší aplikaci fungovat jako kontrolér.

V tomto ovladači právě provádíme přidání 2 proměnných aab a přiřadíme přidání těchto proměnných k nové proměnné c a přiřadíme ji zpět k objektu scope.

Nyní vytvoříme náš hlavní Sample.html, který bude naší hlavní aplikací. Vložme níže uvedený fragment kódu na naši stránku HTML.

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

Ve výše uvedeném kódu jsme zahrnuli náš DemoController a poté pomocí výrazu vyvolali hodnotu proměnné $scope.c.

Všimněte si ale naší direktivy ng-app, má prázdnou hodnotu.

To v podstatě znamená, že ke všem kontrolérům, které jsou volány v kontextu direktivy ng-app, lze přistupovat globálně. Neexistuje žádná hranice, která by oddělovala více ovladačů od sebe.
V moderním programování je to špatná praxe, když nejsou ovladače připojeny k žádným modulům a jsou globálně přístupné. Pro ovladače musí být definována nějaká logická hranice.

A zde přicházejí na řadu moduly. Moduly se používají k vytvoření tohoto oddělení hranic a pomáhají při oddělení řídicích jednotek na základě funkčnosti.

Změňme výše uvedený kód pro implementaci modulů a připojte k tomuto modulu náš ovladač

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

Všimněme si klíčových rozdílů ve výše napsaném kódu

```
var sampleApp = angular.module('sampleApp',[]);
```
Konkrétně vytváříme modul AngularJS s názvem 'sampleApp'. To bude tvořit logickou hranici pro funkcionalitu, kterou bude tento modul obsahovat. Takže v našem výše uvedeném příkladu máme modul, který obsahuje ovladač, který plní roli přidání 2 objektů rozsahu. Můžeme tedy mít jeden modul s logickou hranicí, která říká, že tento modul bude provádět pouze funkcionalitu matematických výpočtů pro aplikaci.
```
sampleApp.controller('DemoController', function($scope)
```
Nyní připojujeme ovladač k našemu modulu AngularJS „SampleApp“. To znamená, že pokud nebudeme odkazovat na modul 'sampleApp' v našem hlavním HTML kódu, nebudeme moci odkazovat na funkčnost našeho ovladače.

Náš hlavní HTML kód nebude vypadat jako níže

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

Všimněme si klíčových rozdílů ve výše napsaném kódu a našem předchozím kódu

<body ng-app="'sampleApp'">

V našem tělesném štítku,

Místo prázdné direktivy ng-app nyní voláme modul sampleApp.
Zavoláním tohoto aplikačního modulu můžeme nyní přistupovat k řídicí jednotce „DemoController“ a funkcím přítomným v demo řídicí jednotce.

Moduly a řadiče v AngularJS

In Angular.JS, vzor použitý pro vývojping Moderní webové aplikace vytvářejí více modulů a kontrolerů, které logicky oddělují různé úrovně funkcionality.

Normálně budou moduly uloženy odděleně Javascript soubory, které by se lišily od hlavního souboru aplikace.

Podívejme se na příklad, jak toho lze dosáhnout.

V níže uvedeném příkladu

Vytvoříme soubor s názvem Utilities.js, který bude obsahovat 2 moduly, jeden pro sčítání a druhý pro odčítání.tracvání.
Poté vytvoříme 2 samostatné aplikační soubory a z každého aplikačního souboru přistoupíme k souboru Utility.
V jednom souboru aplikace budeme přistupovat k modulu pro sčítání a v druhém budeme přistupovat k modulu pro podřazení.tracvání.

Krok 1) Definujte kód pro více modulů a ovladačů.

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;
});

Všimněme si klíčových bodů výše napsaného kódu

```
 var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);
```
Jsou vytvořeny 2 samostatné Angular moduly, jeden s názvem 'AdditionApp' a druhý s názvem 'Sub'.tractionApp'.
```
AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)
```
Pro každý modul jsou definovány 2 samostatné kontrolery, jeden se nazývá DemoAddController a druhý DemoSub.tractController. Každý Controller má samostatnou logiku pro sčítání a podčítánítracce čísel.

Krok 2) Vytvořte hlavní soubory aplikace. Vytvořme soubor s názvem ApplicationAddition.html a přidejte níže uvedený kód

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

Všimněme si klíčových bodů výše napsaného kódu

```
<script src="/lib/Utilities.js"></script>
```
Odkazujeme na náš soubor Utilities.js v hlavním souboru aplikace. To nám umožňuje odkazovat na jakékoli moduly AngularJS definované v tomto souboru.
```
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
```
K modulu 'AdditionApp' a DemoAddController přistupujeme pomocí direktivy ng-app a ng-kontrolér resp.
```
{{c}}
```
Protože odkazujeme na výše zmíněný modul a kontrolér, jsme schopni odkazovat na proměnnou $scope.c pomocí výrazu. Výraz bude výsledkem přidání 2 proměnných rozsahu aab, které bylo provedeno v ovladači 'DemoAddController'

Stejným způsobem to uděláme pro subtracfunkce.

Krok 3) Vytvořte hlavní soubory aplikace. Vytvořme soubor s názvem „ApplicationSub“traction.html“ a přidejte níže uvedený kód

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

Všimněme si klíčových bodů výše napsaného kódu

```
<script src="/lib/Utilities.js"></script>
```
Odkazujeme na náš soubor Utilities.js v hlavním souboru aplikace. To nám umožňuje odkazovat na všechny moduly definované v tomto souboru.
```
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
```
Přistupujeme k „Sub“tracModul tionApp a DemoSubtractController pomocí direktivy ng-app a ng-controller.
```
{{d}}
```
Protože odkazujeme na výše zmíněný modul a kontroler, můžeme odkazovat na proměnnou $scope.d pomocí výrazu. Výraz bude výsledkem podprogramutracování 2 proměnných rozsahu a a b, které bylo provedeno v DemoSubtractController kontrolor

Shrnutí

Bez použití modulů AngularJS začínají mít řadiče globální rozsah, což vede ke špatným programovacím praktikám.
Moduly se používají k oddělení obchodní logiky. Lze vytvořit více modulů tak, aby byly v rámci těchto různých modulů logicky odděleny.
Každý modul AngularJS může mít definovanou a přiřazenou vlastní sadu ovladačů.
Při definování modulů a řídicích jednotek se obvykle definují samostatně JavaScénář soubory. Tyto JavaSoubory skriptů jsou pak odkazovány v hlavním souboru aplikace.

Moduly AngularJS

Co je modul AngularJS?

Jak vytvořit modul v AngularJS

Moduly a řadiče v AngularJS

Shrnutí

Shrňte tento příspěvek takto:

Přihlaste se k odběru newsletteru