Näidisega AngularJS mooduli õpetus

Lang L: none (table-of-contents):

Anonim

Mis on AngularJS moodul?

Moodul määratleb rakenduse funktsionaalsuse, mida rakendatakse kogu HTML-lehele ng-app-i direktiivi abil. See määratleb funktsionaalsuse, nagu teenused, direktiivid ja filtrid, viisil, mis hõlbustab selle kasutamist erinevates rakendustes.

Kõigis meie varasemates õpetustes oleksite märganud ng-appi direktiivi, mida kasutatakse teie peamise nurgarakenduse määratlemiseks. See on üks Angular.JS-i moodulite põhimõistetest.

Selles õpetuses saate teada

  • Kuidas moodulit luua AngularJS-is
  • Moodulid ja kontrollerid

Kuidas moodulit luua AngularJS-is

Enne kui alustame sellest, mis moodul on, vaatame AngularJS-i rakenduse näidet ilma moodulita ja mõistame siis vajadust moodulite olemasolu teie rakenduses.

Kaalume faili "DemoController.js" loomist ja alloleva koodi lisamist faili

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

Ülaltoodud koodis oleme loonud funktsiooni nimega "DemoController", mis toimib meie rakenduses kontrollerina.

Selles kontrolleris teostame just 2 muutuja a ja b liitmist ning määrame nende muutujate lisamise uuele muutujale c ja määrame selle tagasi objekti objektile.

Nüüd loome oma peamise Sample.html, mis on meie peamine rakendus. Lisame alloleva koodilõigu meie HTML-lehele.



Guru99 ülemaailmne sündmus

{{c}}

Ülaltoodud koodis lisame oma DemoControlleri ja kutsume seejärel avaldise kaudu muutuja $ scope.c väärtuse.

Kuid pange tähele meie ng-appi direktiivi, sellel on tühi väärtus.

  • Põhimõtteliselt tähendab see, et kõigile kontrolleritele, mida kutsutakse ng-appi direktiivi kontekstis, on juurdepääs ülemaailmselt. Ei ole piiri, mis eraldaks mitu kontrollerit üksteisest.
  • Nüüdisajal programmeerimisel on see halb tava, kui kontrollerid pole ühegi mooduli külge kinnitatud ja muudavad need ülemaailmselt kättesaadavaks. Kontrolleritel peab olema mingi loogiline piir.

Ja siia tulevad moodulid. Mooduleid kasutatakse piiride eraldamise loomiseks ja kontrollerite funktsionaalsuse alusel eraldamiseks.

Muudame ülaltoodud koodi moodulite juurutamiseks ja kinnitage oma kontroller selle mooduli külge

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

Pange tähele ülaltoodud koodi peamisi erinevusi

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

    Loome spetsiaalselt AngularJS mooduli nimega 'sampleApp'. See moodustab loogilise piiri funktsionaalsusele, mida see moodul sisaldab. Nii et meie ülaltoodud näites on meil moodul, mis sisaldab kontrollerit, mis täidab 2 ulatusobjekti lisamise rolli. Seega võib meil olla üks loogilise piiriga moodul, mis ütleb, et see moodul täidab rakenduse jaoks ainult matemaatiliste arvutuste funktsionaalsust.

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

    Nüüd kinnitame kontrolleri oma AngularJS moodulile "SampleApp". See tähendab, et kui me ei viita moodulis 'sampleApp' oma peamises HTML-koodis, ei saa me viidata oma kontrolleri funktsionaalsusele.

Meie peamine HTML-kood ei näe välja selline, nagu allpool näidatud



Guru99 Global Event

{{c}}

Pange tähele ülaltoodud koodi ja meie eelmise koodi peamisi erinevusi



Meie kehasildis


    

  • Tühja ng-appi direktiivi asemel kutsume nüüd moodulit sampleApp.
    • 

  • Sellele rakendusemoodulile helistades pääseme nüüd juurde kontrollerile 'DemoController' ja demokontrolleris olevale funktsioonile.
    • 




Moodulid ja kontrollerid


Rakenduses Angular.JS on tänapäevaste veebirakenduste arendamiseks kasutatav muster mitme mooduli ja kontrolleri loomine mitme funktsionaalsuse taseme loogiliseks eraldamiseks.


Tavaliselt hoitakse mooduleid eraldi Javascripti failides, mis erinevad peamisest rakendusfailist.


Vaatame näite, kuidas seda saavutada.


Allpool toodud näites


    

  • Loome faili nimega Utilities.js, kuhu mahub 2 moodulit, üks liitmise funktsionaalsuse ja teine ​​lahutamise funktsionaalsuse teostamiseks.
    • 

  • Seejärel loome 2 eraldi rakendusfaili ja pääseme juurde utiliidifailile igast rakendusfailist.
    • 

  • Ühes rakendusfailis pääseme juurde moodulile lisamiseks ja teises - lahutamiseks.
    • 



Samm 1) Määrake mitme mooduli ja kontrolleri kood.





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


Pange tähele ülaltoodud koodi põhipunktid


    

  1. 

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

    Loodud on 2 eraldi nurgamoodulit, millest üks kannab nime "AdditionApp" ja teine ​​nime "SubtractionApp".
    

    2. 

  2. 

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

    Iga mooduli jaoks on määratletud 2 eraldi kontrollerit, ühte nimetatakse DemoAddControlleriks ja teist DemoSubtractControlleriks. Igal kontrolleril on eraldi loogika numbrite liitmiseks ja lahutamiseks.
    

    3. 



2. samm. Looge oma peamised rakendusfailid. Loome faili nimega ApplicationAddition.html ja lisame alloleva koodi


Addition
Addition :{{c}}


Pange tähele ülaltoodud koodi põhipunktid





    

  1. 

    

    Viidame oma põhirakenduse failis failile Utilities.js. See võimaldab meil viidata mis tahes selles failis määratletud AngularJS-moodulitele.
    

    2. 

  2. 

    

    Me pääseme juurde moodulile 'AdditionApp' ja DemoAddControllerile vastavalt ng-app direktiivi ja ng-kontrolleri abil.
    

    3. 

  3. 

    {{c}}
    

    Kuna viidame ülalmainitud moodulile ja kontrollerile, saame avaldise kaudu viidata muutujale $ scope.c. Avaldis tuleneb kontrolleri 'DemoAddController' kontrolleris läbi viidud 2 reguleerimisala muutuja a ja b lisamisest.
    

    Samamoodi teeme lahutamisfunktsiooni puhul.
    

    4. 



Samm 3) Looge oma peamised rakendusfailid. Loome faili nimega "ApplicationSubtraction.html" ja lisage allolev kood


Addition
Subtraction :{{d}}


Pange tähele ülaltoodud koodi põhipunktid


    

  1. 

    

    Viidame oma põhirakenduse failis failile Utilities.js. See võimaldab meil viidata mis tahes selles failis määratletud moodulitele.
    

    2. 

  2. 

    

    Me pääseme juurde moodulitele SubtractionApp ja DemoSubtractController vastavalt ng-app direktiivi ja ng-kontrolleri abil.
    

    3. 

  3. 

    {{d}}
    

    Kuna viidame ülalmainitud moodulile ja kontrollerile, saame avaldise kaudu viidata muutujale $ scope.d. Avaldis tuleneb kontrolleri 'DemoSubtractController' kontrolleris läbi viidud 2 reguleerimisala muutuja a ja b lahutamisest.
    

    4. 



Kokkuvõte


    

  • Ilma AngularJS-moodulite kasutamiseta hakkab kontrolleritel olema globaalne ulatus, mis toob kaasa halva programmeerimistava.
    • 

  • Mooduleid kasutatakse äriloogika eraldamiseks. Nende erinevate moodulite vahel saab loogiliselt eraldada mitu moodulit.
    • 

  • Igal moodulil AngularJS võib olla määratletud ja määratud oma kontrollerite komplekt.
    • 

  • Moodulite ja kontrollerite määratlemisel määratletakse need tavaliselt eraldi JavaScripti failides. Seejärel viidatakse nendele JavaScripti failidele põhirakenduses.
    •