Što je $scope u AngularJS-u? Vodič s primjerom

Što je $scope u AngularJS?

$scope u AngularJS je ugrađeni objekt koji u osnovi povezuje "kontroler" i "pogled". Moguće je definirati varijable članice u opsegu unutar kontrolera kojima se zatim može pristupiti iz pogleda.

Svaki kontroler u AngularJS Aplikacija dobiva vlastitu instancu $scope putem ubrizgavanja ovisnosti. Što god priložite tom objektu postaje vidljivo predlošku kojim upravlja kontroler, pa se $scope ponaša kao zajednički model podataka koji se nalazi između vašeg JavaLogika skripte i vaše HTML označavanje.

Razmotrite primjer u nastavku:

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

Code Objašnjenje:

1. Naziv modula je "app"
2. Naziv kontrolera je „HelloWorldCtrl“
3. Scope object je glavni objekt koji se koristi za prijenos informacija od kontrolera do pogleda.
4. Varijabla člana dodana je objektu opsega

Jedan kontroler i jedan prikaz su samo pola slike. Prave aplikacije ugnijezde kontrolere, ponavljaju popise i ponovno koriste widgete, što znači da istovremeno postoji nekoliko opsega.

Kako funkcionira hijerarhija opsega i nasljeđivanje u AngularJS-u

Svaka AngularJS aplikacija ima točno jedan korijenski opseg i može imati bilo koji broj podređenih opsega. Direktive stvaraju te podređene opsege i pridružuju ih DOM elementu koji ukrašavaju, tako da stablo opsega odražava strukturu prikazane stranice.

Kada AngularJS evaluira izraz kao što je {{siteName}}, prvo traži to svojstvo na opsegu pridruženom elementu. Ako svojstvo nedostaje, pretraga se pomiče na nadređeni opseg i nastavlja se penjati dok ne dođe do korijenskog opsega. JavaRazvojni programeri skripti poznaju ovo ponašanje kao prototipsko nasljeđivanje, a podređeni opsezi nasljeđuju od svojih roditelja upravo na taj način.

Primjer u nastavku ugnijezdi jedan kontroler unutar drugog tako da možete promatrati nasljeđivanje.

<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 Objašnjenje:

1. ParentCtrl definira siteName na vlastitom opsegu.
2. ChildCtrl nikad ne definira siteName, ali unutarnji div i dalje ispisuje Guru99 jer pretraga ide do roditeljskog opsega.
3. lesson nalazi se samo na podređenom opsegu, tako da ga roditeljski div ne može pročitati.

Koje direktive stvaraju novi opseg?

• ng-kontroler: stvara podređeni opseg za element na koji je postavljen.
• ng-ponovljenje: stvara jedan podređeni opseg po iteraciji, zbog čega svaki redak može sadržavati različite vrijednosti za isti izraz.
• Prilagođene direktive: može zatražiti podređeni opseg ili izolirati opseg koji namjerno ne nasljeđuje od svog roditelja.
• Direktive komponenti: bilo što registrirano kod .component() Pomoćnik uvijek prima izolirani opseg.

Budući da se podređeni opsezi čitaju prema gore, programeri se često pitaju gdje se nalazi vrh tog lanca. Taj objekt najviše razine naziva se $rootScope.

$scope vs $rootScope: Koja je razlika?

AngularJS $rootScope je opseg za cijelu aplikaciju. Aplikacija može imati samo jedan $rootScope i koristi se kao globalna varijabla. Svaki $scope je podređeni opseg, a $rootScope je roditelj na vrhu stabla. Tablica u nastavku uspoređuje dva objekta.

Koristite $rootScope štedljivo. Sve što se tamo stavi traje za cijelu aplikaciju i čitljivo je svugdje, pa je dijeljena usluga obično sigurniji dom za globalno stanje. Službeno $rootScope referenca navodi cijeli API.

Poznavanje mjesta na kojem se podaci nalaze je jedna polovica posla. Druga polovica je naučiti opseg kako reagirati kada korisnik nešto učini.

Postavljanje ili dodavanje ponašanja u AngularJS-u

Kako bismo reagirali na događaje ili izvršili neku vrstu izračuna/obrade u View-u, moramo osigurati ponašanje opsega.

Ponašanja se dodaju objektima opsega kako bi odgovorili na određene događaje koje može pokrenuti Pogled. Nakon što je ponašanje definirano u kontroleru, može mu se pristupiti putem pogleda.

Pogledajmo primjer kako to možemo postići.

<!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 Objašnjenje:

1. Mi stvaramo ponašanje koje se zove "puno ime". Ovo ponašanje je funkcija koja prihvaća 2 parametra (ime, prezime).
2. Ponašanje zatim vraća ulančavanje ova 2 parametra.
3. U prikazu pozivamo ponašanje i prosljeđujemo 2 vrijednosti "Guru" i "99" koji se prenose kao parametri ponašanju.

Ako je naredba uspješno izvršena, sljedeći će se izlaz prikazati kada pokrenete svoj kod u pregledniku.

Izlaz:

U pregledniku ćete vidjeti spajanje obje vrijednosti Guru & 99 koji su proslijeđeni ponašanju u kontrolor.

Veze poput gore navedene se osvježavaju same od sebe, a mehanizam koji to omogućuje vrijedi razumjeti prije nego što aplikacija postane velika.

Zašto su Scope Watchers i Digest Cycle važni

AngularJS održava prikaz u skladu s opsegom putem prljave provjere, a ne putem događaja promjene. Tri API-ja opsega pokreću taj proces:

• $watch: registrira slušatelja za izraz. Interpolacije kao što su {{fullName}} registrirajte promatrače za vas tijekom povezivanja predložaka.
• $primijeni: ulazi u kontekst izvršavanja AngularJS-a, procjenjuje vaš kod i zatim pokreće sažetak. Potreban je samo unutar povratnih poziva prilagođenih događaja ili povratnih poziva biblioteka trećih strana, jer ga ugrađene direktive već pozivaju.
• $digest: prolazi svakog promatrača na $rootScope i njegovu djecu, uspoređujući trenutnu vrijednost s prethodnom i ponavlja sve dok se model ne prestane mijenjati.

Budući da sažetak može proći nekoliko prolaza, izrazi za praćenje moraju ostati jeftini. Izbjegavajte pristup DOM-u unutar njih, budući da je čitanje DOM-a za redove veličine sporije od čitanja JavaSvojstvo skripte.

Dubina praćenja također utječe na cijenu. Praćenje po referenci je najbrže i primjećuje samo kada je cijela vrijednost zamijenjena. $watchCollection primjećuje dodane, uklonjene ili preuređene stavke unutar niza ili objekta. Promatranje po vrijednosti prolazi kroz ugniježđenu strukturu pri svakom sažetku i najskuplja je opcija, stoga posegnite za njom na kraju.

Pitanja i odgovori