AngularJS vezérlők ng-Controllerrel Példa
James Hartman
⚡ Okos összefoglaló
Az AngularJS vezérlője a képernyő üzleti logikáját tárolja. Adatokat fogad a scope objektumon keresztül, feldolgozza azokat, és az eredményt visszaküldi a nézetnek, keepping alkalmazáslogikától mentes prezentációs jelölőnyelv.
Mi az a vezérlő az AngularJS-ben?
A ellenőr Az AngularJS-ben a nézetből (View) származó adatok feldolgozásra kerülnek, majd elküldik azokat a nézetnek (View), amely megjelenik a végfelhasználónak. A vezérlő (Controller) tartalmazza az alapvető üzleti logikát. Ez használja az adatmodellt, elvégzi a szükséges feldolgozást, majd továbbítja a kimenetet a nézetnek (View).
⚠️ Verzió megjegyzés: Az AngularJS (az 1.x ág) 2021. december 31-én elérte az élettartama végét, és nem kap további biztonsági javításokat. Az alábbi koncepciók továbbra is érvényesek a korábbi alkalmazásokra; a modern Angularban ugyanezt a szerepet egy komponensosztály tölti be, nem pedig egy vezérlő.
Ha tudjuk, hogy mi is valójában a vezérlő, az egy kérdés nyitva marad: hogyan kommunikál a nézettel. A következő rész erre ad választ.
Mit csinál a vezérlő az Angular szemszögéből?
Az alábbiakban egy egyszerű leírást találsz az AngularJS vezérlő működéséről:
- Az adatkezelő elsődleges felelőssége a nézetbe továbbított adatok ellenőrzése. A hatókör és a nézet kétirányú kommunikációt folytat.
- A nézet tulajdonságai és eseményei függvényeket hívhatnak meg a hatókörön. Az alábbi kódrészlet a következőt mutatja be: függvény ($scope) a vezérlővel és egy belső függvénnyel deklarálva, amely visszaadja
$scope.firstNameés a$scope.lastNamecsatlakozott. Be AngularJS, egy változóként definiált függvény egy metódus.
- Az adatok a vezérlőből a hatókörbe, majd oda-vissza a hatókör és a nézet között haladnak.
- A hatókör teszi elérhetővé a modellt a nézet számára. A modell a hatókörön definiált metódusokkal módosítható, amelyeket a nézet eseményei váltanak ki.
- A vezérlőket nem szabad a DOM manipulálására használni. Ez a feladata. irányelvek.
- A legjobb gyakorlat az, hogy a vezérlőket a funkcionalitás alapján kell létrehozni. Ha van egy beviteli űrlapod, amelyhez vezérlőre van szükség, hozz létre egyet „űrlapvezérlő” néven.
Miután megértettük a mechanizmust, a következő szakasz egy üres oldalból épít fel egy vezérlőt.
Hogyan készítsünk egy alapvezérlőt az AngularJS-ben
Az alábbiakban bemutatjuk egy vezérlő létrehozásának lépéseit AngularJS-ben.
1. lépés) Hozzon létre egy alap HTML oldalt
Egy vezérlő létrehozása előtt létre kell hozni az alapvető HTML oldalt. Az alábbi kódrészlet egy egyszerű oldal, melynek címe „Eseményregisztráció”, és a következőre hivatkozik: Bootstrap és az AngularJS-t.
- Hivatkozások a Bootstrap CSS stíluslap, a következővel együtt használva: Bootstrap könyvtár.
- Hivatkozás az AngularJS könyvtárra. Minden, amit innentől kezdve az AngularJS-sel csinálunk, ebből a fájlból van megoldva.
- Hivatkozás a Bootstrap könyvtár, amely bizonyos vezérlőket reszponzívvá tesz.
⚠️ Javítás: az eredetileg betöltött jQuery-t, és kijelentette, hogy az AngularJS attól függ. Nem. Az AngularJS a jqLite-tal érkezik, ami a jQuery API beépített részhalmaza, és csak akkor frissül teljes jQuery-re, ha a jQuery betöltődik előtt A hivatkozást eltávolítottuk.
2. lépés) Ellenőrizze a fájlokat és a fájlszerkezetet
- A fájlok két mappára vannak osztva, mint bármely hagyományos webes alkalmazásban: a „css” a stíluslapokhoz és a „lib” a... JavaForgatókönyv fájlokat.
- A bootstrap.css a css mappában található, és megadja az oldal kinézetét és érzetét.
- Az angular.js a fő könyvtár, amelyet az AngularJS webhelyéről töltöttünk le és a lib könyvtárban tárolunk.
- Az app.js fogja tartalmazni a vezérlők kódját.
3. lépés) Használja az AngularJS kódot a kimenet megjelenítéséhez
A cél az, hogy az „AngularJS” szavak megjelenjenek mind sima szövegként, mind egy szövegmezőben, amikor a böngésző megnyitja az oldalt.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName}} </div> <script src="lib/angular.js"></script> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "AngularJS"; }]); </script> </body> </html>
Code Magyarázat:
- ng-app ezt az elemet egy AngularJS alkalmazás gyökereként jelöli meg. Az attribútumok előtagja a következő: ng- beépített direktívák. A „DemoApp” az alkalmazás neve.
- A div hordozza ng-vezérlő „DemoController” néven, amely hozzáférést biztosít az elemnek és a benne lévő összes elemnek a vezérlő hatóköréhez.
- ng-modell létrehozza a modellkötést, a Tutorial Name szövegmezőt a scope tulajdonsághoz kötve.
tutorialName. - A modul
DemoApplétrejön, és a vezérlő az „AngularJS” alapértelmezett értéket rendeli hozzá atutorialName.
⚠️ Javítások alkalmazva. Az eredeti listázás bejelentette chrset="UTF 8", ami sem nem érvényes attribútum, sem nem érvényes kódolási név, és kétszer töltötte be az AngularJS-t – egyszer a CDN-ből, egyszer pedig a lib/angular.jsA függvénykönyvtár kétszeri betöltése újraregisztrálja a modulrendszert, és kiszámíthatatlan viselkedést eredményez. A függőségi tömb annotációja ['$scope', function($scope){…}] is hozzáadódott, amely nélkül a vezérlő a fájl minimalizálásának pillanatában leáll.
output:
Mivel tutorialName ha az „AngularJS” értéket kapta, akkor ez az érték megjelenik a szövegmezőben és a sima szöveg sorban is. Egyetlen tulajdonság elegendő a bemutatóhoz; a valódi vezérlők általában a viselkedést is bemutatják, amit a következő szakasz tárgyal.
Hogyan definiáljunk módszereket az AngularJS vezérlőkben
Normális esetben egy vezérlőben több metódust kellene definiálni az üzleti logika szétválasztására. Ha a vezérlőnek két számot és alszámot kellene összeadniatrackét szám esetén minden művelethez külön metódust kellene létrehoznod.
Az alábbi példa egy AngularJS vezérlőn belüli egyéni metódust definiál, amely egy karakterláncot ad vissza.
<!-- The head and library references are unchanged from Step 3 --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tName()}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "AngularJS"; // A method on the scope, callable from the view as tName() $scope.tName = function() { return $scope.tutorialName; }; }]); </script>
Code Magyarázat:
- Egy függvény a hatókör objektumhoz tagként van csatolva.
tName. Visszaadja a(z) aktuális értékét.tutorialName. - A nézet meghívja a metódust a következővel:
{{tName()}}A zárójelek számítanak: nélkülük a kifejezés magát a függvényt írja ki, nem pedig az eredményét.
⚠️ Javítás: az eredeti módszer olvasható $scope.tName = function() { return $scope.tName; };Ez a függvény önmagát adja vissza, nem a bemutató nevét, így az oldal függvénytörzset jelenített meg szöveg helyett. Mostantól a következőt adja vissza: $scope.tutorialName.
output:
Eddig minden egy fájlban volt. Az éles alkalmazások külön kezelik a vezérlőket, amit a következő rész bemutat.
AngularJS vezérlő ng-Controllerrel Példa
A fenti „HelloWorld” példa az összes funkciót egyetlen fájlba helyezte. Most itt az ideje, hogy a vezérlő kódját külön fájlba helyezzük.
Step 1) Az app.js fájlban add hozzá a következő kódot a vezérlődhöz.
angular.module('app', []) .controller('HelloWorldCtrl', ['$scope', function($scope) { $scope.message = "Hello World"; }]);
A fenti kód a következőket teszi:
- Definiál egy „app” nevű modult, amely a vezérlőt tartalmazza.
- Létrehoz egy „HelloWorldCtrl” nevű vezérlőt, amely egy „Hello World” üzenetet jelenít meg.
- A scope objektumot használja az információk továbbítására a vezérlőtől a nézetnek, ebben az esetben egy nevű változót.
message.
Step 2) A Sample.html fájlban adj hozzá egy div-et, amely tartalmazza az ng-controller direktívát és a tagváltozóra mutató hivatkozást. messageNe felejtsd el hivatkozni az app.js fájlra, amely a vezérlő forráskódját tartalmazza.
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <h1> Guru99 Global Event</h1> <div class="container"> <div ng-controller="HelloWorldCtrl">{{message}}</div> </div> <script src="lib/angular.js"></script> <script src="app.js"></script> </body> </html>
⚠️ Javítás: az app.js fájlt be kell tölteni után angular.js, mivel meghívja angular.moduleAz eredeti kétszer is betöltötte a könyvtárat, és ugyanazt a fájlt hordozta. chrset sajtóhiba.
output:
Minden eddigi példa közvetlenül olvasott és írt tulajdonságokat a $scopeAz alábbi szakasz az AngularJS csapata által javasolt alternatívát ismerteti.
A controllerAs szintaxis használata AngularJS-ben
Közvetlen kötés a következőhöz: $scope működik, de kétértelművé válik, amint a vezérlők beágyazódnak. Egy nézetkifejezés, mint például {{name}} nem ad információt arról, hogy melyik vezérlő a tulajdonosa name, és mivel a gyermekhatókörök prototípusosan örökölnek a szülőhatóköröktől, egy beágyazott vezérlő, amely egy örökölt primitívbe ír, csendben létrehozza a saját árnyékmásolatát. controllerAs szintaxis mindkét problémát kiküszöböli azáltal, hogy minden vezérlőnek álnevet ad.
Step 1) A nézetben a vezérlő álneve a következő használatával: as kulcsszót, majd minden kötés elé rendelje ezt az álnevet.
Step 2) A vezérlőn belül csatoljon tulajdonságokat a következőhöz: this ahelyett, hogy $scope.
<div ng-controller="DemoController as demo"> Tutorial Name : <input type="text" ng-model="demo.tutorialName"> This tutorial is {{demo.tutorialName}} </div> <script> app.controller('DemoController', function() { // 'vm' is captured so nested functions keep the right reference var vm = this; vm.tutorialName = "AngularJS"; vm.tName = function() { return vm.tutorialName; }; }); </script>
Három előny következik. A kötések öndokumentálóvá válnak, mert demo.tutorialName megnevezi a tulajdonosát. A beágyazott vezérlők nem ütköznek többé, mivel egy szülő aliasított. outer és egy álnéven ismert gyermek inner mindkettő leleplezheti nameAz értékek egy objektumon keresztül kötődnek, nem pedig egy egyszerű primitív, kitérő lépésen keresztül.ping a csapda, ahol egy gyermekben végrehajtott szerkesztés soha nem jut el a szülőhöz.
👍 Tipp: Elfog this egy változóba, mint például vm a vezérlő tetején. Egy visszahíváson belül this valami teljesen másra utal, és a rögzített hivatkozás helyesen tartja a kötést.
A kötési stílus kiválasztása egy döntés. Annak eldöntése, hogy mi tartozik egyáltalán egy vezérlőbe, egy másik, és az alábbi összehasonlítás ezt a határvonalat húzza meg.
Vezérlő vs. szolgáltatás az AngularJS-ben
A kezdők gyakran túlterhelik a vezérlőt olyan feladatokkal, amelyek egy szolgáltatáshoz tartoznak. A különbség az élettartam és az újrafelhasználhatóság: egy vezérlő csak addig létezik, amíg a nézete a képernyőn van, míg egy szolgáltatás egyetlen egység, amely az alkalmazás élettartama alatt létezik.
| Aspect | ellenőr | szolgáltatás |
|---|---|---|
| Élettartam | Létrehozva és elpusztítva a kilátással | Egyetlen példány a teljes alkalmazáshoz |
| Cél | Adatok előkészítése egy nézethez | Megosztott logika, állapot- és szerverhívások |
| Többször | Nem, a nézetéhez kötődik | Igen, bárhová injekciózható |
| Állapotot tart a nézetek között | Nem, az állam elveszik a navigációban | Igen, az állam megmarad |
| Tipikus tartalom | Hatókör tulajdonságai és nézetmetódusok | HTTP hívások, gyorsítótárazás, üzleti szabályok |
Tartsd a vezérlőket vékonyan. Ha két vezérlőnek ugyanazon logikára van szüksége, vagy ha egy értéknek túl kell élnie a nézetek közötti navigációt, helyezd át egy szolgáltatásba, és illeszd be a szolgáltatást oda, ahol szükség van rá. Egy gyakorlati teszt az, hogy megkérdezzük, vajon a kódnak van-e értelme az aktuális képernyő bezárása mellett is. Ha a válasz igen, akkor egy szolgáltatásba tartozik.
