AngularJS modulok

By: James Hartman James Hartman
Hours korszerลฑsรญtett

Mi az AngularJS modul?

Egy modul hatรกrozza meg az alkalmazรกsfunkciรณkat, amelyek az ng-app direktรญva segรญtsรฉgรฉvel a teljes HTML-oldalra vonatkoznak. Olyan funkciรณkat hatรกroz meg, mint a szolgรกltatรกsok, direktรญvรกk รฉs szลฑrล‘k, oly mรณdon, hogy kรถnnyen รบjrafelhasznรกlhatรณ legyen a kรผlรถnbรถzล‘ alkalmazรกsokban.

Minden korรกbbi oktatรณanyagunkban รฉszrevette volna az ng-app direktรญvรกt, amelyet a fล‘ Angular alkalmazรกs meghatรกrozรกsรกhoz hasznรกlnak. Ez az Angular.JS moduljainak egyik kulcsfogalma.

Modul lรฉtrehozรกsa AngularJS-ben

Mielล‘tt elkezdenรฉnk azzal, hogy mi a modul, nรฉzzรผnk meg egy pรฉldรกt egy modul nรฉlkรผli AngularJS alkalmazรกsra, majd รฉrtsรผk meg, hogy szรผksรฉg van modulokra az alkalmazรกsban.

Vegyรผk fontolรณra egy fรกjl lรฉtrehozรกsรกt โ€žDemoController.jsโ€ รฉs adja hozzรก az alรกbbi kรณdot a fรกjlhoz

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

A fenti kรณdban lรฉtrehoztunk egy โ€žDemoControllerโ€ nevลฑ funkciรณt, amely vezรฉrlล‘kรฉnt fog mลฑkรถdni az alkalmazรกsunkon belรผl.

Ebben a vezรฉrlล‘ben csak 2 a รฉs b vรกltozรณ hozzรกadรกsรกt hajtjuk vรฉgre, รฉs ezeknek a vรกltozรณknak a hozzรกadรกsรกt egy รบj vรกltozรณhoz, a c-hez rendeljรผk, รฉs visszarendeljรผk a hatรณkรถr objektumhoz.

Most hozzuk lรฉtre a fล‘ Sample.html-รผnket, amely a fล‘ alkalmazรกsunk lesz. Illesszรผk be az alรกbbi kรณdrรฉszletet HTML oldalunkba.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

A fenti kรณdba beletesszรผk a DemoControllerรผnket, majd egy kifejezรฉsen keresztรผl meghรญvjuk a $scope.c vรกltozรณ รฉrtรฉkรฉt.

De figyelje meg az ng-app direktรญvรกnkat, รผres รฉrtรฉke van.

  • Ez alapvetล‘en azt jelenti, hogy az ng-app direktรญva keretรฉben meghรญvott รถsszes vezรฉrlล‘ globรกlisan elรฉrhetล‘. Nincs hatรกr, amely elvรกlasztanรก a tรถbb vezรฉrlล‘t egymรกstรณl.
  • A mai programozรกsban ez egy rossz gyakorlat, ha a vezรฉrlล‘ket nem csatlakoztatjรกk egyetlen modulhoz sem, รฉs globรกlisan hozzรกfรฉrhetล‘vรฉ teszik ล‘ket. Meg kell hatรกrozni valamilyen logikai hatรกrt a vezรฉrlล‘k szรกmรกra.

ร‰s itt jรถnnek be a modulok. A modulok a hatรกrok szรฉtvรกlasztรกsรกra szolgรกlnak, รฉs segรญtik a vezรฉrlล‘k funkcionalitรกs alapjรกn tรถrtรฉnล‘ szรฉtvรกlasztรกsรกt.

Vรกltoztassuk meg a fenti kรณdot a modulok megvalรณsรญtรกsรกhoz, รฉs csatlakoztassuk a vezรฉrlล‘nket ehhez a modulhoz

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

Jegyezzรผk meg a fล‘bb kรผlรถnbsรฉgeket a fent leรญrt kรณdban

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

    Kifejezetten egy โ€žsampleAppโ€ nevลฑ AngularJS modult hozunk lรฉtre. Ez logikai hatรกrt fog kรฉpezni a modul รกltal tartalmazott funkciรณk szรกmรกra. Tehรกt a fenti pรฉldรกnkban van egy modulunk, amely egy vezรฉrlล‘t tartalmaz, amely 2 hatรณkรถrobjektum hozzรกadรกsรกnak szerepรฉt tรถlti be. Ennรฉlfogva rendelkezhetรผnk egy olyan modullal, amelynek logikai hatรกra azt mondja, hogy ez a modul csak az alkalmazรกs matematikai szรกmรญtรกsainak funkciรณjรกt fogja vรฉgrehajtani.

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

    Most csatlakoztatjuk a vezรฉrlล‘t az AngularJS โ€žSampleAppโ€ modulunkhoz. Ez azt jelenti, hogy ha nem hivatkozunk a โ€žsampleAppโ€ modulra a fล‘ HTML-kรณdunkban, akkor nem tudunk hivatkozni a vezรฉrlล‘nk funkciรณira.

A fล‘ HTML kรณdunk nem az alรกbbiak szerint fog kinรฉzni

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

Jegyezzรผk meg a legfontosabb kรผlรถnbsรฉgeket a fent รญrt kรณdban รฉs a korรกbbi kรณdunkban

<body ng-app="'sampleApp'">

A testcรญmkรฉnkben,

  • Az รผres ng-app direktรญva helyett most sampleApp-nak hรญvjuk a modult.
  • Ennek az alkalmazรกsmodulnak a meghรญvรกsรกval elรฉrhetjรผk a โ€žDemoControllerโ€ vezรฉrlล‘t รฉs a demo vezรฉrlล‘ben talรกlhatรณ funkciรณkat.

Modulok รฉs vezรฉrlล‘k az AngularJS-ben

In Szรถgletes.JS, a fejlesztรฉshez hasznรกlt mintaping A modern webes alkalmazรกsok lรฉnyege, hogy tรถbb modult รฉs vezรฉrlล‘t hoznak lรฉtre a funkcionalitรกs tรถbb szintjรฉnek logikai elkรผlรถnรญtรฉsรฉre.

รltalรกban a modulokat kรผlรถn tรกroljรกk Javascript fรกjlokat, amelyek eltรฉrnek a fล‘ alkalmazรกsfรกjltรณl.

Nรฉzzรผnk egy pรฉldรกt arra, hogyan lehet ezt elรฉrni.

Az alรกbbi pรฉldรกban

  • Lรฉtrehozunk egy Utilities.js nevลฑ fรกjlt, amely 2 modult tartalmaz, az egyik az รถsszeadรกs, a mรกsik a rรฉszmลฑveletek funkciรณit fogja vรฉgrehajtani.tracCIร“.
  • Ezutรกn 2 kรผlรถnรกllรณ alkalmazรกsfรกjlt fogunk lรฉtrehozni, รฉs mindegyik alkalmazรกsfรกjlbรณl hozzรกfรฉrรผnk a segรฉdprogramfรกjlhoz.
  • Az egyik alkalmazรกsfรกjlban az รถsszeadรกshoz, a mรกsikban pedig az almodulhoz fogunk hozzรกfรฉrni.tracCIร“.

Step 1) Hatรกrozza meg a kรณdot a tรถbb modulhoz รฉs vezรฉrlล‘hรถz.

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

Jegyezzรผk meg a fent leรญrt kรณd legfontosabb pontjait

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

    Kรฉt kรผlรถnรกllรณ Angular modul jรถn lรฉtre, az egyik az โ€žAdditionAppโ€, a mรกsik pedig a โ€žSubโ€ nevet kapja.tractionApp'.

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

    Minden modulhoz 2 kรผlรถn vezรฉrlล‘ van definiรกlva, az egyik a DemoAddController, a mรกsik pedig a DemoSub.tractVezรฉrlล‘. Minden vezรฉrlล‘ kรผlรถn logikรกval rendelkezik az รถsszeadรกshoz รฉs a rรฉszleges mลฑveletekhez.tracszรกmok ciรณja.

Step 2) Hozza lรฉtre a fล‘ alkalmazรกsfรกjljait. Hozzon lรฉtre egy ApplicationAddition.html nevลฑ fรกjlt, รฉs adja hozzรก az alรกbbi kรณdot

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

Jegyezzรผk meg a fent leรญrt kรณd legfontosabb pontjait

  1. <script src="/lib/Utilities.js"></script>

    A fล‘ alkalmazรกsfรกjlunkban az Utilities.js fรกjlra hivatkozunk. Ez lehetล‘vรฉ teszi szรกmunkra, hogy hivatkozzunk az ebben a fรกjlban definiรกlt AngularJS modulokra.

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

    Az โ€žAdditionAppโ€ modulhoz รฉs a DemoAddControllerhez az ng-app direktรญva รฉs a ng-vezรฉrlล‘ illetล‘leg.

  3. {{c}}

    Mivel a fent emlรญtett modulra รฉs vezรฉrlล‘re hivatkozunk, a $scope.c vรกltozรณra egy kifejezรฉsen keresztรผl hivatkozhatunk. A kifejezรฉs a 2 a รฉs b hatรณkรถr-vรกltozรณ hozzรกadรกsรกnak eredmรฉnye lesz, amelyet a 'DemoAddController' vezรฉrlล‘ben hajtottak vรฉgre.

    Ugyanรญgy fogjuk csinรกlni a sub esetรฉben istracciรณs fรผggvรฉny.

Step 3) Hozd lรฉtre a fล‘ alkalmazรกsfรกjljaidat. Hozz lรฉtre egy โ€žApplicationSubโ€ nevลฑ fรกjlt.traction.htmlโ€ fรกjlt, รฉs adja hozzรก az alรกbbi kรณdot

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

Jegyezzรผk meg a fent leรญrt kรณd legfontosabb pontjait

  1. <script src="/lib/Utilities.js"></script>

    A fล‘ alkalmazรกsfรกjlunkban az Utilities.js fรกjlra hivatkozunk. Ez lehetล‘vรฉ teszi szรกmunkra, hogy hivatkozhatunk az ebben a fรกjlban definiรกlt modulokra.

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

    Hozzรกfรฉrรผnk a 'Sub'-hoztractionApp modul รฉs DemoSubtractController az ng-app direktรญva, illetve az ng-controller hasznรกlatรกval.

  3. {{d}}

    Mivel a fent emlรญtett modulra รฉs vezรฉrlล‘re hivatkozunk, a $scope.d vรกltozรณra egy kifejezรฉsen keresztรผl tudunk hivatkozni. A kifejezรฉs a sub eredmรฉnye lesz.traca kรฉt hatรณkรถrลฑ vรกltozรณ, a รฉs b meghatรกrozรกsa, amelyet a 'DemofelirattractVezรฉrlล‘ ellenล‘r

ร–sszegzรฉskรฉnt

  • Az AngularJS modulok hasznรกlata nรฉlkรผl a vezรฉrlล‘k globรกlis hatรณkรถrrel rendelkeznek, ami rossz programozรกsi gyakorlatokhoz vezet.
  • A modulok az รผzleti logika elkรผlรถnรญtรฉsรฉre szolgรกlnak. Tรถbb modul is lรฉtrehozhatรณ, amelyek logikailag elvรกlaszthatรณk ezeken a kรผlรถnbรถzล‘ modulokon belรผl.
  • Minden AngularJS modulnak sajรกt vezรฉrlล‘kรฉszlete lehet definiรกlva รฉs hozzรกrendelve.
  • A modulok รฉs vezรฉrlล‘k meghatรกrozรกsakor รกltalรกban kรผlรถn definiรกljรกk ล‘ket JavaForgatรณkรถnyv fรกjlokat. Ezek JavaEzutรกn a szkriptfรกjlokra hivatkoznak a fล‘ alkalmazรกsfรกjlban.

Foglald รถssze ezt a bejegyzรฉst a kรถvetkezล‘kรฉppen: