Ce este $scope în AngularJS? Tutorial cu exemplu

Ce este $scope în AngularJS?

$scope în AngularJS este un obiect încorporat care leagă practic „controlerul” și „vizualizarea”. Se pot defini variabilele membre în domeniul de aplicare în cadrul controlerului, care pot fi apoi accesate de vizualizare.

Fiecare controler dintr-un AngularJS aplicația primește propria instanță $scope prin injectarea de dependențe. Orice atașați acelui obiect devine vizibil pentru șablonul pe care îl guvernează controlerul, astfel încât $scope se comportă ca modelul de date partajat care se află între dvs. JavaLogica scriptului și markup-ul HTML.

Luați în considerare exemplul de mai jos:

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

Code Explicaţie:

1. Numele modulului este „aplicație”
2. Numele controlerului este „HelloWorldCtrl”
3. Obiectul Scope este obiectul principal care este utilizat pentru a transmite informații de la controler către vizualizare.
4. Variabila membru adăugată la obiectul domeniului

Un singur controller și o singură vizualizare reprezintă doar jumătate din imagine. Aplicațiile reale imbricate controllere, repetă liste și reutilizează widget-uri, ceea ce înseamnă că există mai multe domenii de aplicare simultan.

Cum funcționează ierarhia domeniului de aplicare și moștenirea în AngularJS

Fiecare aplicație AngularJS are exact un singur domeniu de aplicare rădăcină și poate avea oricâte domenii de aplicare copil. Directivele creează aceste domenii de aplicare copil și le atașează elementului DOM pe care îl decorează, astfel încât arborele de domenii de aplicare să reflecte structura paginii randate.

Când AngularJS evaluează o expresie precum {{siteName}}, caută mai întâi proprietatea respectivă în domeniul de aplicare atașat elementului. Dacă proprietatea lipsește, căutarea se mută la domeniul de aplicare părinte și continuă să urce până ajunge la domeniul de aplicare rădăcină. JavaDezvoltatorii de scripturi cunosc acest comportament ca moștenire prototipală, iar domeniile de aplicare copil moștenesc de la părinții lor exact în acest fel.

Exemplul de mai jos imbrica un controler în altul, astfel încât să puteți urmări cum se produce moștenirea.

<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 Explicaţie:

1. ParentCtrl definește siteName pe propriul său domeniu de aplicare.
2. ChildCtrl niciodată nu definește siteName, totuși div-ul interior încă se afișează Guru99 deoarece căutarea merge până la domeniul de aplicare părinte.
3. lesson trăiește doar în domeniul de aplicare al copilului, deci div-ul părinte nu îl poate citi.

Ce directive creează un nou domeniu de aplicare?

• controler ng: creează un domeniu de aplicare copil pentru elementul pe care este plasat.
• ng-repeat: creează un domeniu copil per iterație, motiv pentru care fiecare rând poate conține valori diferite pentru aceeași expresie.
• Directive personalizate: poate solicita un domeniu de aplicare copil sau un izola domeniu de aplicare care în mod deliberat nu moștenește de la părintele său.
• Directivele componentelor: orice este înregistrat la .component() Helper-ul primește întotdeauna un domeniu de aplicare izolat.

Deoarece domeniile de aplicare copil citesc în sus, dezvoltatorii se întreabă adesea unde se află vârful acelui lanț. Obiect de nivel superior se numește $rootScope.

Care este diferența între $scope și $rootScope?

AngularJS $rootScope este domeniul de aplicare pentru întreaga aplicație. O aplicație poate avea un singur $rootScope și este utilizat ca o variabilă globală. Fiecare $scope este un domeniu de aplicare copil, iar $rootScope este părintele din vârful arborelui. Tabelul de mai jos compară cele două obiecte.

Folosește $rootScope cu moderație. Orice element plasat acolo rămâne valabil pentru întreaga aplicație și este lizibil peste tot, așa că un serviciu partajat este de obicei o casă mai sigură pentru starea globală. Referință $rootScope listează API-ul complet.

Cunoașterea locului în care se află datele este o jumătate din sarcină. Cealaltă jumătate constă în a învăța osciloscopul cum să reacționeze atunci când utilizatorul face ceva.

Configurarea sau adăugarea unui comportament în AngularJS

Pentru a reacționa la evenimente sau pentru a executa un fel de calcul/procesare în vizualizare, trebuie să oferim un comportament sferei de aplicare.

Comportamentele sunt adăugate la obiectele de acoperire pentru a răspunde la evenimente specifice care pot fi declanșate de vizualizare. Odată ce comportamentul este definit în controler, acesta poate fi accesat de vizualizare.

Să ne uităm la un exemplu despre cum putem realiza acest lucru.

<!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 Explicaţie:

1. Creăm un comportament numit „fullName”. Acest comportament este o funcție care acceptă 2 parametri (firstName, lastname).
2. Comportamentul returnează apoi concatenarea acestor 2 parametri.
3. În vizualizare apelăm comportamentul și transmitem 2 valori ale lui „Guru„și „99”, care sunt transmise ca parametri ai comportamentului.

Dacă comanda este executată cu succes, următoarea ieșire va fi afișată atunci când rulați codul în browser.

ieșire:

În browser veți vedea o concatenare a ambelor valori ale Guru & 99 care au fost transmise comportamentului din controlor.

Legăturile precum cea de mai sus se actualizează singure, iar mecanismul care face acest lucru merită înțeles înainte ca o aplicație să crească.

De ce contează Scope Watchers și ciclul Digest

AngularJS menține vizualizarea în pas cu domeniul de aplicare prin verificare directă (dirty checking), mai degrabă decât prin evenimente de modificare. Trei API-uri pentru domeniul de aplicare determină acest proces:

• $watch: înregistrează un ascultător pentru o expresie. Interpolări precum {{fullName}} înregistrează observatori pentru tine în timpul legăturii șablonului.
• $aplică: intră în contextul de execuție AngularJS, evaluează codul și apoi declanșează un digest. Este necesar doar în cadrul apelurilor inverse de evenimente personalizate sau al apelurilor inverse din biblioteci terțe, deoarece directivele încorporate îl apelează deja.
• Rezumat: parcurge fiecare observator pe $rootScope și copiii săi, comparând valoarea curentă cu cea anterioară și repetă schimbarea până când modelul se oprește.

Deoarece un digest poate rula mai multe etape, expresiile de supraveghere trebuie să rămână ieftine. Evitați accesul la DOM în interiorul lor, deoarece citirea DOM este cu ordine de mărime mai lentă decât citirea unui JavaProprietatea scriptului.

Adâncimea de urmărire afectează și costul. Urmărirea prin referință este cea mai rapidă și observă doar atunci când întreaga valoare este înlocuită. $watchCollection observă elementele adăugate, eliminate sau reordonate în interiorul unui array sau obiect. Urmărirea după valoare traversează o structură imbricată la fiecare digest și este cea mai scumpă opțiune, așa că alegeți-o ultima.

Întrebări frecvente