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 modern webalkalmazások fejlesztéséhez használt minta több modul és vezérlő létrehozása a funkcionalitás több szintjének logikai elkülönítése érdekében.

Á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 pedig a kivonás funkcióját hajtja végre.
  • 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 hozzáférünk a modulhoz az összeadáshoz, a másikban pedig a kivonáshoz.

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',[]);

    2 külön Angular Module jött létre, az egyik az AdditionApp nevet kapta, a másik pedig a „SubtractionApp” nevet kapta.

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

    Minden modulhoz 2 külön vezérlő van meghatározva, az egyik a DemoAddController, a másik a DemoSubtractController. Mindegyik vezérlőnek külön logikája van a számok összeadására és kivonására.

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.

    Ugyanezt fogjuk tenni a kivonási függvénynél.

Step 3) Hozza létre a fő alkalmazásfájljait. Hozzuk létre az „ApplicationSubtraction.html” nevű fájlt, és adjuk 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 ">

    A „SubtractionApp modult és a DemoSubtractControllert az ng-app direktíva és az ng-vezérlő használatával érjük el.

  3. {{d}}

    Mivel a fent említett modulra és vezérlőre hivatkozunk, a $scope.d változóra egy kifejezésen keresztül hivatkozhatunk. A kifejezés a két a és b hatókörváltozó kivonásának eredménye lesz, amelyet a "DemoSubtractController" 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.

Talán tetszene: