Was ist $ Scope in AngularJS? Tutorial mit Beispiel

Inhaltsverzeichnis:

Anonim

Was ist $ scope in AngularJS?

$ scope in AngularJS ist ein integriertes Objekt, das im Grunde den "Controller" und die "Ansicht" verbindet. Man kann Mitgliedsvariablen im Bereich innerhalb des Controllers definieren, auf die dann von der Ansicht zugegriffen werden kann.

Betrachten Sie das folgende Beispiel:

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

Code Erläuterung:

  1. Der Name des Moduls lautet "app"
  2. Der Name des Controllers lautet "HelloWorldCntrl".
  3. Das Bereichsobjekt ist das Hauptobjekt, mit dem Informationen von der Steuerung an die Ansicht übergeben werden.
  4. Mitgliedsvariable zum Bereichsobjekt hinzugefügt

Verhalten einrichten oder hinzufügen

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

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

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

Guru99

Guru99 Global Event

{{fullName("Guru","99")}}

Code Erläuterung:

  1. Wir erstellen ein Verhalten namens "fullName". Dieses Verhalten ist eine Funktion, die 2 Parameter akzeptiert (Vorname, Nachname).
  2. Das Verhalten gibt dann die Verkettung dieser beiden Parameter zurück.
  3. In der Ansicht nennen wir das Verhalten 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.

Ausgabe:

Im Browser sehen Sie eine Verkettung der beiden Werte von Guru & 99, die an das Verhalten im Controller übergeben wurden.

Zusammenfassung

  • Dem Bereichsobjekt können verschiedene Elementvariablen hinzugefügt werden, auf die dann in der Ansicht verwiesen werden kann.
  • Verhalten kann hinzugefügt werden, um mit Ereignissen zu arbeiten, die für vom Benutzer ausgeführte Aktionen generiert werden.
  • Der Winkel $rootScopeist der Bereich für die gesamte Anwendung. Eine Anwendung kann nur ein $ rootScope haben und wird wie eine globale Variable verwendet. In Angular JS sind $ scopes untergeordnete Bereiche und $ rootScope der übergeordnete Bereich