Výukový program pre modul AngularJS s príkladom

Obsah:

Anonim

Čo je modul AngularJS?

Modul definuje funkčnosť aplikácie, ktorá sa aplikuje na celú stránku HTML pomocou smernice ng-app. Definuje funkčnosť, ako sú služby, smernice a filtre, a umožňuje tak jednoduché opätovné použitie v rôznych aplikáciách.

Vo všetkých našich predchádzajúcich tutoriáloch by ste si všimli direktívu ng-app použitú na definovanie vašej hlavnej aplikácie Angular. Toto je jeden z kľúčových konceptov modulov v Angular.JS.

V tomto návode sa naučíte

  • Ako vytvoriť modul v AngularJS
  • Moduly a radiče

Ako vytvoriť modul v AngularJS

Predtým, ako začneme s modulom, pozrime sa na príklad aplikácie AngularJS bez modulu a potom pochopíme potrebu mať moduly vo svojej aplikácii.

Zvážme vytvorenie súboru s názvom „DemoController.js“ a pridanie nasledujúceho kódu do súboru

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

Vo vyššie uvedenom kóde sme vytvorili funkciu nazvanú „DemoController“, ktorá bude v našej aplikácii fungovať ako kontrolór.

V tomto radiči práve vykonávame pridanie 2 premenných a a b a priradenie pridania týchto premenných k novej premennej c priraďujeme späť k objektu rozsahu.

Teraz si vytvoríme náš hlavný Sample.html, ktorý bude našou hlavnou aplikáciou. Vložte nasledujúci úryvok kódu na našu stránku HTML.



Globálna udalosť Guru99

{{c}}

Vo vyššie uvedenom kóde zahrňujeme náš DemoController a potom pomocou výrazu vyvoláme hodnotu premennej $ scope.c.

Všimnite si však našu smernicu ng-app, ktorá má prázdnu hodnotu.

  • To v podstate znamená, že ku všetkým radičom, ktoré sa volajú v rámci smernice o ng-aplikáciách, je možné pristupovať globálne. Neexistuje hranica, ktorá by oddeľovala viac radičov od seba.
  • V dnešnom modernom programovaní je teraz zlým zvykom mať radiče nepripojené k žiadnym modulom a robiť ich globálne prístupnými. Pre radiče musí byť definovaná nejaká logická hranica.

A tu prichádzajú na rad moduly. Moduly sa používajú na vytvorenie tohto oddelenia hraníc a na pomoc pri oddeľovaní radičov na základe funkčnosti.

Zmeňme vyššie uvedený kód tak, aby implementoval moduly, a k tomuto modulu pripojíme náš radič

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

Všimnime si kľúčové rozdiely v kóde napísanom vyššie

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

    Špeciálne vytvárame modul AngularJS s názvom 'sampleApp'. Týmto sa vytvorí logická hranica pre funkčnosť, ktorú bude tento modul obsahovať. Takže v našom vyššie uvedenom príklade máme modul, ktorý obsahuje radič, ktorý vykonáva úlohu pridania 2 objektov rozsahu. Preto môžeme mať jeden modul s logickou hranicou, ktorý hovorí, že tento modul bude pre aplikáciu vykonávať iba funkčnosť matematických výpočtov.

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

    Teraz pripájame ovládač k nášmu modulu AngularJS „SampleApp“. To znamená, že ak v našom hlavnom kóde HTML nebudeme odkazovať na modul „sampleApp“, nebudeme môcť odkazovať na funkčnosť nášho kontrolóra.

Náš hlavný kód HTML nebude vyzerať tak, ako je uvedené nižšie



Guru99 Global Event

{{c}}

Poznamenajme si kľúčové rozdiely v kóde napísanom vyššie a v našom predchádzajúcom kóde



V našej telovej značke


    

  • Namiesto toho, aby sme mali prázdnu direktívu ng-app, voláme teraz modul sampleApp.
    • 

  • Zavolaním tohto aplikačného modulu môžeme teraz získať prístup k radiču „DemoController“ a funkciám prítomným v demo radiči.
    • 




Moduly a radiče


V Angular.JS je vzorom používaným pri vývoji moderných webových aplikácií vytváranie viacerých modulov a radičov na logické oddelenie viacerých úrovní funkčnosti.


Za normálnych okolností budú moduly uložené v samostatných súboroch Javascript, ktoré by sa líšili od hlavného súboru aplikácie.


Pozrime sa na príklad toho, ako sa to dá dosiahnuť.





V príklade nižšie


    

  • Vytvoríme súbor s názvom Utilities.js, ktorý bude obsahovať 2 moduly, jeden na vykonávanie funkcie sčítania a druhý na vykonávanie funkcie odčítania.
    • 

  • Potom vytvoríme 2 samostatné súbory aplikácií a z každého súboru aplikácie otvoríme súbor Utility.
    • 

  • V jednom súbore aplikácie pristúpime k modulu na sčítanie a v druhom pristúpime k modulu na odčítanie.
    • 



Krok 1) Definujte kód pre viac modulov a radičov.


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


Poznačme si kľúčové body v kóde napísanom vyššie


    

  1. 

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

    Vytvorili sa 2 samostatné uhlové moduly, jeden s názvom „AdditionApp“ a druhý s názvom „SubtractionApp“.
    

    2. 

  2. 

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

    Pre každý modul sú definované 2 samostatné ovládače, jeden sa volá DemoAddController a druhý je DemoSubtractController. Každý radič má samostatnú logiku na sčítanie a odčítanie čísel.
    


    

    3. 



Krok 2) Vytvorte svoje hlavné súbory aplikácií. Vytvorme súbor s názvom ApplicationAddition.html a pridajte nasledujúci kód


Addition
Addition :{{c}}


Poznačme si kľúčové body v kóde napísanom vyššie


    

  1. 

    

    Odkazujeme na náš súbor Utilities.js v našom hlavnom súbore aplikácie. To nám umožňuje odkazovať na akékoľvek moduly AngularJS definované v tomto súbore.
    

    2. 

  2. 

    

    K modulu „AdditionApp“ a DemoAddController pristupujeme pomocou smernice ng-app a ng-controller.
    

    3. 

  3. 

    {{c}}
    

    Pretože odkazujeme na vyššie uvedený modul a radič, sme schopní odkazovať na premennú $ scope.c prostredníctvom výrazu. Výraz bude výsledkom pridania dvoch premenných rozsahu a a b, ktoré sa vykonalo v radiči „DemoAddController“
    

    To isté urobíme pre funkciu odčítania.
    

    4. 



Krok 3) Vytvorte svoje hlavné súbory aplikácií. Vytvorme súbor s názvom „ApplicationSubtraction.html“ a pridáme nasledujúci kód


Addition
Subtraction :{{d}}


Poznačme si kľúčové body v kóde napísanom vyššie


    

  1. 

    

    Odkazujeme na náš súbor Utilities.js v našom hlavnom súbore aplikácie. To nám umožňuje odkazovať na ľubovoľné moduly definované v tomto súbore.
    

    2. 

  2. 

    

    K modulu „SubtractionApp“ a DemoSubtractController pristupujeme pomocou smernice ng-app a ng-controller.
    

    3. 

  3. 

    {{d}}
    

    Pretože odkazujeme na vyššie uvedený modul a radič, sme schopní odkazovať na premennú $ scope.d prostredníctvom výrazu. Výraz bude výsledkom odčítania 2 premenných rozsahu a a b, ktoré sa vykonalo v radiči „DemoSubtractController“
    

    4. 



Zhrnutie


    

  • Bez použitia modulov AngularJS začnú mať ovládače globálny rozsah, čo vedie k zlým programovacím praktikám.
    • 

  • Moduly sa používajú na oddelenie obchodnej logiky. Môže byť vytvorených viac modulov, ktoré budú v rámci týchto rôznych modulov logicky oddelené.
    • 

  • Každý modul AngularJS môže mať definovanú a priradenú vlastnú sadu ovládačov.
    • 

  • Pri definovaní modulov a radičov sú zvyčajne definované v samostatných súboroch JavaScriptu. Na tieto súbory JavaScript sa potom odkazuje v hlavnom súbore aplikácie.
    •