Wat is $Scope in AngularJS? Tutorial met functie (voorbeelden)

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.

Beschouw het onderstaande voorbeeld:

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

Code Uitleg:

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

Gedrag instellen of toevoegen

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:

We creëren een gedrag met de naam “fullName”. Dit gedrag is een functie die twee parameters accepteert (voornaam,achternaam).
Het gedrag retourneert vervolgens de aaneenschakeling van deze twee parameters.
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.

Samenvatting

Er kunnen verschillende lidvariabelen aan het scope-object worden toegevoegd, waarnaar vervolgens in de weergave kan worden verwezen.
Er kan gedrag worden toegevoegd om te werken met gebeurtenissen die worden gegenereerd voor acties die door de gebruiker worden uitgevoerd.
De angularjs $rootScope is de reikwijdte voor de gehele toepassing. Een applicatie kan slechts één $rootScope hebben en wordt gebruikt als een globale variabele. In Angular JS zijn $scopes onderliggende scopes en is $rootScope de parent scope

Wat is $Scope in AngularJS? Tutorial met functie (voorbeelden)