Mi az az AngularJS modul?
Egy modul meghatározza az alkalmazás funkcionalitását, amelyet a teljes HTML-oldalra alkalmazunk az ng-app irányelv segítségével. Meghatározza a funkcionalitást, például a szolgáltatásokat, irányelveket és szűrőket oly módon, hogy megkönnyítse a különböző alkalmazásokban történő újrafelhasználását.
Minden korábbi oktatóanyagunkban észrevette volna a fő Angular alkalmazás meghatározásához használt ng-app irányelvet. Ez az Angular.JS modulok egyik kulcsfogalma.
Ebben az oktatóanyagban megtanulja-
- Hogyan hozzunk létre egy modult az AngularJS-ben
- Modulok és vezérlők
Hogyan hozzunk létre egy modult az AngularJS-ben
Mielőtt belekezdenénk, mi a modul, nézzünk meg egy példát egy AngularJS alkalmazásra modul nélkül, majd értjük meg, hogy szükség van-e modulokra az alkalmazásban.
Vegyük fontolóra egy "DemoController.js" nevű fájl létrehozását és az alábbi kód hozzáadását 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ű függvényt, amely vezérlőként fog működni az alkalmazásunkon belül.
Ebben a vezérlőben éppen 2 a és b változó összeadását hajtjuk végre, és ezeknek a változóknak az összeadását hozzárendeljük egy új c változóhoz, és visszarendeljük a hatókör objektumhoz.
Most hozzuk létre a fő Sample.html fájlt, amely a fő alkalmazásunk lesz. Helyezzük be az alábbi kódrészletet HTML oldalunkba.
Guru99 globális esemény
{{c}}A fenti kódba belefoglaljuk a DemoController-t, majd egy kifejezésen keresztül meghívjuk a $ scope.c változó értékét.
De vegye figyelembe az ng-app irányelvünket, amelynek üres értéke van.
- Ez alapvetően azt jelenti, hogy az összes vezérlő, amelyet az ng-app irányelv összefüggésében hívnak meg, globálisan elérhető. Nincs olyan határ, amely több vezérlőt választana el egymástól.
- A mai programozásban ez egy rossz gyakorlat, ha a vezérlőket nem csatolják egyetlen modulhoz sem, és globálisan hozzáférhetővé teszik őket. Valamilyen logikai határt meg kell határozni a vezérlők számára.
És itt jönnek be a modulok. A modulokat arra használják, hogy létrehozzák a határok elválasztását, és segítsék a vezérlők elkülönítését a funkcionalitás alapján.
Változtassuk meg a fenti kódot a modulok megvalósításához, és csatoljuk 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;});Megjegyezzük a fent írt kód legfontosabb különbségeit
var sampleApp = angular.module('sampleApp',[]);Kifejezetten létrehozunk egy „sampleApp” nevű AngularJS modult. Ez logikai határt képez a modul által tartalmazott funkcionalitás számára. Tehát a fenti példánkban van egy modul, amely egy vezérlőt tartalmaz, amely végrehajtja 2 hatókör objektum hozzáadásának szerepét. Ezért rendelkezhetünk egy logikai határral rendelkező modullal, amely azt mondja, hogy ez a modul csak az alkalmazás matematikai számításainak funkcionalitását fogja végrehajtani.
sampleApp.controller('DemoController', function($scope)Most csatlakoztatjuk a vezérlőt a "SampleApp" AngularJS modulunkhoz. Ez azt jelenti, hogy ha fő HTML kódunkban nem hivatkozunk a „sampleApp” modulra, akkor nem tudjuk hivatkozni a vezérlőnk működésére.
Fő HTML kódunk nem úgy néz ki, mint az alábbiakban látható
Guru99 Global Event
{{c}}Megjegyezzük a legfontosabb különbségeket a fent írt kódban és az előző kódunkban
A testcímkénkben
- Ahelyett, hogy üres ng-app irányelv lenne, most a mintaApp modult hívjuk meg.
- 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 Angular.JS alkalmazásban 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 logikus elkülönítésére.
Normális esetben a modulokat külön Javascript fájlokban tárolják, amelyek különböznének a fő alkalmazásfájltól.
Nézzünk meg 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 fog tárolni, az egyik az összeadás, a másik a kivonás funkciójának végrehajtására szolgál.
- Ezután létrehozunk 2 külön alkalmazásfájlt, és minden alkalmazásfájlból hozzáférünk a Segédprogram fájlhoz.
- Az egyik alkalmazásfájlban hozzáférünk a modulhoz az összeadáshoz, a másikban pedig a kivonáshoz.
1. lépés: Adja meg a több modul és vezérlő kódját.
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;});Megjegyezzük a legfontosabb pontokat a fent írt kódban
var AdditionApp = angular.module('AdditionApp',[]);var SubractionApp = angular.module('SubtractionApp',[]);Létrehozott 2 különálló szögletes modult, az egyik az „AdditionApp” nevet kapta, a másik pedig a „SubtractionApp” nevet.
AdditionApp.controller('DemoAddController', function($scope)SubractionApp.controller('DemoSubtractController', function($scope)Minden modulhoz 2 külön vezérlő van meghatározva, az egyiket DemoAddController-nek hívják, a másik pedig a DemoSubtractController-nek. Minden vezérlő külön logikával rendelkezik a számok összeadásához és kivonásához.
2. lépés: Hozzon létre fő alkalmazásfájlokat. Hozzunk létre egy ApplicationAddition.html nevű fájlt, és adjuk hozzá az alábbi kódot
Addition Addition :{{c}}Megjegyezzük a legfontosabb pontokat a fent írt kódban
A fő alkalmazásfájlban hivatkozunk az Utilities.js fájlra. Ez lehetővé teszi számunkra, hogy hivatkozzunk az ebben a fájlban definiált AngularJS modulokra.
Az 'AdditionApp' modulhoz és a DemoAddControllerhez az ng-app direktíva és az ng-controller segítségével jutunk el.
{{c}}Mivel hivatkozunk a fent említett modulra és vezérlőre, egy kifejezésen keresztül hivatkozhatunk a $ scope.c változóra. A kifejezés a „DemoAddController” vezérlőben végrehajtott 2 a és b hatókörváltozó hozzáadásának eredménye.
Ugyanúgy, mint a kivonási függvénynél.
3. lépés: Hozzon létre fő alkalmazásfájlokat. Hozzunk létre egy "ApplicationSubtraction.html" nevű fájlt, és adjuk hozzá az alábbi kódot
Addition Subtraction :{{d}}Megjegyezzük a legfontosabb pontokat a fent írt kódban
A fő alkalmazásfájlban hivatkozunk az Utilities.js fájlra. Ez lehetővé teszi számunkra, hogy az ebben a fájlban definiált modulokra hivatkozhassunk.
Az ng-app direktíva és az ng-controller segítségével elérjük a 'SubtractionApp modult és a DemoSubtractController-t.
{{d}}Mivel hivatkozunk a fent említett modulra és vezérlőre, egy kifejezésen keresztül hivatkozhatunk a $ scope.d változóra. A kifejezés a 'DemoSubtractController' Vezérlőben végrehajtott 2 a és b hatókörváltozó kivonásának eredménye lesz.
Összegzés
- Az AngularJS modulok használata nélkül a vezérlők globális hatókörrel rendelkeznek, ami rossz programozási gyakorlathoz vezet.
- A modulokat az üzleti logika elkülönítésére használják. Több modul hozható létre, amelyek logikusan elkülönülnek a különböző modulokon belül.
- Minden AngularJS modul saját vezérlőkészletet határozhat meg és rendelhet hozzá.
- A modulok és vezérlők definiálásakor ezeket általában külön JavaScript fájlokban definiálják. Ezekre a JavaScript fájlokra hivatkozik a fő alkalmazásfájl.