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, 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

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

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

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

  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 ">

    Modulu 'SubtractionApp' i DemoSubtractControlleru pristupamo pomoću direktive ng-app odnosno ng-controller.

  3. {{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.

Sažmite ovu objavu uz: