AngularJS vezérlők ng-Controllerrel Példa

Mi az a vezérlő az AngularJS-ben?

A ellenőr Az AngularJS-ben átveszi az adatokat a nézetből, feldolgozza az adatokat, majd elküldi az adatokat a nézetbe, amely megjelenik a végfelhasználó számára. A Controller rendelkezik az Ön alapvető üzleti logikájával. A vezérlő az adatmodellt használja, elvégzi a szükséges feldolgozást, majd a kimenetet továbbítja a nézetnek, amely viszont megjelenik a végfelhasználó számára.

Mit csinál a vezérlő Angular szemszögéből?

Az alábbiakban az AngularJS vezérlő működésének egyszerű meghatározása található:

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 „függvényeket” hívhatnak a hatókörön. Ezenkívül a nézetben lévő események „módszereket” hívhatnak a hatókörön. Az alábbi kódrészlet egy egyszerű példát ad egy függvényre.

A függvény ($scope) amelyet a vezérlő és egy belső függvény meghatározásakor határoznak meg, amely a $scope.firstName és a $scope.lastName összefűzését adja vissza.
In AngularJS, amikor egy függvényt változóként definiál, azt Methodnak nevezzük.

Az adatok így az adatkezelőtől a hatókörbe, majd a hatókörből oda-vissza a nézetbe kerülnek.
A hatókör a modell megjelenítésére szolgál. A modell a hatókörben definiált metódusokkal módosítható, amelyek a nézetből származó eseményeken keresztül válthatók ki. Kétirányú modellkötést definiálhatunk a hatókörtől a modellig.
A vezérlőket ideális esetben nem szabad a DOM manipulálására használni. Ezt az irányelveknek kell megtenniük, amelyeket a későbbiekben látni fogunk.
A legjobb gyakorlat az, ha a vezérlők a funkcionalitáson alapulnak. Például, ha van egy űrlapja a bevitelhez, és ehhez vezérlőre van szüksége, hozzon létre egy „űrlapvezérlő” nevű vezérlőt.

Hogyan készítsünk egy alapvezérlőt az AngularJS-ben

Az alábbiakban bemutatjuk a vezérlő létrehozásának lépéseit az AngularJS-ben:

1. lépés) Hozzon létre egy alap HTML oldalt

Mielőtt elkezdenénk egy vezérlő létrehozását, először el kell végeznünk az alapvető HTML-oldalak beállításait.

Az alábbi kódrészlet egy egyszerű HTML-oldal, amelynek a címe „Esemény regisztráció”, és hivatkozásokat tartalmaz olyan fontos könyvtárakra, mint pl. Bootstrap, jquery és Angular.

Hivatkozásokat adunk hozzá a rendszerindító CSS stíluslapokhoz, amelyeket a rendszerindító könyvtárakkal együtt használunk.
Hivatkozásokat adunk hozzá az angularjs könyvtárakhoz. Tehát bármit is teszünk az angular.js-szal a továbbiakban, az ebből a könyvtárból fog hivatkozni.
Hivatkozásokat adunk hozzá a bootstrap könyvtárhoz, hogy weboldalunk jobban reagáljon bizonyos vezérlőelemekre.
Hivatkozásokat adtunk hozzá a jquery könyvtárakra, amelyeket a DOM-manipulációhoz használunk. Erre azért van szükség az Angular számára, mert az Angular bizonyos funkciói ettől a könyvtártól függenek.

Alapértelmezés szerint a fenti kódrészlet minden példánkban jelen lesz, így a következő szakaszokban csak az adott angularJS kódot tudjuk megjeleníteni.

2. lépés) Ellenőrizze a fájlokat és a fájlszerkezetet

Másodszor, nézzük meg a fájljainkat és a fájlstruktúránkat, amelyekkel a tanfolyam időtartama alatt kezdjük.

Először a fájljainkat 2 mappába különítjük el, ahogyan azt minden hagyományos webalkalmazásnál teszik. Megvan a „CSS” mappa. Ez tartalmazza majd az összes lépcsőzetes stíluslapfájlunkat, majd megkapjuk a „lib” mappánkat, amelyben az összes JavaForgatókönyv fájlokat.
A bootstrap.css fájl a CSS mappába kerül, és arra szolgál, hogy jó megjelenést és hangulatot adjon weboldalunkhoz.
Az angular.js a fő fájlunk, amelyet az angularJS webhelyről töltöttünk le, és a lib mappánkban tároltuk.
Az app.js fájl tartalmazza a vezérlők kódját.
A bootstrap.js fájl kiegészíti a bootstrap.cs fájlt, hogy bootstrap funkciót adjon webalkalmazásunkhoz.
A jquery fájlt arra használjuk, hogy DOM-manipulációs funkciókat adjunk webhelyünkhöz.

3. lépés) Használja az AngularJS kódot a kimenet megjelenítéséhez

Itt csak annyit szeretnénk tenni, hogy az „AngularJS” szavakat szöveges formátumban és szövegmezőben is megjelenítsük, amikor az oldalt a böngészőben tekintjük meg. Nézzünk egy példát az angular.js használatára:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Kód magyarázata:

A ng-app A kulcsszó azt jelzi, hogy ezt az alkalmazást szögletes alkalmazásnak kell tekinteni. Bármi, ami az előtaggal kezdődik "ng" az úgynevezett a Irányelv. A „DemoApp” az Angular.JS alkalmazásunk neve.
Létrehoztunk egy div címkét, és ebbe a címkébe egy ng-controller direktívát adtunk a Controllerünk „DemoController” nevével együtt. Ez alapvetően lehetővé teszi a div címkénknek a Demo Controller tartalmának elérését. Az irányelv értelmében meg kell említenie a vezérlő nevét annak biztosítása érdekében, hogy hozzáférhessen a vezérlőn belül meghatározott funkciókhoz.
Modell-kötést készítünk az ng-model direktíva segítségével. Ez annyit tesz, hogy a Tutorial Name szövegmezőjét a „tutorialName” tagváltozóhoz köti.
Létrehozunk egy „tutorialName” nevű tagváltozót, amely a felhasználó által a Tutorial Name mezőbe beírt információk megjelenítésére szolgál.
Létrehozunk egy modult, amely csatlakozik a DemoApp alkalmazásunkhoz. Így ez a modul mostantól az alkalmazásunk részévé válik.
A modulban definiálunk egy függvényt, amely alapértelmezett „AngularJS” értéket rendel a tutorialName változónkhoz.

Ha a parancsot sikeresen végrehajtották, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Mivel a tutorialName változóhoz „Angular JS” értéket rendeltünk, ez megjelenik a szövegmezőben és az egyszerű szöveges sorban.

Hogyan definiáljunk módszereket az AngularJS vezérlőkben

Általában több metódust kívánunk definiálni a vezérlőben az üzleti logika szétválasztására.

Tegyük fel például, hogy ha azt szeretné, hogy a vezérlője két alapvető dolgot végezzen el,

Adjon hozzá 2 számot
Hajtsa végre 2 szám kivonását

Ezután ideális esetben 2 metódust hozna létre a vezérlőn belül, az egyiket az összeadás, a másik pedig a kivonás végrehajtására.

Nézzünk egy egyszerű példát arra, hogyan definiálhatunk egyéni metódusokat egy Angular.JS vezérlőn belül. A vezérlő egyszerűen visszaad egy karakterláncot.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Kód magyarázata:

Itt csak egy függvényt definiálunk, amely egy „AngularJS” karakterláncot ad vissza. A függvény egy tutorialName nevű tagváltozón keresztül kapcsolódik a hatókör objektumhoz.
Ha a parancsot sikeresen végrehajtották, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

AngularJS vezérlő ng-Controllerrel Példa

Nézzünk egy példát a „HelloWorld”-re, ahol az összes funkció egyetlen fájlba került. Itt az ideje, hogy a vezérlő kódját külön fájlokban helyezze el.

Ehhez kövesse az alábbi lépéseket:

Step 1) 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őket teszi:

Határozzon meg egy „app” nevű modult, amely a vezérlőt a vezérlő funkcióival együtt fogja tartani.
Hozzon létre egy vezérlőt „HelloWorldCtrl” néven. Ez a vezérlő a „Hello World” üzenet megjelenítésére szolgál.
A hatókör objektum információ továbbítására szolgál a vezérlőtől a nézetbe. Így esetünkben a hatókör objektumot egy „message” nevű változó tárolására használjuk.
Meghatározzuk a változó üzenetet, és hozzárendeljük a „Hello World” értéket.

Step 2) Most adjon hozzá egy div osztályt a Sample.html fájlhoz, amely tartalmazza az ng-controller direktívát, majd adjon hozzá hivatkozást a „message” tagváltozóra.

Ne felejtsen el egy hivatkozást hozzáadni az app.js szkriptfájlhoz, amely tartalmazza a vezérlő forráskódját.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Ha a fenti kódot helyesen adta meg, a következő kimenet jelenik meg, amikor futtatja a kódot a böngészőben.

output:

Összegzésként

A vezérlő elsődleges feladata egy hatókör objektum létrehozása, amely viszont átkerül a nézetnek
Hogyan készítsünk egyszerű vezérlőt az ng-app, ng-controller és ng-model direktívák segítségével
Egyéni metódusok hozzáadása a vezérlőhöz, amelyek segítségével az angularjs modulon belül különböző funkciókat különíthet el.
A vezérlők külső fájlokban definiálhatók, hogy elkülönítsék ezt a réteget a Nézet rétegtől. Általában ez a legjobb gyakorlat webalkalmazások létrehozásakor.

Talán tetszene:

Mi az a vezérlő az AngularJS-ben?

Mit csinál a vezérlő Angular szemszögéből?

Hogyan készítsünk egy alapvezérlőt az AngularJS-ben

KAPCSOLÓDÓ CIKKEK

Hogyan definiáljunk módszereket az AngularJS vezérlőkben

AngularJS vezérlő ng-Controllerrel Példa

Összegzésként