„AngularJS“ modulio pamoka su pavyzdžiu

Turinys:

Anonim

Kas yra „AngularJS“ modulis?

Modulis apibrėžia programos funkciją, kuri taikoma visam HTML puslapiui naudojant „ng-app“ direktyvą. Tai apibrėžia funkcionalumą, pvz., Paslaugas, direktyvas ir filtrus, taip, kad būtų lengva jį pakartotinai naudoti skirtingose ​​programose.

Visose ankstesnėse mūsų mokymo programose būtumėte pastebėję „ng-app“ direktyvą, naudojamą apibrėžiant pagrindinę „Angular“ programą. Tai yra viena iš pagrindinių „Angular.JS“ modulių sąvokų.

Šioje pamokoje sužinosite

  • Kaip sukurti „AngularJS“ modulį
  • Moduliai ir valdikliai

Kaip sukurti „AngularJS“ modulį

Prieš pradėdami nuo to, kas yra modulis, pažvelkime į „AngularJS“ programos be modulio pavyzdį ir supraskime, kad programoje reikia turėti modulių.

Apsvarstykime galimybę sukurti failą pavadinimu „DemoController.js“ ir pridėti žemiau esantį kodą į failą

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

Ankstesniame kode mes sukūrėme funkciją, vadinamą „DemoController“, kuri veiks kaip valdiklis mūsų programoje.

Šiame valdiklyje mes tiesiog atliekame 2 kintamųjų a ir b pridėjimą ir priskiriame šių kintamųjų pridėjimą naujam kintamajam c ir priskiriame jį atgal srities objektui.

Dabar sukurkime pagrindinį „Sample.html“, kuris bus pagrindinė mūsų programa. Įterpkime žemiau pateiktą kodo fragmentą į savo HTML puslapį.



„Guru99“ pasaulinis įvykis

{{c}}

Pirmiau pateiktame kode įtraukiame savo „DemoController“ ir tada per išraišką kviečiame kintamojo $ scope.c vertę.

Tačiau atkreipkite dėmesį į mūsų „ng-app“ direktyvą, ji turi tuščią vertę.

  • Iš esmės tai reiškia, kad visi valdikliai, iškviesti pagal „ng-app“ direktyvą, gali būti prieinami visame pasaulyje. Nėra ribos, skiriančios kelis valdiklius viena nuo kitos.
  • Dabar programuojant tai yra bloga praktika, kai valdikliai nėra prijungti prie jokių modulių ir jie tampa prieinami visame pasaulyje. Valdikliams turi būti apibrėžta tam tikra loginė riba.

Čia atsiranda moduliai. Moduliai naudojami tam, kad būtų sukurtas tas ribų atskyrimas ir padėtų atskirti valdiklius pagal funkcionalumą.

Pakeiskime aukščiau esantį kodą, kad įdiegtume modulius, ir prie šio modulio prijunkime valdiklį

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

Atkreipkime dėmesį į pagrindinius anksčiau parašyto kodo skirtumus

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

    Mes specialiai kuriame „AngularJS“ modulį, pavadintą „sampleApp“. Tai suformuos loginę funkcijų, kurias turės šis modulis, ribą. Taigi aukščiau pateiktame pavyzdyje turime modulį, kuriame yra valdiklis, kuris atlieka 2 srities objektų pridėjimo vaidmenį. Taigi galime turėti vieną modulį su logine riba, kuris sako, kad šis modulis atliks tik programos matematinių skaičiavimų funkcionalumą.

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

    Dabar mes prijungiame valdiklį prie savo „AngularJS“ modulio „SampleApp“. Tai reiškia, kad jei pagrindiniame HTML kode nenurodysime modulio „sampleApp“, negalėsime nurodyti savo valdiklio funkcionalumo.

Pagrindinis HTML kodas neatrodys taip, kaip parodyta žemiau



Guru99 Global Event

{{c}}

Atkreipkime dėmesį į pagrindinius aukščiau parašyto kodo ir ankstesnio mūsų kodo skirtumus



Mūsų kūno žymoje


    

  • Užuot turėję tuščią „ng-app“ direktyvą, dabar mes vadiname modulį „sampleApp“.
    • 

  • Paskambinę į šį programos modulį, dabar galime pasiekti valdiklį „DemoController“ ir demonstraciniame valdiklyje esančias funkcijas.
    • 




Moduliai ir valdikliai


„Angular.JS“ modelis, naudojamas kuriant šiuolaikines žiniatinklio programas, yra sukurti kelis modulius ir valdiklius, kad logiškai būtų atskirti keli funkcionalumo lygiai.


Paprastai moduliai bus saugomi atskiruose „Javascript“ failuose, kurie skirtųsi nuo pagrindinio programos failo.


Pažvelkime į pavyzdį, kaip tai galima pasiekti.





Toliau pateiktame pavyzdyje


    

  • Sukursime failą pavadinimu Utilities.js, kuriame bus 2 moduliai, vienas skirtas pridėjimo funkcijoms atlikti, kitas - atimties funkcijoms atlikti.
    • 

  • Tada mes sukursime 2 atskirus programos failus ir pasieksime naudingumo failą iš kiekvieno programos failo.
    • 

  • Viename programos faile pasieksime modulį, kad galėtumėte pridėti, o kitame - prie modulio, kad galėtume juos atimti.
    • 



1 žingsnis. Apibrėžkite kelių modulių ir valdiklių kodą.


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


Pažymėkime pagrindinius taškus aukščiau parašytame kode


    

  1. 

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

    Sukurtas 2 atskiri kampiniai moduliai, vienas, kuriam suteiktas pavadinimas „AdditionApp“, o antrasis - „SubtractionApp“.
    

    2. 

  2. 

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

    Kiekvienam moduliui yra apibrėžti 2 atskiri valdikliai, vienas vadinamas „DemoAddController“, o kitas yra „DemoSubtractController“. Kiekvienas valdiklis turi atskirą logiką skaičiams pridėti ir atimti.
    


    

    3. 



2 žingsnis) Sukurkite pagrindinius programos failus. Sukurkime failą pavadinimu ApplicationAddition.html ir pridėkime žemiau esantį kodą


Addition
Addition :{{c}}


Pažymėkime pagrindinius taškus aukščiau parašytame kode


    

  1. 

    

    Pagrindiniame programos faile nurodome failą „Utilities.js“. Tai leidžia mums remtis bet kokiais šiame faile apibrėžtais „AngularJS“ moduliais.
    

    2. 

  2. 

    

    Mes prieiname prie „AdditionApp“ modulio ir „DemoAddController“ naudodami atitinkamai „ng-app“ direktyvą ir „ng-controller“.
    

    3. 

  3. 

    {{c}}
    

    Kadangi mes remiamės aukščiau minėtu moduliu ir valdikliu, per išraišką galime nurodyti kintamąjį $ scope.c. Išraiška bus pridėta iš 2 apimties kintamųjų a ir b, kurie buvo atlikti valdiklyje „DemoAddController“
    

    Tą patį padarysime ir atimties funkcijai.
    

    4. 



3 žingsnis) Sukurkite pagrindinius programos failus. Sukurkime failą pavadinimu „ApplicationSubtraction.html“ ir pridėkime žemiau esantį kodą


Addition
Subtraction :{{d}}


Pažymėkime pagrindinius taškus aukščiau parašytame kode


    

  1. 

    

    Pagrindiniame programos faile nurodome failą „Utilities.js“. Tai leidžia mums nurodyti bet kuriuos šiame faile apibrėžtus modulius.
    

    2. 

  2. 

    

    Mes pasiekiame „SubtractionApp“ modulį ir „DemoSubtractController“ naudodami atitinkamai „ng-app“ direktyvą ir „ng-controller“.
    

    3. 

  3. 

    {{d}}
    

    Kadangi mes remiamės aukščiau minėtu moduliu ir valdikliu, per išraišką galime nurodyti kintamąjį $ scope.d Išraiška bus gautas atėmus 2 taikymo srities kintamuosius a ir b, kurie buvo atlikti valdiklyje „DemoSubtractController“
    

    4. 



Santrauka


    

  • Nenaudojant „AngularJS“ modulių, valdikliai pradeda veikti visame pasaulyje, o tai lemia blogą programavimo praktiką.
    • 

  • Moduliai naudojami atskirti verslo logiką. Galima sukurti kelis modulius, kad šie skirtingi moduliai būtų logiškai atskirti.
    • 

  • Kiekvienas „AngularJS“ modulis gali turėti savo apibrėžtą ir priskirtą valdiklių rinkinį.
    • 

  • Apibrėžiant modulius ir valdiklius, jie paprastai apibrėžiami atskiruose „JavaScript“ failuose. Šie „JavaScript“ failai nurodomi pagrindiniame programos faile.
    •