Moduly AngularJS

Od: James Hartman James Hartman
Hours aktualizováno

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

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

  2. 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žívaný pro vývoj moderních webových aplikací je vytváření více modulů a kontrolérů pro logické oddělení více úrovní funkčnosti.

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 funkci sčítání a druhý pro funkci odčítá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 přistoupíme k modulu pro sčítání a ve druhém k ​​modulu pro odečítá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

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

    Jsou vytvořeny 2 samostatné úhlové moduly, jeden s názvem 'AdditionApp' a druhý s názvem 'SubtractionApp'.

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

    Pro každý modul jsou definovány 2 samostatné ovladače, jeden se nazývá DemoAddController a druhý je DemoSubtractController. Každý ovladač má samostatnou logiku pro sčítání a odčítání čí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

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

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

    K modulu 'AdditionApp' a DemoAddController přistupujeme pomocí direktivy ng-app a ng-kontrolér resp.

  3. {{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'

    Totéž uděláme pro funkci odčítání.

Krok 3) Vytvořte hlavní soubory aplikace. Vytvořme soubor s názvem „ApplicationSubtraction.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

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

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

    K modulu SubtractionApp a DemoSubtractController přistupujeme pomocí direktivy ng-app a ng-controlleru.

  3. {{d}}

    Protože odkazujeme na výše zmíněný modul a kontrolér, jsme schopni odkazovat na proměnnou $scope.d pomocí výrazu. Výraz bude výsledkem odečtení 2 proměnných rozsahu aab, 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.