Hvad er $scope i AngularJS? Vejledning med eksempel

Hvad er $scope i AngularJS?

$scope i AngularJS er et indbygget objekt, som grundlæggende binder "controlleren" og "visningen". Man kan definere medlemsvariabler i omfanget i controlleren, som derefter kan tilgås af visningen.

Hver controller i en AngularJS Applikationen modtager sin egen $scope-instans via afhængighedsinjektion. Alt, hvad du knytter til det objekt, bliver synligt for den skabelon, som controlleren styrer, så $scope fungerer som den delte datamodel, der sidder mellem din JavaScriptlogik og din HTML-markup.

Overvej eksemplet nedenfor:

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

Code Forklaring:

1. Navnet på modulet er "app"
2. Navnet på controlleren er "HelloWorldCtrl"
3. Scope-objekt er hovedobjektet, som bruges til at videregive information fra controlleren til visningen.
4. Medlemsvariabel tilføjet til scope-objekt

En enkelt controller og en enkelt visning er kun halvdelen af ​​billedet. Virkelige applikationer indlejrer controllere, gentager lister og genbruger widgets, hvilket betyder, at der findes flere scopes på én gang.

Hvordan omfangshierarki og arv fungerer i AngularJS

Hver AngularJS-applikation har præcis ét rodscope og kan have et hvilket som helst antal underordnede scopes. Direktiver opretter disse underordnede scopes og knytter dem til det DOM-element, de dekorerer, så scope-træet afspejler strukturen på den gengivne side.

Når AngularJS evaluerer et udtryk som f.eks. {{siteName}}, søger den først efter den egenskab på det scope, der er knyttet til elementet. Hvis egenskaben mangler, flyttes opslaget til det overordnede scope og fortsætter med at klatre, indtil det når rodscopet. JavaScriptudviklere kender denne adfærd som prototypisk arv, og underordnede scopes arver fra deres forældre på præcis den måde.

Eksemplet nedenfor indlejrer én controller i en anden, så du kan se nedarvning ske.

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

1. ParentCtrl definerer siteName på sit eget omfang.
2. ChildCtrl definerer aldrig siteName, men den indre div udskriver stadig Guru99 fordi opslaget går op til det overordnede omfang.
3. lesson lever kun på det underordnede scope, så den overordnede div kan ikke læse den.

Hvilke direktiver skaber et nyt anvendelsesområde?

• ng-controller: opretter et underordnet scope for det element, det er placeret på.
• ng-gentagelse: opretter ét underordnet omfang pr. iteration, hvilket er grunden til, at hver række kan indeholde forskellige værdier for det samme udtryk.
• Brugerdefinerede direktiver: kan anmode om et underordnet omfang eller en isolere et område, der bevidst ikke arver fra sin overordnede.
• Komponentdirektiver: noget, der er registreret hos .component() Hjælperen modtager altid et isoleret oscilloskop.

Fordi underordnede scopes læser opad, spekulerer udviklere ofte på, hvor toppen af ​​den kæde sidder. Det øverste objekt kaldes $rootScope.

$scope vs. $rootScope: Hvad er forskellen?

AngularJS $rootScope er omfanget for hele applikationen. En applikation kan kun have én $rootScope, og den bruges som en global variabel. Hver $scope er et underordnet omfang, og $rootScope er det overordnede objekt øverst i træet. Tabellen nedenfor sammenligner de to objekter.

Brug $rootScope sparsomt. Alt, der placeres der, forbliver aktivt for hele applikationen og kan læses overalt, så en delt tjeneste er normalt et sikrere hjem for global tilstand. Den officielle $rootScope-reference viser den fulde API.

At vide, hvor data befinder sig, er den ene halvdel af jobbet. Den anden halvdel er at lære brugeren, hvordan man reagerer, når brugeren gør noget.

Opsætning eller tilføjelse af adfærd i AngularJS

For at reagere på hændelser eller udføre en form for beregning/behandling i visningen, skal vi angive adfærd til scopet.

Adfærd føjes til scope-objekter for at reagere på specifikke hændelser, der kan udløses af visningen. Når adfærden er defineret i controlleren, kan den tilgås af visningen.

Lad os se på et eksempel på, hvordan vi kan opnå dette.

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

1. Vi opretter en adfærd kaldet "fuldt navn". Denne adfærd er en funktion, som accepterer 2 parametre (fornavn, efternavn).
2. Funktionen returnerer derefter sammenkædningen af ​​disse 2 parametre.
3. I visningen kalder vi adfærden og sender 2 værdier af "Guru" og "99", som sendes som parametre til adfærden.

Hvis kommandoen udføres med succes, vil følgende output blive vist, når du kører din kode i browseren.

Output:

I browseren vil du se en sammenkædning af begge værdier af Guru & 99, som blev videregivet til adfærden i controller.

Bindinger som den ovenfor opdateres af sig selv, og det maskineri, der får det til at ske, er værd at forstå, før en applikation vokser sig stor.

Hvorfor Scope Watchers og Digest Cycle er vigtige

AngularJS holder visningen i trit med scopet gennem dirty checking snarere end gennem ændringshændelser. Tre scope-API'er styrer denne proces:

• $ur: registrerer en lytter for et udtryk. Interpolationer som f.eks. {{fullName}} Registrer dine observatører under skabelontilknytning.
• $anvend: går ind i AngularJS-eksekveringskonteksten, evaluerer din kode og udløser derefter et digest. Det er kun nødvendigt i brugerdefinerede event-callbacks eller callbacks fra tredjepartsbiblioteker, fordi indbyggede direktiver allerede kalder det.
• $digest: gennemgår hver observatør på $rootScope og dens undergrupper, sammenligner den aktuelle værdi med den forrige, og gentager, indtil modellen holder op med at ændre sig.

Da et digest kan køre flere gennemløb, skal overvågningsudtryk forblive billige. Undgå DOM-adgang i dem, da læsning af DOM'en er flere størrelsesordener langsommere end læsning af en JavaScript-egenskab.

Dybdeobservation påvirker også prisen. At observere via reference er hurtigst og bemærker kun, når hele værdien er erstattet. $watchCollection bemærker elementer tilføjet, fjernet eller omarrangeret i et array eller objekt. Observation efter værdi gennemgår en indlejret struktur på hver digest og er den dyreste løsning, så grib efter den sidst.

Ofte Stillede Spørgsmål