Die „Controller as“-Syntax von AngularJS verstehen

Einführung

AngularJS hat eine neue Syntax zum Definieren von Controllern eingeführt, „Controller as“, die einige Probleme verursacht hat Fragen zu seinem Zweck. Ziel dieses Artikels ist es, die Gründe für diese Syntax und ihre Vorteile zu verdeutlichen.

Controller-as-Syntax

Mit der „Controller-as“-Syntax können Sie einen Controller instanziieren und ihn einer Variablen im aktuellen zuweisen Umfang. Zum Beispiel:

controller('InvoiceController as invoice')

Dieser Code weist Angular an, eine Instanz des InvoiceControllers zu erstellen und diese in der Rechnungsvariablen innerhalb des aktuellen Bereichs zu speichern.

Entfernen von $scope aus Controller

Ein bemerkenswerter Unterschied bei der Syntax „controller as“ besteht darin, dass der Parameter $scope aus der Controllerdefinition entfernt wird. Dies ermöglicht sauberere und prägnantere Controller:

// With $scope
function InvoiceController($scope) {
  // Do something with $scope.qty
}

// With controller as
function InvoiceController() {
  // Do something with this.qty
}

Aliase in der Ansicht zuweisen

Das Entfernen von $scope aus dem Controller vereinfacht zwar den Code, erfordert aber die Angabe eines Alias ​​in der Ansicht:

// With $scope


// With controller as

Zwecke der Controller-as-Syntax

Die „Controller-as“-Syntax wurde hauptsächlich aus folgenden Gründen eingeführt:

• Entfernung von $scope: Einige Entwickler ziehen es vor, die $scope-Syntax zu vermeiden, weil sie glauben, dass sie das verschleiert Quelle der Eigenschaften.
• Klarheit der Eigenschaftsherkunft: Durch die Verwendung von Aliasen in der Ansicht wird klar, welche Eigenschaften zu welchem ​​Controller gehören. Dies ist besonders nützlich, wenn Controller verschachtelt werden.
• Vermeidung von Punktregelproblemen: Die Syntax „Controller als“ hilft, Probleme mit der „Punktregel“ von AngularJS zu vermeiden, die den Zugriff auf Eigenschaften erschweren können von übergeordneten Controllern. Es ermöglicht einen klaren und hierarchischen Zugriff auf Controller-Eigenschaften.