Výukový program pro modul AngularJS s příkladem

Obsah:

Anonim

Co je modul AngularJS?

Modul definuje funkčnost aplikace, která je použita na celou stránku HTML pomocí direktivy ng-app. Definuje funkce, jako jsou služby, směrnice 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 byste si všimli direktivy ng-app použité k definování vaší hlavní úhlové aplikace. Toto je jeden z klíčových konceptů modulů v Angular.JS.

V tomto výukovém programu se naučíte

  • Jak vytvořit modul v AngularJS
  • Moduly a řadiče

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 poté 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 řadič.

V tomto řadiči provádíme pouze přidání 2 proměnných a a b a přiřazení přidání těchto proměnných nové proměnné c a jejich přiřazení zpět k objektu oboru.

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.



Globální událost Guru99

{{C}}

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

Ale všimněte si naší směrnice ng-app, má prázdnou hodnotu.

  • To v zásadě znamená, že ke všem řadičům, které jsou volány v kontextu směrnice ng-app, lze přistupovat globálně. Neexistuje hranice, která by oddělovala více řadičů od sebe navzájem.
  • Nyní v moderním programování je špatnou praxí mít řadiče nepřipojené k žádným modulům a zpřístupňovat je globálně. Pro řadiče musí být definována nějaká logická hranice.

A tady přicházejí moduly. Moduly se používají k vytvoření tohoto oddělení hranic a pomoci při oddělení řadičů na základě funkčnosti.

Pojďme změnit výše uvedený kód, abychom implementovali moduly a připojili náš ovladač k tomuto modulu

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ů v kódu napsaném výše

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

    Konkrétně vytváříme modul AngularJS s názvem 'sampleApp'. Tím se vytvoří logická hranice pro funkčnost, kterou bude tento modul obsahovat. Takže v našem výše uvedeném příkladu máme modul, který obsahuje řadič, který provádí roli přidání 2 objektů rozsahu. Proto můžeme mít jeden modul s logickou hranicí, který říká, že tento modul bude pro aplikaci provádět pouze funkce matematických výpočtů.

  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 kódu HTML, nebudeme moci odkazovat na funkčnost našeho řadiče.

Náš hlavní kód HTML nebude vypadat, jak je znázorněno níže



Guru99 Global Event

{{c}}

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



V naší tělové značce


    

  • Místo toho, abychom měli prázdnou direktivu ng-app, nyní voláme modul sampleApp.
    • 

  • Voláním tohoto aplikačního modulu můžeme nyní přistupovat k řadiči 'DemoController' a funkcím přítomným v demo řadiči.
    • 




Moduly a řadiče


V Angular.JS je vzorem používaným pro vývoj moderních webových aplikací vytváření více modulů a řadičů k logickému oddělení více úrovní funkčnosti.


Za normálních okolností budou moduly uloženy v samostatných souborech Javascript, které by se lišily od hlavního souboru aplikace.


Podívejme se na příklad toho, 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 provádění funkce sčítání a druhý pro provádění funkce odčítání.
    • 

  • Poté vytvoříme 2 samostatné soubory aplikací a z každého souboru aplikace přistoupíme k souboru Utility.
    • 

  • V jednom souboru aplikace přistoupíme k modulu pro přidání a ve druhém budeme přistupovat k modulu pro odečítání.
    • 



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


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 kódu napsaném výše


    

  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. 

  2. 

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

    Pro každý modul jsou definovány 2 samostatné řadiče, jeden se nazývá DemoAddController a druhý je DemoSubtractController. Každý řadič má samostatnou logiku pro sčítání a odčítání čísel.
    


    

    3. 



Krok 2) Vytvořte hlavní soubory aplikace. Vytvořme soubor s názvem ApplicationAddition.html a přidáme následující kód


Addition
Addition :{{c}}


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


    

  1. 

    

    Odkazujeme na náš soubor Utilities.js v našem hlavním souboru aplikace. To nám umožňuje odkazovat na všechny moduly AngularJS definované v tomto souboru.
    

    2. 

  2. 

    

    Přistupujeme k modulu 'AdditionApp' a DemoAddController pomocí direktivy ng-app a ng-controller.
    

    3. 

  3. 

    {{c}}
    

    Protože odkazujeme na výše zmíněný modul a řadič, jsme schopni odkazovat na proměnnou $ scope.c pomocí výrazu. Výraz bude výsledkem přidání 2 proměnných rozsahu a a b, které bylo provedeno v řadiči 'DemoAddController'
    

    Stejným způsobem to uděláme pro funkci odčítání.
    

    4. 



Krok 3) Vytvořte hlavní soubory aplikace. Vytvořme soubor s názvem „ApplicationSubtraction.html“ a přidáme následující kód


Addition
Subtraction :{{d}}


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


    

  1. 

    

    Odkazujeme na náš soubor Utilities.js v našem hlavním souboru aplikace. To nám umožňuje odkazovat na všechny moduly definované v tomto souboru.
    

    2. 

  2. 

    

    Přistupujeme k modulu 'SubtractionApp a DemoSubtractController pomocí směrnice ng-app a ng-controller.
    

    3. 

  3. 

    {{d}}
    

    Protože odkazujeme na výše zmíněný modul a řadič, jsme schopni odkazovat na proměnnou $ scope.d pomocí výrazu. Výraz bude výsledkem odečtení 2 proměnných rozsahu a a b, které bylo provedeno v řadiči „DemoSubtractController“
    

    4. 



souhrn


    

  • Bez použití modulů AngularJS začnou řadiče mít 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ů, které budou logicky odděleny v rámci těchto různých modulů.
    • 

  • Každý modul AngularJS může mít definovanou a přiřazenou vlastní sadu ovladačů.
    • 

  • Při definování modulů a řadičů jsou obvykle definovány v samostatných souborech JavaScriptu. Na tyto soubory JavaScriptu se poté odkazuje v hlavním souboru aplikace.
    •