AngularJS moduļa apmācība ar piemēru

Satura rādītājs:

Anonim

Kas ir AngularJS modulis?

Modulis nosaka lietojumprogrammu funkcionalitāti, kas tiek lietota visai HTML lapai, izmantojot direktīvu ng-app. Tas definē funkcionalitāti, piemēram, pakalpojumus, direktīvas un filtrus, tādā veidā, ka to ir viegli atkārtoti izmantot dažādās lietojumprogrammās.

Visās mūsu agrākajās apmācībās jūs būtu ievērojuši direktīvu ng-app, kas tika izmantota, lai definētu galveno Angular lietojumprogrammu. Šis ir viens no Angular.JS moduļu galvenajiem jēdzieniem.

Šajā apmācībā jūs uzzināsiet

  • Kā izveidot moduli AngularJS
  • Moduļi un kontrolieri

Kā izveidot moduli AngularJS

Pirms sākam ar to, kas ir modulis, apskatīsim AngularJS lietojumprogrammas bez moduļa piemēru un pēc tam sapratīsim, ka lietojumprogrammā ir jābūt moduļiem.

Apsvērsim iespēju izveidot failu ar nosaukumu "DemoController.js" un pievienot zemāk esošo kodu failam

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

Iepriekš minētajā kodā mēs esam izveidojuši funkciju ar nosaukumu "DemoController", kas mūsu lietojumprogrammā darbosies kā kontrolieris.

Šajā kontrolierī mēs vienkārši veicam 2 mainīgo a un b pievienošanu un piešķiram šo mainīgo pievienošanu jaunam mainīgajam c un piešķiram to atpakaļ darbības objektam.

Tagad izveidosim mūsu galveno Sample.html, kas būs mūsu galvenā lietojumprogramma. Ievietosim zemāk esošo koda fragmentu mūsu HTML lapā.



Guru99 globālais notikums

{{c}}

Iepriekš minētajā kodā mēs iekļaujam mūsu DemoController un pēc tam izsaucam mainīgā $ scope.c vērtību, izmantojot izteiksmi.

Bet ievērojiet mūsu ng-app direktīvu, tai ir tukša vērtība.

  • Tas būtībā nozīmē, ka visiem kontrolieriem, kas tiek izsaukti ng-app direktīvas kontekstā, var piekļūt visā pasaulē. Nav robežu, kas atdala vairākus kontrolierus viens no otra.
  • Mūsdienu programmēšanā tā ir slikta prakse, ka kontrolieri nav pievienoti nevienam modulim un padara tos pieejamus visā pasaulē. Kontrolieriem ir jābūt noteiktai loģiskai robežai.

Šeit ienāk moduļi. Moduļi tiek izmantoti, lai izveidotu robežu nošķiršanu un palīdzētu sadalīt kontrolierus, pamatojoties uz funkcionalitāti.

Mainīsim iepriekš minēto kodu, lai ieviestu moduļus, un pievienojiet mūsu kontrolleri šim modulim

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

Atzīmēsim galvenās atšķirības iepriekš rakstītajā kodā

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

    Mēs īpaši izveidojam AngularJS moduli ar nosaukumu “sampleApp”. Tas veidos loģisku robežu funkcionalitātei, kuru saturēs šis modulis. Tātad mūsu iepriekš minētajā piemērā mums ir modulis, kurā ir kontrolleris, kas veic 2 darbības objektu pievienošanas lomu. Tādējādi mums var būt viens modulis ar loģisku robežu, kas saka, ka šis modulis veiks tikai lietojumprogrammas matemātisko aprēķinu funkcionalitāti.

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

    Tagad mēs pievienojam kontrolieri mūsu AngularJS modulim "SampleApp". Tas nozīmē, ka, ja mēs savā HTML kodā nenorādīsim moduli “sampleApp”, mēs nevarēsim atsaukties uz mūsu kontroliera funkcionalitāti.

Mūsu galvenais HTML kods neizskatīsies tā, kā parādīts zemāk



Guru99 Global Event

{{c}}

Atzīmēsim galvenās atšķirības iepriekš rakstītajā kodā un mūsu iepriekšējā kodā



Mūsu ķermeņa tagā


    

  • Tā vietā, lai būtu tukša ng-app direktīva, mēs tagad izsaucam moduli sampleApp.
    • 

  • Zvanot uz šo lietojumprogrammas moduli, mēs tagad varam piekļūt kontrolierim 'DemoController' un demonstrācijas kontrolierī esošajai funkcionalitātei.
    • 




Moduļi un kontrolieri


Programmā Angular.JS mūsdienu tīmekļa lietojumprogrammu izstrādei izmantotais modelis ir vairāku moduļu un kontrolleru izveidošana, lai loģiski nošķirtu vairākus funkcionalitātes līmeņus.


Parasti moduļi tiks glabāti atsevišķos Javascript failos, kas atšķirsies no galvenā lietojumprogrammas faila.


Apskatīsim piemēru, kā to var panākt.





Tālāk sniegtajā piemērā


    

  • Mēs izveidosim failu ar nosaukumu Utilities.js, kurā būs 2 moduļi, no kuriem viens paredzēts saskaitīšanas un otrs atņemšanas funkcionalitātes veikšanai.
    • 

  • Pēc tam mēs izveidosim 2 atsevišķus lietojumprogrammas failus un piekļūsim utilītas failam no katra lietojumprogrammas faila.
    • 

  • Vienā lietojumprogrammas failā mēs piekļūsim modulim pievienošanai, bet otrā - modulim atņemšanai.
    • 



1. darbība. Definējiet kodu vairākiem moduļiem un kontrolieriem.


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


Atzīmēsim galvenos punktus iepriekš rakstītajā kodā


    

  1. 

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

    Ir izveidoti 2 atsevišķi leņķa moduļi, no kuriem vienam tiek piešķirts nosaukums 'AdditionApp', bet otrajam - nosaukums 'SubtractionApp'.
    

    2. 

  2. 

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

    Katram modulim ir definēti 2 atsevišķi kontrolieri, vienu sauc par DemoAddController, bet otru - DemoSubtractController. Katram kontrolierim ir atsevišķa loģika skaitļu saskaitīšanai un atņemšanai.
    


    

    3. 



2. solis. Izveidojiet galvenos lietojumprogrammas failus. Izveidosim failu ar nosaukumu ApplicationAddition.html un pievienosim zemāk esošo kodu


Addition
Addition :{{c}}


Atzīmēsim galvenos punktus iepriekš rakstītajā kodā


    

  1. 

    

    Mēs atsaucamies uz mūsu Utilities.js failu mūsu galvenajā lietojumprogrammas failā. Tas ļauj mums atsaukties uz visiem AngularJS moduļiem, kas definēti šajā failā.
    

    2. 

  2. 

    

    Mēs piekļūstam modulim AdditionApp un DemoAddController, izmantojot attiecīgi ng-app direktīvu un ng-controller.
    

    3. 

  3. 

    {{c}}
    

    Tā kā mēs atsaucamies uz iepriekš minēto moduli un kontrolieri, mēs varam atsaukties uz mainīgo $ scope.c, izmantojot izteiksmi. Izteiksme būs rezultāts 2 darbības jomas mainīgo a un b pievienošanai, kas tika veikts kontrolierī 'DemoAddController'
    

    Tieši tāpat mēs darīsim arī atņemšanas funkciju.
    

    4. 



3. solis. Izveidojiet galvenos lietojumprogrammas failus. Izveidosim failu ar nosaukumu "ApplicationSubtraction.html" un pievienojiet zemāk esošo kodu


Addition
Subtraction :{{d}}


Atzīmēsim galvenos punktus iepriekš rakstītajā kodā


    

  1. 

    

    Mēs atsaucamies uz mūsu Utilities.js failu mūsu galvenajā lietojumprogrammas failā. Tas ļauj mums atsaukties uz visiem šajā failā definētajiem moduļiem.
    

    2. 

  2. 

    

    Mēs piekļūstam modulim SubtractionApp un DemoSubtractController, izmantojot attiecīgi ng-app direktīvu un ng-controller.
    

    3. 

  3. 

    {{d}}
    

    Tā kā mēs atsaucamies uz iepriekš minēto moduli un kontrolieri, mēs ar atsauci varam atsaukties uz mainīgo $ scope.d. Izteiksme būs rezultāts 2 darbības jomas mainīgo a un b atņemšanai, kas tika veikts kontrolierī 'DemoSubtractController'
    

    4. 



Kopsavilkums


    

  • Neizmantojot AngularJS moduļus, kontrolieriem sākas globāla darbības joma, kas noved pie sliktas programmēšanas prakses.
    • 

  • Moduļi tiek izmantoti, lai nodalītu biznesa loģiku. Var izveidot vairākus moduļus, kas loģiski nošķirti dažādos moduļos.
    • 

  • Katram AngularJS modulim var būt definēts un piešķirts savs kontrolieru komplekts.
    • 

  • Definējot moduļus un kontrolierus, tie parasti tiek definēti atsevišķos JavaScript failos. Pēc tam uz šiem JavaScript failiem ir atsauce galvenajā lietojumprogrammas failā.
    •