AngularJS moduli
Što je AngularJS modul?
Modul definira funkcionalnost aplikacije koja se primjenjuje na cijelu HTML stranicu pomoću direktive ng-app. Definira funkcionalnost, kao što su usluge, direktive i filtri, na način koji olakšava ponovnu upotrebu u različitim aplikacijama.
U svim našim ranijim tutorijalima 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.
Kako stvoriti modul u AngularJS
Prije nego počnemo s onim što je modul, pogledajmo primjer AngularJS aplikacije bez modula i zatim shvatimo potrebu za modulima 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 pod nazivom "DemoController" koja će djelovati kao kontroler unutar naše aplikacije.
U ovom kontroleru samo izvodimo zbrajanje 2 varijable a i b i dodjeljujemo dodavanje tih varijabli novoj varijabli, c, i dodjeljujemo je natrag objektu opsega.
Kreirajmo sada naš glavni Sample.html, koji će biti naša glavna aplikacija. Umetnimo donji isječak koda u našu HTML stranicu.
<body ng-app=""> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
U gornjem kodu uključujemo naš DemoController, a zatim pozivamo vrijednost varijable $scope.c putem izraza.
Ali primijetite da naša direktiva ng-app ima praznu vrijednost.
- To u osnovi znači da se svim kontrolerima koji se pozivaju unutar konteksta direktive ng-app može pristupiti globalno. Ne postoji granica koja razdvaja više kontrolera jedne od drugih.
- Sada je u modernom programiranju loša praksa imati upravljače koji nisu priključeni ni na jedan modul i učiniti ih globalno dostupnima. Mora postojati neka logična granica definirana za kontrolere.
I tu na scenu stupaju moduli. Moduli se koriste za stvaranje tog odvajanja granica i pomažu u odvajanju kontrolera na temelju funkcionalnosti.
Promijenimo gornji kod da implementiramo module i pripojimo naš kontroler ovom modulu
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',[]);
Posebno stvaramo AngularJS modul pod nazivom '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 obavlja ulogu dodavanja 2 objekta opsega. Dakle, možemo imati jedan modul s logičkom granicom koja kaže da će ovaj modul obavljati samo funkcionalnost matematičkih izračuna za aplikaciju.
-
sampleApp.controller('DemoController', function($scope)
Sada spajamo kontroler na naš AngularJS modul “SampleApp”. To znači da ako ne navedemo modul 'sampleApp' u našem glavnom HTML kodu, nećemo moći navesti funkcionalnost našeg kontrolera.
Naš glavni HTML kôd neće izgledati kao što je prikazano u nastavku
<body ng-app="'sampleApp'"> <div ng-controller="DemoController"> <h3> Guru99 Global Event</h3> {{c}}
Zabilježimo ključne razlike u gore napisanom kodu i našem prethodnom kodu
<body ng-app="'sampleApp'">
U našoj oznaci tijela,
- Umjesto prazne direktive ng-app, sada nazivamo modul sampleApp.
- Pozivanjem ovog aplikacijskog modula sada možemo pristupiti kontroleru 'DemoController' i funkcionalnosti prisutne u demo kontroleru.
Moduli i kontroleri u AngularJS
In Kutni.JS, obrazac koji se koristi za razvoj modernih web aplikacija je stvaranje višestrukih modula i kontrolera za logično odvajanje višestrukih razina funkcionalnosti.
Moduli se obično pohranjuju zasebno Javascript datoteke, koje bi se razlikovale od glavne aplikacijske datoteke.
Pogledajmo primjer kako se to može postići.
U donjem primjeru,
- Napravit ćemo datoteku pod nazivom Utilities.js koja će sadržavati 2 modula, jedan za izvođenje funkcije zbrajanja, a drugi za izvođenje funkcije oduzimanja.
- Zatim ćemo stvoriti 2 zasebne aplikacijske datoteke i pristupiti Utility datoteci iz svake aplikacijske datoteke.
- U jednoj aplikacijskoj datoteci ćemo pristupiti modulu za zbrajanje, au drugoj ćemo pristupiti 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 u gore napisanom kodu
-
var AdditionApp = angular.module('AdditionApp',[]); var SubractionApp = angular.module('SubtractionApp',[]);
Stvorena su 2 zasebna kutna modula, jedan koji je dobio naziv 'AdditionApp', a drugi je dobio naziv 'SubtractionApp'.
-
AdditionApp.controller('DemoAddController', function($scope) SubractionApp.controller('DemoSubtractController', function($scope)
Postoje 2 zasebna kontrolera definirana za svaki modul, jedan se zove DemoAddController, a drugi je DemoSubtractController. Svaki kontroler ima zasebnu logiku za zbrajanje i oduzimanje brojeva.
Korak 2) Izradite svoje glavne aplikacijske datoteke. Kreirajmo datoteku pod nazivom ApplicationAddition.html i dodamo donji kod
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "AdditionApp" ng-controller="DemoAddController"> Addition :{{c}} </div> </body> </html>
Zabilježimo ključne točke u gore napisanom kodu
-
<script src="/lib/Utilities.js"></script>
Referenciramo našu datoteku Utilities.js u našoj glavnoj aplikacijskoj datoteci. To nam omogućuje referenciranje bilo kojeg AngularJS modula definiranog u ovoj datoteci.
-
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
Modulu 'AdditionApp' i DemoAddControlleru pristupamo pomoću direktive ng-app i ng-kontroler odnosno.
-
{{c}}
Budući da se pozivamo na gore spomenuti modul i kontroler, možemo referencirati varijablu $scope.c putem izraza. Izraz će biti rezultat dodavanja 2 varijable opsega a i b koje je izvršeno u kontroleru 'DemoAddController'
Na isti način ćemo učiniti za funkciju oduzimanja.
Korak 3) Izradite svoje glavne aplikacijske datoteke. Kreirajmo datoteku pod nazivom “ApplicationSubtraction.html” i dodajmo donji kod
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Addition</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="lib/utilities.js"></script> </head> <body> <div ng-app = "SubtractionApp" ng-controller="DemoSubtractController"> Subtraction :{{d}} </div> </body> </html>
Zabilježimo ključne točke u gore napisanom kodu
-
<script src="/lib/Utilities.js"></script>
Referenciramo našu datoteku Utilities.js u našoj glavnoj aplikacijskoj datoteci. To nam omogućuje referenciranje bilo kojeg modula definiranog u ovoj datoteci.
-
<div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">
Modulu 'SubtractionApp' i DemoSubtractControlleru pristupamo pomoću direktive ng-app odnosno ng-controller.
-
{{d}}
Budući da se pozivamo na gore spomenuti modul i kontroler, možemo referencirati varijablu $scope.d putem izraza. Izraz će biti rezultat oduzimanja 2 varijable opsega a i b koje je provedeno u 'DemoSubtractController' kontrolor
rezime
- Bez upotrebe AngularJS modula, 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 biti logički odvojeni unutar ovih različitih modula.
- Svaki AngularJS modul može imati definiran i dodijeljen vlastiti skup kontrolera.
- Kod definiranja modula i kontrolera, oni se obično definiraju zasebno JavaScript datoteke. ove JavaDatoteke skripti se tada upućuju u glavnu aplikacijsku datoteku.