Vadnica modula AngularJS s primerom

Kazalo:

Anonim

Kaj je modul AngularJS?

Modul definira funkcionalnost aplikacije, ki se uporablja za celotno stran HTML z uporabo direktive ng-app. Določa funkcionalnost, kot so storitve, direktive in filtri, na način, ki olajša ponovno uporabo v različnih aplikacijah.

V vseh naših prejšnjih vajah bi opazili direktivo ng-app, ki se uporablja za definiranje vaše glavne aplikacije Angular. To je eden ključnih konceptov modulov v programu Angular.JS.

V tej vadnici boste izvedeli-

  • Kako ustvariti modul v AngularJS
  • Moduli in krmilniki

Kako ustvariti modul v AngularJS

Preden začnemo z modulom, si oglejmo primer aplikacije AngularJS brez modula in nato razumemo potrebo po modulih v vaši aplikaciji.

Razmislimo o ustvarjanju datoteke z imenom "DemoController.js" in v datoteko dodamo spodnjo kodo

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

V zgornji kodi smo ustvarili funkcijo, imenovano "DemoController", ki bo v naši aplikaciji delovala kot krmilnik.

V tem krmilniku samo izvajamo dodajanje dveh spremenljivk a in b ter dodeljujemo dodajanje teh spremenljivk novi spremenljivki c in jo dodeljujemo nazaj predmetu obsega.

Zdaj pa ustvarimo naš glavni Sample.html, ki bo naša glavna aplikacija. Vstavimo spodnji delček kode na našo stran HTML.



Globalni dogodek Guru99

{{c}}

V zgornjo kodo smo vključili naš DemoController in nato prek izraza priklicali vrednost spremenljivke $ scope.c.

Toda upoštevajte našo direktivo ng-app, saj ima prazno vrednost.

  • To v bistvu pomeni, da je do vseh krmilnikov, ki so poklicani v okviru direktive ng-app, mogoče dostopati globalno. Nobena meja ne bi ločevala več krmilnikov med seboj.
  • Zdaj je v sodobnem programiranju slaba praksa, če krmilniki niso pritrjeni na noben modul in so globalno dostopni. Za krmilnike mora biti določena neka logična meja.

In tu nastopijo moduli. Moduli se uporabljajo za ustvarjanje tega ločevanja meja in pomoč pri ločevanju krmilnikov na podlagi funkcionalnosti.

Spremenimo zgornjo kodo za izvajanje modulov in na ta modul pritrdimo naš krmilnik

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

Upoštevajmo ključne razlike v zgoraj napisani kodi

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

    Posebej ustvarjamo modul AngularJS, imenovan 'sampleApp'. To bo tvorilo logično mejo za funkcionalnost, ki jo bo vseboval ta modul. Torej v našem zgornjem primeru imamo modul, ki vsebuje krmilnik, ki opravlja vlogo dodajanja dveh predmetov obsega. Tako imamo lahko en modul z logično mejo, ki pravi, da bo ta modul opravljal le funkcije matematičnih izračunov za aplikacijo.

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

    Zdaj krmilnik pritrdimo na naš modul AngularJS "SampleApp". To pomeni, da če se v glavni kodi HTML ne sklicujemo na modul „sampleApp“, se ne bomo mogli sklicevati na funkcionalnost našega krmilnika.

Naša glavna koda HTML ne bo videti tako, kot je prikazano spodaj



Guru99 Global Event

{{c}}

Upoštevajmo ključne razlike v zgoraj napisani kodi in prejšnji kodi



V naši telesni oznaki,


    

  • Namesto da imamo prazno direktivo ng-app, zdaj kličemo modul sampleApp.
    • 

  • S klicem tega aplikacijskega modula lahko zdaj dostopamo do krmilnika 'DemoController' in do funkcij, ki so na voljo v predstavitvenem krmilniku.
    • 




Moduli in krmilniki


V Angular.JS je vzorec, ki se uporablja za razvoj sodobnih spletnih aplikacij, ustvarjanje več modulov in krmilnikov za logično ločevanje več ravni funkcionalnosti.


Moduli se običajno shranijo v ločenih datotekah Javascript, ki bi se razlikovale od glavne datoteke aplikacije.


Oglejmo si primer, kako je to mogoče doseči.


V spodnjem primeru


    

  • Ustvarili bomo datoteko z imenom Utilities.js, ki bo vsebovala 2 modula, enega za izvajanje funkcije seštevanja in drugega za izvajanje funkcije odštevanja.
    • 

  • Nato bomo ustvarili dve ločeni datoteki aplikacije in iz vsake datoteke aplikacije dostopali do datoteke Utility.
    • 

  • V eni prijavni datoteki bomo dostopali do modula za dodajanje, v drugi pa do modula za odštevanje.
    • 



Korak 1) Določite kodo za več modulov in krmilnikov.





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


Upoštevajmo ključne točke zgoraj napisane kode


    

  1. 

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

    Ustvarjena sta dva ločena kotna modula, eden z imenom "AdditionApp", drugi pa "SubtractionApp".
    

    2. 

  2. 

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

    Za vsak modul sta definirana 2 ločena krmilnika, eden se imenuje DemoAddController, drugi pa DemoSubtractController. Vsak krmilnik ima ločeno logiko za seštevanje in odštevanje števil.
    

    3. 



2. korak) Ustvarite svoje glavne aplikacije. Ustvarimo datoteko z imenom ApplicationAddition.html in dodamo spodnjo kodo


Addition
Addition :{{c}}


Upoštevajmo ključne točke zgoraj napisane kode





    

  1. 

    

    V naši glavni aplikacijski datoteki se sklicujemo na našo datoteko Utilities.js. To nam omogoča sklicevanje na katere koli module AngularJS, definirane v tej datoteki.
    

    2. 

  2. 

    

    Do modula 'AdditionApp' in DemoAddController dostopamo s pomočjo direktive ng-app oziroma ng-controller.
    

    3. 

  3. 

    {{c}}
    

    Ker se sklicujemo na zgoraj omenjeni modul in krmilnik, se lahko prek izraza sklicujemo na spremenljivko $ scope.c. Izraz bo rezultat dodajanja dveh spremenljivk obsega a in b, ki je bila izvedena v krmilniku 'DemoAddController'
    

    Enako bomo storili za funkcijo odštevanja.
    

    4. 



3. korak) Ustvarite svoje glavne aplikacije. Ustvarimo datoteko z imenom "ApplicationSubtraction.html" in dodajte spodnjo kodo


Addition
Subtraction :{{d}}


Upoštevajmo ključne točke zgoraj napisane kode


    

  1. 

    

    V naši glavni aplikacijski datoteki se sklicujemo na našo datoteko Utilities.js. To nam omogoča sklicevanje na katere koli module, definirane v tej datoteki.
    

    2. 

  2. 

    

    Do modula SubtractionApp in DemoSubtractController dostopamo z uporabo direktive ng-app oziroma krmilnika ng.
    

    3. 

  3. 

    {{d}}
    

    Ker se sklicujemo na zgoraj omenjeni modul in krmilnik, se lahko prek izraza sklicujemo na spremenljivko $ scope.d. Izraz bo rezultat odštevanja dveh spremenljivk obsega a in b, ki je bilo izvedeno v krmilniku "DemoSubtractController"
    

    4. 



Povzetek


    

  • Brez uporabe modulov AngularJS imajo krmilniki globalni obseg, kar vodi v slabe prakse programiranja.
    • 

  • Moduli se uporabljajo za ločevanje poslovne logike. Ustvari se lahko več modulov, da se znotraj teh različnih modulov logično ločijo.
    • 

  • Vsak modul AngularJS ima lahko svoj nabor krmilnikov, ki mu je določen in dodeljen.
    • 

  • Pri definiranju modulov in krmilnikov so običajno definirani v ločenih datotekah JavaScript. Nato se na te datoteke JavaScript sklicuje v glavni datoteki aplikacije.
    •