Was ist `$scope` in AngularJS? Tutorial mit Beispiel

Was ist $scope in AngularJS?

$scope in AngularJS ist ein eingebautes Objekt, das grundsätzlich den „Controller“ und die „Ansicht“ verbindet. Man kann Mitgliedsvariablen im Bereich innerhalb des Controllers definieren, auf die dann von der Ansicht zugegriffen werden kann.

Jeder Controller in einem AngularJS Die Anwendung erhält ihre eigene `$scope`-Instanz über Dependency Injection. Alles, was Sie diesem Objekt hinzufügen, wird für die Vorlage sichtbar, die der Controller steuert. Daher fungiert `$scope` als das gemeinsame Datenmodell, das zwischen Ihren Anwendungen liegt. JavaSkriptlogik und Ihr HTML-Markup.

Betrachten Sie das folgende Beispiel:

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

Code Erläuterung:

1. Der Name des Moduls ist „app“
2. Der Name des Controllers lautet „HelloWorldCtrl“.
3. Das Scope-Objekt ist das Hauptobjekt, das zur Weitergabe von Informationen vom Controller an die Ansicht verwendet wird.
4. Mitgliedsvariable zum Bereichsobjekt hinzugefügt

Ein einzelner Controller und eine einzelne Ansicht sind nur die halbe Wahrheit. Reale Anwendungen verschachteln Controller, wiederholen Listen und verwenden Widgets wieder, was bedeutet, dass mehrere Scopes gleichzeitig existieren.

Wie Scope-Hierarchie und Vererbung in AngularJS funktionieren

Jede AngularJS-Anwendung besitzt genau einen Root-Scope und kann beliebig viele Child-Scopes haben. Direktiven erstellen diese Child-Scopes und binden sie an das DOM-Element, das sie dekorieren, sodass die Scope-Hierarchie die Struktur der gerenderten Seite widerspiegelt.

Wenn AngularJS einen Ausdruck wie beispielsweise auswertet {{siteName}}Zuerst wird die Eigenschaft im zugehörigen Gültigkeitsbereich gesucht. Fehlt die Eigenschaft, wird die Suche im übergeordneten Gültigkeitsbereich fortgesetzt, bis der Wurzelbereich erreicht ist. JavaSkriptentwickler kennen dieses Verhalten als prototypische Vererbung, und Kind-Scopes erben genau auf diese Weise von ihren Eltern.

Das folgende Beispiel verschachtelt einen Controller in einen anderen, sodass Sie die Vererbung beobachten können.

<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 Erläuterung:

1. ParentCtrl definiert siteName in seinem eigenen Rahmen.
2. ChildCtrl definiert nie siteNameDennoch druckt der innere Div-Container weiterhin Guru99 weil die Suche bis zum übergeordneten Gültigkeitsbereich durchläuft.
3. lesson Es existiert nur im Kindbereich, daher kann der übergeordnete Div-Bereich es nicht lesen.

Welche Direktiven erzeugen einen neuen Gültigkeitsbereich?

• ng-controller: Erstellt einen untergeordneten Gültigkeitsbereich für das Element, auf dem es platziert ist.
• ng-repeat: erzeugt pro Iteration einen Kindbereich, weshalb jede Zeile unterschiedliche Werte für denselben Ausdruck enthalten kann.
• Benutzerdefinierte Direktiven: kann ein Kinder-Scope anfordern, oder ein isolieren Gültigkeitsbereich, der bewusst nicht von seinem übergeordneten Bereich erbt.
• Komponentendirektiven: alles, was bei der .component() Der Helfer erhält immer einen isolierten Gültigkeitsbereich.

Da untergeordnete Scopes nach oben gelesen werden, fragen sich Entwickler oft, wo sich das oberste Objekt dieser Kette befindet. Dieses Objekt der obersten Ebene wird $rootScope genannt.

$scope vs $rootScope: Worin besteht der Unterschied?

AngularJS $rootScope Der Stammbereich (`$rootScope`) umfasst die gesamte Anwendung. Eine Anwendung kann nur einen Stammbereich haben, der wie eine globale Variable verwendet wird. Jeder `$scope`-Bereich ist ein untergeordneter Bereich, und `$rootScope` ist der übergeordnete Bereich an der Spitze der Baumstruktur. Die folgende Tabelle vergleicht die beiden Objekte.

Verwenden Sie `$rootScope` sparsam. Alles, was dort abgelegt wird, ist für die gesamte Anwendung gültig und überall lesbar. Daher ist ein gemeinsam genutzter Dienst in der Regel ein sichererer Ort für den globalen Zustand. $rootScope-Referenz listet die vollständige API auf.

Zu wissen, wo Daten gespeichert sind, ist die eine Hälfte der Arbeit. Die andere Hälfte besteht darin, dem Scope beizubringen, wie er auf Benutzeraktionen reagieren soll.

Einrichten oder Hinzufügen von Verhalten in AngularJS

Um auf Ereignisse zu reagieren oder irgendeine Art von Berechnung/Verarbeitung in der Ansicht auszuführen, müssen wir dem Bereich Verhalten bereitstellen.

Verhaltensweisen werden zu Bereichsobjekten hinzugefügt, um auf bestimmte Ereignisse zu reagieren, die von der Ansicht ausgelöst werden können. Sobald das Verhalten im Controller definiert ist, kann die Ansicht darauf zugreifen.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

<!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 Erläuterung:

1. Wir erstellen ein Verhalten namens „fullName“. Bei diesem Verhalten handelt es sich um eine Funktion, die zwei Parameter akzeptiert (Vorname, Nachname).
2. Das Verhalten gibt dann die Verkettung dieser beiden Parameter zurück.
3. In der Ansicht rufen wir das Verhalten auf und übergeben 2 Werte von „Guru“ und “99 “, die als Parameter an das Verhalten übergeben werden.

Wenn der Befehl erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang:

Im Browser sehen Sie eine Verkettung beider Werte. Guru & 99, die an das Verhalten in der Controller.

Bindungen wie die oben genannte aktualisieren sich von selbst, und es lohnt sich, die Mechanismen, die dies ermöglichen, zu verstehen, bevor eine Anwendung groß wird.

Warum Scope Watchers und der Digest-Zyklus wichtig sind

AngularJS hält die Ansicht durch Änderungsprüfungen (Dirty Checking) anstatt durch Änderungsereignisse mit dem Gültigkeitsbereich (Scope) synchron. Drei Scope-APIs steuern diesen Prozess:

• $watch: Registriert einen Listener für einen Ausdruck. Interpolationen wie {{fullName}} Registrieren Sie Beobachter für Sie während der Vorlagenverknüpfung.
• $apply: Diese Funktion wechselt in den AngularJS-Ausführungskontext, wertet Ihren Code aus und löst anschließend einen Digest aus. Sie ist nur innerhalb benutzerdefinierter Ereignis-Callbacks oder Callbacks von Drittanbieterbibliotheken erforderlich, da integrierte Direktiven sie bereits aufrufen.
• $digest: Durchläuft jeden Beobachter auf $rootScope und seinen untergeordneten Objekten, vergleicht den aktuellen Wert mit dem vorherigen und wiederholt dies, bis sich das Modell nicht mehr ändert.

Da ein Digest mehrere Durchläufe durchlaufen kann, müssen Überwachungsausdrücke ressourcenschonend sein. Vermeiden Sie DOM-Zugriffe innerhalb dieser Ausdrücke, da das Lesen des DOM um Größenordnungen langsamer ist als das Lesen eines DOM-Objekts. JavaSkripteigenschaft.

Die Uhrentiefe beeinflusst auch die Kosten. Die Überwachung anhand einer Referenzuhr ist am schnellsten und fällt erst auf, wenn der gesamte Wert ersetzt wurde. $watchCollection Diese Methode erkennt hinzugefügte, entfernte oder neu angeordnete Elemente in einem Array oder Objekt. Die Wertüberwachung durchläuft bei jedem Digest eine verschachtelte Struktur und ist die aufwändigste Option; daher sollte sie zuletzt verwendet werden.

Häufig gestellte Fragen