Wat is $scope in AngularJS? Handleiding met voorbeeld.

Wat is $scope in AngularJS?

$scope in AngularJS is een ingebouwd object dat feitelijk de “controller” en de “view” verbindt. Men kan lidvariabelen definiëren in het bereik binnen de controller, waartoe vervolgens toegang kan worden verkregen via de weergave.

Elke controller in een angularjs De applicatie ontvangt zijn eigen `$scope`-instantie via dependency injection. Alles wat je aan dat object koppelt, wordt zichtbaar voor de template die de controller beheert, waardoor `$scope` fungeert als het gedeelde datamodel dat zich tussen jouw applicatie en de template bevindt. JavaScriptlogica en je HTML-opmaak.

Beschouw het onderstaande voorbeeld:

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

Code Uitleg:

1. De naam van de module is “app”
2. De naam van de controller is "HelloWorldCtrl".
3. Scope-object is het hoofdobject dat wordt gebruikt om informatie van de controller naar de weergave door te geven.
4. Lidvariabele toegevoegd aan bereikobject

Een enkele controller en een enkele view vormen slechts de helft van het verhaal. In echte applicaties worden controllers genest, lijsten herhaald en widgets hergebruikt, wat betekent dat er meerdere scopes tegelijk bestaan.

Hoe scopehiërarchie en overerving werken in AngularJS

Elke AngularJS-applicatie heeft precies één root-scope en kan een willekeurig aantal child-scopes hebben. Directives creëren deze child-scopes en koppelen ze aan het DOM-element dat ze decoreren, zodat de scope-boom de structuur van de weergegeven pagina weerspiegelt.

Wanneer AngularJS een expressie evalueert zoals {{siteName}}Eerst wordt die eigenschap gezocht in het bereik dat aan het element is gekoppeld. Als de eigenschap ontbreekt, gaat de zoektocht verder in het bovenliggende bereik en blijft deze omhoog klimmen tot het rootbereik is bereikt. JavaScriptontwikkelaars kennen dit gedrag als prototypische overerving, en onderliggende scopes erven op precies die manier van hun ouders.

Het onderstaande voorbeeld plaatst de ene controller binnen de andere, zodat je kunt zien hoe overerving werkt.

<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 Uitleg:

1. ParentCtrl definieert siteName binnen zijn eigen reikwijdte.
2. ChildCtrl definieert nooit siteName, maar de binnenste div print nog steeds Guru99 omdat de opzoekactie naar het bovenliggende bereik gaat.
3. lesson Het bestaat alleen binnen de scope van het onderliggende element, dus de ouder-div kan het niet lezen.

Welke richtlijnen creëren een nieuw bereik?

• ng-controller: Het creëert een subscope voor het element waarop het geplaatst wordt.
• ng-repeat: Er wordt per iteratie één subbereik aangemaakt, waardoor elke rij verschillende waarden voor dezelfde expressie kan bevatten.
• Aangepaste instructies: kan een kindonderzoek aanvragen, of een geïsoleerd een bereik dat bewust niet van zijn ouder overerft.
• Componentrichtlijnen: alles wat geregistreerd is bij de .component() De helper ontvangt altijd een isolatiebereik.

Omdat subscopes van onder naar boven worden gelezen, vragen ontwikkelaars zich vaak af waar het hoogste niveau van die keten zich bevindt. Dat object op het hoogste niveau wordt $rootScope genoemd.

$scope versus $rootScope: Wat is het verschil?

AngularJS $rootScope `$rootScope` is het bereik voor de gehele applicatie. Een applicatie kan slechts één `$rootScope` hebben en deze wordt gebruikt als een globale variabele. Elke `$scope` is een subbereik en `$rootScope` is het bovenliggende bereik in de boomstructuur. De onderstaande tabel vergelijkt de twee objecten.

Gebruik $rootScope spaarzaam. Alles wat daarin wordt geplaatst, blijft bestaan ​​voor de hele applicatie en is overal leesbaar, dus een gedeelde service is meestal een veiligere plek voor globale statusinformatie. De officiële $rootScope-referentie Geeft de volledige API weer.

Weten waar de data zich bevindt, is de ene helft van het werk. De andere helft is de scope leren hoe te reageren wanneer de gebruiker iets doet.

Gedrag instellen of toevoegen in AngularJS

Om op gebeurtenissen te reageren of een soort berekening/verwerking in de weergave uit te voeren, moeten we gedrag aan de scope geven.

Er worden gedragingen toegevoegd aan scopeobjecten om te reageren op specifieke gebeurtenissen die door de weergave kunnen worden geactiveerd. Zodra het gedrag in de controller is gedefinieerd, is het toegankelijk via de weergave.

Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.

<!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 Uitleg:

1. We creëren een gedrag met de naam “fullName”. Dit gedrag is een functie die twee parameters accepteert (voornaam,achternaam).
2. Het gedrag retourneert vervolgens de aaneenschakeling van deze twee parameters.
3. In de weergave roepen we het gedrag aan en geven we 2 waarden door: "Guru" en "99", die als parameters aan het gedrag worden doorgegeven.

Als de opdracht succesvol is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert.

Output:

In de browser ziet u een samenvoeging van beide waarden. Guru & 99 die werden doorgegeven aan het gedrag in de controleur.

Bindingen zoals de bovenstaande worden automatisch vernieuwd, en het mechanisme dat dit mogelijk maakt, is de moeite waard om te begrijpen voordat een applicatie groot wordt.

Waarom Scope Watchers en de Digest-cyclus belangrijk zijn

AngularJS zorgt ervoor dat de weergave synchroon blijft met de scope door middel van dirty checking in plaats van change events. Drie scope API's sturen dit proces aan:

• $watch: registreert een luisteraar voor een expressie. Interpolaties zoals {{fullName}} Registreer volgers voor u tijdens het koppelen van sjablonen.
• $apply: Deze functie komt in de AngularJS-uitvoeringscontext terecht, evalueert je code en activeert vervolgens een digest. Het is alleen nodig binnen aangepaste event-callbacks of callbacks van externe bibliotheken, omdat ingebouwde directives deze functie al aanroepen.
• $digest: Doorloopt elke watcher op $rootScope en de bijbehorende children, vergelijkt de huidige waarde met de vorige en herhaalt dit totdat het model niet meer verandert.

Omdat een digest meerdere keren kan worden uitgevoerd, moeten watch-expressies efficiënt blijven. Vermijd toegang tot de DOM binnen deze expressies, aangezien het lezen van de DOM vele malen trager is dan het lezen van een JavaScripteigenschap.

De nauwkeurigheid van de bewaking heeft ook invloed op de kosten. Bewaken op basis van referentie is de snelste methode en detecteert alleen een wijziging wanneer de volledige waarde wordt vervangen. $watchCollection Deze methode registreert items die zijn toegevoegd, verwijderd of opnieuw geordend binnen een array of object. Het observeren op basis van waarde doorloopt een geneste structuur bij elke digest en is de meest kostbare optie, dus gebruik deze als laatste.

Veelgestelde vragen