Hva er $scope i AngularJS? Veiledning med eksempel

Hva er $scope i AngularJS?

$scope i AngularJS er et innebygd objekt som i utgangspunktet binder "kontrolleren" og "visningen". Man kan definere medlemsvariabler i omfanget i kontrolleren som deretter kan nås av visningen.

Hver kontroller i en AngularJS applikasjonen mottar sin egen $scope-instans gjennom avhengighetsinjeksjon. Alt du legger til det objektet blir synlig for malen kontrolleren styrer, slik at $scope oppfører seg som den delte datamodellen som ligger mellom din JavaSkriptlogikk og HTML-markupen din.

Tenk på eksemplet nedenfor:

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

Code Forklaring:

1. Navnet på modulen er "app"
2. Navnet på kontrolleren er «HelloWorldCtrl»
3. Scope-objekt er hovedobjektet som brukes til å overføre informasjon fra kontrolløren til visningen.
4. Medlemsvariabel lagt til scope-objekt

Én enkelt kontroller og én enkelt visning er bare halve bildet. Ekte applikasjoner hekker kontrollere, gjentar lister og gjenbruker widgeter, noe som betyr at flere omfang eksisterer samtidig.

Hvordan omfangshierarki og arv fungerer i AngularJS

Hver AngularJS-applikasjon har nøyaktig ett rot-scope og kan ha et hvilket som helst antall under-scopes. Direktiver oppretter disse under-scopene og knytter dem til DOM-elementet de dekorerer, slik at scope-treet speiler strukturen til den gjengitte siden.

Når AngularJS evaluerer et uttrykk som {{siteName}}, ser den først etter den egenskapen på omfanget som er knyttet til elementet. Hvis egenskapen mangler, flyttes oppslaget til det overordnede omfanget og fortsetter å klatre til det når rotomfanget. JavaSkriptutviklere kjenner denne oppførselen som prototypisk arv, og underordnede omfang arver fra foreldrene sine på akkurat den måten.

Eksemplet nedenfor nester én kontroller inni en annen, slik at du kan se arv skje.

<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å sitt eget omfang.
2. ChildCtrl definerer aldri siteName, men den indre div-en skrives fortsatt ut Guru99 fordi oppslaget går opp til det overordnede omfanget.
3. lesson lever bare på barneområdet, så den overordnede div-en kan ikke lese den.

Hvilke direktiver oppretter et nytt omfang?

• ng-kontroller: oppretter et underordnet omfang for elementet det er plassert på.
• ng-gjenta: oppretter ett underordnet omfang per iterasjon, og det er derfor hver rad kan inneholde forskjellige verdier for samme uttrykk.
• Tilpassede direktiver: kan be om et underordnet omfang, eller en isolere omfang som bevisst ikke arver fra sin overordnede.
• Komponentdirektiver: alt som er registrert hos .component() hjelperen mottar alltid et isolasjonsskop.

Fordi underordnede scopes leser oppover, lurer utviklere ofte på hvor toppen av den kjeden befinner seg. Det øverste objektet kalles $rootScope.

$scope vs. $rootScope: Hva er forskjellen?

AngularJS $rootScope er omfanget for hele applikasjonen. En applikasjon kan bare ha én $rootScope, og den brukes som en global variabel. Hver $scope er et underordnet omfang, og $rootScope er det overordnede objektet øverst i treet. Tabellen nedenfor sammenligner de to objektene.

Bruk $rootScope sparsomt. Alt som plasseres der lever for hele applikasjonen og er lesbart overalt, så en delt tjeneste er vanligvis et tryggere hjem for global tilstand. Den offisielle $rootScope-referanse lister opp hele API-et.

Å vite hvor dataene befinner seg er den ene halvdelen av jobben. Den andre halvdelen er å lære ingeniøren hvordan de skal reagere når brukeren gjør noe.

Konfigurere eller legge til virkemåte i AngularJS

For å reagere på hendelser eller utføre en form for beregning/behandling i visningen, må vi gi atferd til omfanget.

Atferd legges til scope-objekter for å svare på spesifikke hendelser som kan utløses av visningen. Når atferden er definert i kontrolleren, kan den nås av visningen.

La oss se på et eksempel på hvordan vi kan oppnå 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 oppretter en atferd kalt "fullnavn". Denne virkemåten er en funksjon som godtar 2 parametere (fornavn, etternavn).
2. Oppførselen returnerer deretter sammenkoblingen av disse 2 parameterne.
3. I visningen kaller vi oppførselen og sender inn to verdier av «Guru" og "99" som sendes som parametere til virkemåten.

Hvis kommandoen utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

I nettleseren vil du se en sammenkobling av begge verdiene til Guru og 99 som ble sendt til oppførselen i controller.

Bindinger som den ovenfor oppdateres av seg selv, og maskineriet som gjør at det skjer er verdt å forstå før en applikasjon vokser seg stor.

Hvorfor Scope Watchers og Digest-syklusen er viktige

AngularJS holder visningen i takt med omfanget gjennom dirty checking i stedet for gjennom endringshendelser. Tre omfangs-API-er driver denne prosessen:

• $klokke: registrerer en lytter for et uttrykk. Interpolasjoner som {{fullName}} registrere overvåkere for deg under malkobling.
• $søk: går inn i AngularJS-utførelseskonteksten, evaluerer koden din og utløser deretter et sammendrag. Dette er bare nødvendig i tilpassede hendelsestilbakekallinger eller tilbakekallinger fra tredjepartsbiblioteker, fordi innebygde direktiver allerede kaller det.
• $digest: går gjennom alle observatørene på $rootScope og dens barn, sammenligner gjeldende verdi med den forrige, og gjentar til modellen slutter å endre seg.

Fordi et sammendrag kan kjøre flere omganger, må overvåkingsuttrykk holde seg billige. Unngå DOM-tilgang inni dem, siden lesing av DOM-en er betydelig tregere enn å lese en JavaSkript-egenskap.

Dybdeobservasjon påvirker også kostnaden. Å observere med referanse er raskest og legger bare merke til når hele verdien er erstattet. $watchCollection legger merke til elementer som er lagt til, fjernet eller omorganisert i en matrise eller et objekt. Å observere etter verdi går gjennom en nestet struktur på hver sammendrag og er det dyreste alternativet, så grip etter det sist.

Spørsmål og svar