Što je modul AngularJS?
Modul definira funkcionalnost aplikacije koja se primjenjuje na cijelu HTML stranicu pomoću ng-app direktive. Definira funkcionalnost, poput usluga, direktiva i filtara, na način koji olakšava ponovnu upotrebu u različitim aplikacijama.
U svim našim ranijim vodičima primijetili biste direktivu ng-app koja se koristi za definiranje vaše glavne Angular aplikacije. Ovo je jedan od ključnih koncepata modula u Angular.JS.
U ovom vodiču naučit ćete-
- Kako stvoriti modul u AngularJS
- Moduli i kontroleri
Kako stvoriti modul u AngularJS
Prije nego što započnemo s onim što je modul, pogledajmo primjer aplikacije AngularJS bez modula, a zatim shvatimo potrebu postojanja modula u vašoj aplikaciji.
Razmotrimo stvaranje datoteke pod nazivom "DemoController.js" i dodavanje donjeg koda u datoteku
Function Democontroller($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});
U gornjem kodu stvorili smo funkciju nazvanu "DemoController" koja će djelovati kao kontroler unutar naše aplikacije.
U ovom kontroloru upravo izvodimo dodavanje 2 varijable a i b i dodijeljujemo dodavanje tih varijabli novoj varijabli c i vraćamo je natrag u objekt opsega.
Sada kreirajmo naš glavni Sample.html, koji će biti naša glavna aplikacija. Umetnimo donji isječak koda u našu HTML stranicu.
Globalni događaj Guru99
{{c}}U gornji kod uključujemo DemoController, a zatim putem izraza pozivamo vrijednost varijable $ scope.c.
No, primijetite našu direktivu ng-app, ona ima praznu vrijednost.
- To u osnovi znači da se svim kontrolerima koji su pozvani u kontekstu direktive ng-app može pristupiti globalno. Ne postoji granica koja razdvaja više kontrolera jedan od drugog.
- Sada je u modernom programiranju loša praksa ako kontrolori nisu priključeni ni na jedan modul i čine ih globalno dostupnima. Mora postojati neka logička granica za kontrolere.
I tu moduli dolaze. Moduli se koriste za stvaranje razdvajanja granica i pomoć u razdvajanju kontrolera na temelju funkcionalnosti.
Promijenimo gornji kod za implementaciju modula i priključimo naš kontroler na ovaj modul
var sampleApp = angular.module('sampleApp',[]);sampleApp.controller('DemoController', function($scope) {$scope.a=1;$scope.b=2;$scope.c=$scope.b + $scope.a;});Zabilježimo ključne razlike u gore napisanom kodu
var sampleApp = angular.module('sampleApp',[]);Mi posebno izrađujemo AngularJS modul nazvan 'sampleApp'. To će oblikovati logičnu granicu za funkcionalnost koju će ovaj modul sadržavati. Dakle, u našem gornjem primjeru imamo modul koji sadrži kontroler koji izvršava ulogu dodavanja 2 objekta opsega. Dakle, možemo imati jedan modul s logičkom granicom koji kaže da će ovaj modul izvoditi samo funkcionalnost matematičkih izračuna za aplikaciju.
sampleApp.controller('DemoController', function($scope)Sada priključujemo kontroler na naš modul AngularJS "SampleApp". To znači da ako u našem glavnom HTML kodu ne navedemo modul 'sampleApp', nećemo se moći pozivati na funkcionalnost našeg kontrolera.
Naš glavni HTML kôd neće izgledati kao što je prikazano u nastavku
Guru99 Global Event
{{c}}Zabilježimo ključne razlike u gore napisanom kodu i našem prethodnom kodu
U našoj oznaci tijela,
- Umjesto da imamo praznu direktivu ng-app, sada pozivamo modul sampleApp.
- Pozivanjem ovog aplikacijskog modula sada možemo pristupiti upravljaču 'DemoController' i funkcijama prisutnim u demo kontroleru.
Moduli i kontroleri
U Angular.JS, obrazac koji se koristi za razvoj suvremenih web aplikacija je stvaranje više modula i kontrolera koji logički odvajaju više razina funkcionalnosti.
Moduli će se obično pohraniti u zasebne Javascript datoteke, koje bi se razlikovale od glavne datoteke aplikacije.
Pogledajmo primjer kako se to može postići.
U donjem primjeru,
- Stvorit ćemo datoteku pod nazivom Utilities.js koja će sadržavati 2 modula, jedan za izvođenje funkcionalnosti zbrajanja, a drugi za izvođenje funkcije oduzimanja.
- Zatim ćemo stvoriti 2 zasebne datoteke aplikacije i pristupiti datoteci uslužnog programa iz svake datoteke aplikacije.
- U jednoj aplikacijskoj datoteci pristupit ćemo modulu za zbrajanje, a u drugoj modulu za oduzimanje.
Korak 1) Definirajte kod za više modula i kontrolera.
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;});Zabilježimo ključne točke gore napisanog koda
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Stvorena su 2 odvojena kutna modula, jedan kojem je dodijeljeno ime 'AdditionApp', a drugom 'SubtractionApp'.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Za svaki modul definirana su 2 odvojena kontrolera, jedan se naziva DemoAddController, a drugi DemoSubtractController. Svaki kontroler ima zasebnu logiku za zbrajanje i oduzimanje brojeva.
Korak 2) Stvorite glavne datoteke aplikacije. Stvorimo datoteku nazvanu ApplicationAddition.html i dodajte donji kod
Addition Addition :{{c}}Zabilježimo ključne točke gore napisanog koda
Navodimo datoteku Utilities.js u našoj glavnoj datoteci aplikacije. To nam omogućuje referencu na bilo koji AngularJS modul definiran u ovoj datoteci.
Pristupamo modulu "AdditionApp" i DemoAddController pomoću direktive ng-app i ng-kontrolera.
{{c}}Budući da upućujemo na gore spomenuti modul i kontroler, u mogućnosti smo putem izraza uputiti na varijablu $ scope.c Izraz će biti rezultat dodavanja 2 varijable opsega a i b što je izvedeno u kontroleru 'DemoAddController'
Isto kao što ćemo učiniti za funkciju oduzimanja.
Korak 3) Stvorite glavne datoteke programa. Stvorimo datoteku pod nazivom "ApplicationSubtraction.html" i dodajte donji kod
Addition Subtraction :{{d}}Zabilježimo ključne točke gore napisanog koda
Navodimo datoteku Utilities.js u našoj glavnoj datoteci aplikacije. To nam omogućuje referencu na sve module definirane u ovoj datoteci.
Pristupamo modulu „SubtractionApp“ i „DemoSubtractController“ pomoću direktive ng-app, odnosno ng-kontrolera.
{{d}}Budući da upućujemo na gore spomenuti modul i kontroler, u mogućnosti smo referencirati varijablu $ scope.d putem izraza. Izraz će biti rezultat oduzimanja 2 varijable opsega a i b koje je izvedeno u upravljaču 'DemoSubtractController'
Sažetak
- Bez upotrebe modula AngularJS, kontroleri počinju imati globalni opseg što dovodi do loše prakse programiranja.
- Moduli se koriste za odvajanje poslovne logike. Može se stvoriti više modula koji će se logički odvojiti unutar ovih različitih modula.
- Svaki modul AngularJS može imati svoj vlastiti set kontrolera koji mu je definiran i dodijeljen.
- Kad definiraju module i kontrolere, oni se obično definiraju u odvojenim JavaScript datotekama. Te se JavaScript datoteke zatim upućuju u glavnu datoteku aplikacije.