Wat is $ Scope in AngularJS? Tutorial met voorbeeld

Wat is $ scope in AngularJS?

$ scope in AngularJS is een ingebouwd object dat in feite de "controller" en de "view" bindt. Men kan lidvariabelen definiëren in het bereik binnen de controller die vervolgens toegankelijk zijn voor de weergave.

Beschouw het onderstaande voorbeeld:

angular.module('app',[]).controller('HelloWorldCntrl'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 scope-object

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 verstrekken.

Gedragingen worden toegevoegd aan bereikobjecten om te reageren op specifieke gebeurtenissen die kunnen worden geactiveerd door de weergave. 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.

Guru99 Global Event
{{fullName("Guru","99")}}

Code Verklaring:

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

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

Uitgang:

In de browser ziet u een aaneenschakeling van beide waarden van Guru & 99 die zijn doorgegeven aan het gedrag in de controller.

Overzicht

• Aan het scope-object kunnen verschillende lidvariabelen worden toegevoegd, waarnaar vervolgens in de weergave kan worden verwezen.
• Gedrag kan worden toegevoegd om te werken met gebeurtenissen die worden gegenereerd voor acties die door de gebruiker worden uitgevoerd.
• De angularjs $rootScopeis het toepassingsgebied voor de hele applicatie. Een applicatie kan maar één $ rootScope hebben en wordt gebruikt als een globale variabele. In Angular JS $ zijn scopes child scopes en $ rootScope is parent scope