Mi az a vezérlő az AngularJ-kben?
Az AngularJs vezérlők átveszik az adatokat a nézetből, feldolgozzák az adatokat, majd továbbítják ezeket az adatokat a végfelhasználó számára megjelenített nézetbe. A Vezérlő rendelkezik az alapvető üzleti logikával.
A vezérlő az adatmodellt használja, elvégzi a szükséges feldolgozást, majd továbbítja a kimenetet annak a nézetnek, amely viszont megjelenik a végfelhasználó számára.
Ebben az oktatóanyagban megtanulja-
- Mit tesz a vezérlő szögletes szempontból
- Hogyan lehet felépíteni egy alapvezérlőt
- Hogyan lehet meghatározni a metódusokat a vezérlőben
- Az ng-controller használata a külső fájlokban
- Az adatkezelő elsődleges felelőssége a nézethez továbbított adatok ellenőrzése. A hatókör és a nézet kétirányú kommunikációval rendelkezik.
- A nézet tulajdonságai "függvényeket" hívhatnak meg a hatókörön. Ezenkívül a nézet eseményei "módszereket" hívhatnak a hatókörre. Az alábbi kódrészlet egyszerű példát ad egy függvényre.
- A vezérlő és egy olyan belső függvény meghatározása során definiált függvény ($ hatókör), amely a $ scope.firstName és $ scope.lastName összefűzésére szolgál.
- Az AngularJS-ben, amikor egy függvényt változóként határoz meg, Metódusnak nevezik.
- Az ilyen módon az adatok átkerülnek a vezérlőtől a hatókörbe, majd az adatok oda-vissza átkerülnek a hatókörből a nézetbe.
- A hatókör arra szolgál, hogy a modell láthatóvá váljon. A modell a hatókörben meghatározott módszerekkel módosítható, amelyek a nézet eseményei révén kiválthatók. Meghatározhatunk kétirányú modellkötést a hatókörtől a modellig.
- Ideális esetben a vezérlőket nem szabad a DOM manipulálására használni. Ezt azoknak az irányelveknek kell megtenniük, amelyeket később láthatunk.
- A legjobb gyakorlat az, hogy a vezérlő funkcionalitáson alapul. Például, ha rendelkezik űrlappal a bevitelhez, és ehhez vezérlőre van szüksége, hozzon létre egy "űrlapvezérlő" nevű vezérlőt.
- Hivatkozásokat adunk a bootstrap CSS stíluslapokra, amelyeket a bootstrap könyvtárakkal együtt fogunk használni.
- Hozzáadunk hivatkozásokat az angularjs könyvtárakra. Tehát bármit is tegyünk az angular.js-sel a továbbiakban, erre a könyvtárra hivatkozunk.
- Hivatkozásokat adunk a bootstrap könyvtárra, hogy weblapunk jobban reagáljon bizonyos vezérlőkre.
- Hozzáadtuk a jommery könyvtárakra vonatkozó hivatkozásokat, amelyeket a DOM manipulációjára használnak. Ezt az Angular megköveteli, mert az Angular bizonyos funkciói ettől a könyvtártól függenek.
- Először szétválasztjuk a fájljainkat 2 mappába, ahogyan azt bármelyik hagyományos webalkalmazás elvégzi. Megvan a "CSS" mappa. Ez tartalmazni fogja az összes lépcsőzetes stíluslapfájlt, majd megkapja a "lib" mappánkat, amely az összes JavaScript-fájlt tartalmazza.
- A bootstrap.css fájl a CSS mappába kerül, és ez jó megjelenést és hangulatot adott hozzá weboldalunkhoz.
- Az angular.js a fő fájlunk, amelyet letöltöttünk az angularJS webhelyről, és a lib mappánkban tároltuk.
- Az app.js fájl tartalmazza a vezérlők kódját.
- A bootstrap.js fájlt a bootstrap.cs fájl kiegészítésére használják, hogy webalkalmazásunkhoz hozzáadják a bootstrap funkciókat.
- A jquery fájlt arra használják, hogy a DOM-manipulációs funkciókat hozzáadja webhelyünkhöz.
Amit a Vezérlő végez Angular szemszögéből
Az alábbiakban bemutatjuk az Angular JS Controller működésének egyszerű meghatározását.
Hogyan lehet felépíteni egy alapvezérlőt
Mielőtt elkezdenénk egy vezérlő létrehozását, először meg kell adnunk a HTML oldal alapvető beállításait.
Az alábbi kódrészlet egy egyszerű HTML-oldal, amelynek címe "Esemény regisztráció", és hivatkozásokat tartalmaz olyan fontos könyvtárakra, mint a Bootstrap, a jquery és az Angular.
Alapértelmezés szerint a fenti kódrészlet minden példánkban jelen lesz, így a következő szakaszokban csak a konkrét szögletes JS kódot tudjuk megmutatni.
Másodszor nézzük meg fájljainkat és fájlszerkezetünket, amellyel a tanfolyamunk ideje alatt kezdjük.
Nézzünk meg egy példát az angular.js használatára,
Amit itt meg akarunk tenni, az az, hogy az "AngularJS" szavakat mind szöveges formátumban, mind szövegmezőben jelenítsük meg, amikor az oldalt megtekintjük a böngészőben.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kód Magyarázat:
- Az ng-app kulcsszó arra utal, hogy ezt az alkalmazást szögletes alkalmazásnak kell tekinteni. Bármi, ami az „ng” előtaggal kezdődik, irányelvként ismert. A "DemoApp" az Angular.JS alkalmazásunk neve.
- Létrehoztunk egy div tag-et, és ebbe a tagbe egy ng-controller direktívát adtunk hozzá, a vezérlőnk nevével együtt "DemoController". Ez alapvetően lehetővé teszi div tagünk számára, hogy hozzáférjünk a Demo Controller tartalmához. Meg kell említenie a vezérlő nevét az irányelv értelmében, hogy hozzáférjen a vezérlőn belül meghatározott funkciókhoz.
- Egy modellkötést hozunk létre az ng-model irányelv segítségével. Ez annyit tesz, hogy az Oktatóanyag neve szövegmezőjét a "tutorialName" tagváltozóhoz köti.
- Létrehozunk egy "tutorialName" nevű tagváltozót, amely arra szolgál, hogy megjelenítse azokat az információkat, amelyeket a felhasználó begépel az oktatóanyag neve mezőbe.
- Készítünk egy modult, amelyet a DemoApp alkalmazáshoz csatolunk. Tehát ez a modul most az alkalmazás részévé válik.
- A modulban meghatározunk egy függvényt, amely az "AngularJS" alapértelmezett értéket rendel a tutorialName változóhoz.
A parancs sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Mivel a tutorialName változóhoz "Szögletes JS" értéket rendeltünk, ez megjelenik a szövegmezőben és a sima szövegsorban.
Hogyan lehet meghatározni a metódusokat a vezérlőben
Normális esetben az üzleti logika elválasztására több módszert kell meghatározni a vezérlőben.
Tegyük fel például, hogy ha azt szeretné, hogy a vezérlője 2 alapvető dolgot hajtson végre,
- Végezzen el 2 szám hozzáadását
- Végezze el 2 szám kivonását
Ideális esetben létrehozna 2 metódust a vezérlő belsejében, az egyiket az összeadás, a másikat pedig a kivonás elvégzésére.
Lássunk egy egyszerű példát arra, hogyan definiálhat egyéni módszereket egy Angular.JS vezérlőn belül. A vezérlő egyszerűen visszaad egy karakterláncot.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kód Magyarázat:
- Itt csak egy olyan függvényt definiálunk, amely az "AngularJS" karakterláncot adja vissza. A függvény a tutorialName nevű tagváltozón keresztül kapcsolódik a hatókörobjektumhoz.
- A parancs sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Az ng-controller használata a külső fájlokban
Nézzünk meg egy példát a "HelloWorld" -re, ahol az összes funkció egyetlen fájlba került. Itt az ideje, hogy külön fájlokban helyezze el a vezérlő kódját.
Kövessük az alábbi lépéseket.
1. lépés: Az app.js fájlban adja hozzá a következő kódot a vezérlőhöz
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
A fenti kód a következő dolgokat teszi,
- Határozzon meg egy "app" nevű modult, amely a vezérlőt a vezérlő funkcióival együtt fogja meg.
- Hozzon létre egy "HelloWorldCtrl" nevű vezérlőt. Ezt a vezérlőt arra használják, hogy képes legyen megjeleníteni a "Hello World" üzenetet.
- A hatókör objektum arra szolgál, hogy információkat továbbítson a vezérlőből a nézetbe. Tehát esetünkben a hatókör objektumot az "üzenet" nevű változó tárolására fogjuk használni.
- Meghatározzuk a változó üzenetet, és hozzáadjuk a "Hello World" értéket.
2. lépés: Most a Sample.html fájljában adjon hozzá egy div osztályt, amely tartalmazza az ng-controller irányelvet, majd adjon hozzá egy hivatkozást az "üzenet" tag változóhoz
Ne felejtsen el hozzáadni egy hivatkozást az app.js szkriptfájlhoz, amely tartalmazza a vezérlő forráskódját.
Event Registration Guru99 Global Event
{{message}}
Ha a fenti kódot helyesen adta meg, a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot.
Kimenet:
Összegzés
- A vezérlő elsődleges feladata egy hatókör-objektum létrehozása, amely viszont átkerül a nézethez
- Hogyan lehet egyszerű vezérlőt felépíteni az ng-app, ng-controller és ng-model irányelvek használatával
- Hogyan adhatunk egyedi metódusokat egy vezérlőhöz, amelyek felhasználhatók az angularjs modul különféle funkcióinak elkülönítésére.
- A vezérlők külső fájlokban definiálhatók, hogy elválasszák ezt a réteget a Nézettől. Ez általában bevált módszer a webalkalmazások létrehozásakor.