Mi a $scope az AngularJS-ben? Oktatóanyag példával

Mi a $scope az AngularJS-ben?

$scope az AngularJS-ben egy beépített objektum, amely alapvetően a „vezérlőt” és a „nézetet” köti össze. A vezérlőn belüli hatókörben tagváltozók definiálhatók, amelyek azután a nézet által elérhetők.

Minden vezérlő egy AngularJS Az alkalmazás függőségi injektáláson keresztül kapja meg a saját $scope példányát. Bármit is csatolsz ehhez az objektumhoz, az láthatóvá válik a vezérlő által irányított sablon számára, így a $scope úgy viselkedik, mint a megosztott adatmodell, amely a kettő között helyezkedik el. JavaSzkriptlogika és a HTML-jelölésed.

Vegye figyelembe az alábbi példát:

angular.module('app',[]).controller('HelloWorldCtrl',
	function($scope)
	{
		$scope.message = "Hello World"
	});

Code Magyarázat:

1. A modul neve „app”
2. A vezérlő neve „HelloWorldCtrl”
3. A Scope objektum az a fő objektum, amely az információnak a vezérlőtől a nézethez történő továbbítására szolgál.
4. Tagváltozó hozzáadva a hatókör objektumhoz

Egyetlen vezérlő és egyetlen nézet csak a kép fele. A valódi alkalmazások egymásba ágyazzák a vezérlőket, ismétlődő listákat és újrafelhasznált widgeteket alkalmaznak, ami azt jelenti, hogy egyszerre több hatókör is létezik.

Hogyan működik a hatókör-hierarchia és az öröklődés az AngularJS-ben

Minden AngularJS alkalmazásnak pontosan egy gyökér hatóköre van, és tetszőleges számú gyermek hatóköre lehet. Az irányelvek létrehozzák ezeket a gyermek hatóköröket, és csatolják őket az általuk díszített DOM elemhez, így a hatókörfa tükrözi a renderelt oldal szerkezetét.

Amikor az AngularJS kiértékel egy kifejezést, például {{siteName}}, akkor először az elemhez csatolt hatókörben keresi a tulajdonságot. Ha a tulajdonság hiányzik, a keresés a szülő hatókörre ugrik, és addig folytatja a keresést, amíg el nem éri a gyökér hatókört. JavaA szkriptfejlesztők ezt a viselkedést prototípusos öröklődésként ismerik, és a gyermek hatókörök pontosan így örökölnek a szüleiktől.

Az alábbi példa egy vezérlőt ágyaz be egy másikba, így megfigyelheted az öröklődést.

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code Magyarázat:

1. ParentCtrl határozza meg siteName saját hatókörében.
2. ChildCtrl soha nem határozza meg siteName, mégis a belső div továbbra is kinyomtatja Guru99 mert a keresés a szülő hatókörhöz vezet.
3. lesson csak a gyermek hatókörön él, így a szülő div nem tudja elolvasni.

Mely direktívák hoznak létre új hatókört?

• ng-vezérlő: létrehoz egy gyermek hatókört ahhoz az elemhez, amelyre elhelyezik.
• ng-ismétlés: iterációnként egy gyermek hatókört hoz létre, ezért minden sor különböző értékeket tartalmazhat ugyanahhoz a kifejezéshez.
• Egyéni utasítások: kérhet alárendelt hatókört, vagy egy izolátum hatókör, amely szándékosan nem örököl a szülőjétől.
• Komponens direktívák: bármi, ami regisztrálva van a .component() A helper mindig izolált hatókört kap.

Mivel a gyermekhatókörök felfelé olvasnak, a fejlesztők gyakran kíváncsiak arra, hogy hol található a lánc teteje. Ezt a legfelső szintű objektumot $rootScope-nak hívják.

$scope vs. $rootScope: Mi a különbség?

Az AngularJS $rootScope a teljes alkalmazás hatóköre. Egy alkalmazásnak csak egy $rootScope-ja lehet, és ezt globális változóként használjuk. Minden $scope egy gyermek hatókör, a $rootScope pedig a fa tetején található szülő hatókör. Az alábbi táblázat összehasonlítja a két objektumot.

A $rootScope paramétert csak mértékkel használd. Bármi, amit oda teszel, az az egész alkalmazásra érvényes és bárhol olvasható, így egy megosztott szolgáltatás általában biztonságosabb otthont nyújt a globális állapotnak. A hivatalos $rootScope hivatkozás felsorolja a teljes API-t.

A munka egyik fele annak ismerete, hogy hol találhatók az adatok. A másik fele pedig annak megtanítása, hogyan reagáljon a felhasználó cselekedeteire.

Viselkedés beállítása vagy hozzáadása AngularJS-ben

Ahhoz, hogy reagáljunk az eseményekre, vagy valamilyen számítást/feldolgozást hajtsunk végre a Nézetben, viselkedést kell biztosítanunk a hatókör számára.

A viselkedések hozzáadódnak a hatókör objektumokhoz, hogy reagáljanak a nézet által esetlegesen kiváltott konkrét eseményekre. Miután a viselkedést meghatározták a vezérlőben, a nézet hozzáférhet.

Nézzünk egy példát arra, hogyan érhetjük el ezt.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

Code Magyarázat:

1. A „fullName” nevű viselkedést hozzuk létre. Ez a viselkedés olyan függvény, amely 2 paramétert (firstName, lastname) fogad el.
2. A viselkedés ezután ennek a 2 paraméternek az összefűzését adja vissza.
3. A nézetben meghívjuk a viselkedést, és átadunk 2 értéket a következőből: „Guru” és „99”, amelyek paraméterként kerülnek átadásra a viselkedésnek.

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

output:

A böngészőben a következő értékek összefűzését fogja látni: Guru & 99, amelyeket átadtak a viselkedésnek a ellenőr.

Az olyan kötések, mint a fenti, maguktól frissülnek, és érdemes megérteni a mechanizmust, amely ezt lehetővé teszi, mielőtt egy alkalmazás nagyra nőne.

Miért fontosak a Scope Watchers és az emésztési ciklus?

Az AngularJS a nézetet a hatókörrel összhangban tartja a piszkos ellenőrzések, nem pedig a változásesemények révén. Ezt a folyamatot három hatókör API vezérli:

• $figyelés: regisztrál egy figyelőt egy kifejezéshez. Interpolációk, mint például {{fullName}} regisztráljon megfigyelőket a sabloncsatolás során.
• $alkalmaz: belép az AngularJS végrehajtási kontextusába, kiértékeli a kódodat, majd elindít egy kivonatolást. Csak egyéni eseményhívásokon vagy harmadik féltől származó könyvtárhívásokon belül van rá szükség, mivel a beépített direktívák már meghívják.
• $összefoglaló: A $rootScope és gyermekeinek minden egyes figyelőjét végigjárja, összehasonlítja az aktuális értéket az előzővel, és addig ismétli a műveletet, amíg a modell változása meg nem szűnik.

Mivel egy kivonat több menetben is futtatható, a figyelő kifejezéseknek olcsónak kell maradniuk. Kerüljük a DOM hozzáférést bennük, mivel a DOM olvasása nagyságrendekkel lassabb, mint egy JavaSzkript tulajdonság.

A figyelési mélység a költségeket is befolyásolja. A referencia alapú figyelés a leggyorsabb, és csak akkor veszi észre, ha a teljes érték lecserélődik. $watchCollection észreveszi a tömbön vagy objektumon belül hozzáadott, eltávolított vagy átrendezett elemeket. Az érték szerinti figyelés minden kivonatolásnál bejár egy beágyazott struktúrát, és ez a legdrágább lehetőség, ezért utoljára nyúljunk hozzá.

GYIK