AngularJS moduli

By: James Hartman James Hartman
Hours Aลพurirano

ล 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

  1. 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.

  2. 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, uzorak koji se koristi za razvojping Suลกtina modernih web aplikacija je stvaranje viลกe modula i kontrolera za logiฤko odvajanje viลกe 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 izvrลกavanje funkcionalnosti zbrajanja i drugi za izvrลกavanje funkcionalnosti podraฤuna.traction.
  • Zatim ฤ‡emo stvoriti 2 zasebne aplikacijske datoteke i pristupiti Utility datoteci iz svake aplikacijske datoteke.
  • U jednoj aplikacijskoj datoteci pristupit ฤ‡emo modulu za zbrajanje, a u drugoj ฤ‡emo pristupiti modulu za pod-naloge.traction.

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

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

    Kreirana su dva odvojena Angular modula, jedan nazvan 'AdditionApp', a drugi nazvan 'Sub'.tractionApp'.

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

    Za svaki modul definirana su 2 odvojena kontrolera, jedan se zove DemoAddController, a drugi DemoSub.tractController. Svaki kontroler ima zasebnu logiku za zbrajanje i podraฤunavanjetraccija 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

  1. <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.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    Modulu 'AdditionApp' i DemoAddControlleru pristupamo pomoฤ‡u direktive ng-app i ng-kontroler odnosno.

  3. {{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 i za subtracciona funkcija.

Korak 3) Izradite glavne datoteke aplikacije. Izradimo datoteku pod nazivom โ€žApplicationSubtraction.htmlโ€ i dodajte 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

  1. <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.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    Pristupamo 'Sub'tractionApp modul i DemoSubtractController koriลกtenjem direktive ng-app i ng-controller.

  3. {{d}}

    Buduฤ‡i da referenciramo gore spomenuti modul i kontroler, moลพemo referencirati varijablu $scope.d putem izraza. Izraz ฤ‡e biti rezultat podnaredbetraccija dviju varijabli opsega a i b koja je provedena u DemoSubtracKontroler 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.

Saลพmite ovu objavu uz: