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:

$scope in AngularJS

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

Code Verklaring:

  1. De naam van de module is “app”
  2. De naam van de controller is “HelloWorldCntrl”
  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

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.

Gedrag instellen of toevoegen

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

  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 van "Guru" en "99" door, die als parameters aan het gedrag worden doorgegeven.

Als de opdracht succesvol wordt uitgevoerd, verschijnt het bericht following De uitvoer wordt weergegeven wanneer u uw code in de browser uitvoert.

Output:

Gedrag instellen of toevoegen

In de browser ziet u een aaneenschakeling van zowel de waarden van Guru als 99 die zijn doorgegeven aan het gedrag in de controleur.

Samengevat

  • 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.
  • Het 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