Controller as Syntax in AngularJS
Wir werden die controller as-Syntax in AngularJS mit Beispielen vorstellen.
Controller as-Syntax in AngularJS
In der Version 1.1.5 von AngularJS wurde die Syntax Controller as eingeführt. Es hat einen erheblichen Einfluss darauf, wie wir über AngularJS denken.
Dies wurde als experimentelles Feature hinzugefügt. Dies ist eine wesentliche Funktion und hilft uns, Controller-Funktionen schneller und einfacher zu nutzen.
Wir können die Syntax controller as verwenden, um den Controller aufzurufen und direkt auf den Controller zuzugreifen. Lassen Sie uns ein Beispiel durchgehen und einen neuen Controller mit einer einfachen Funktion zum Drucken eines Namens erstellen.
Lassen Sie uns ein neues Projekt in AngularJS erstellen und ein Beispiel für die Syntax controller as durchgehen. Zuerst fügen wir die AngularJS-Bibliothek mit script-Tags hinzu.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Jetzt definieren wir die AngularJS-Anwendung mit ng-app.
<body ng-app="">
...
</body>
Wir erstellen eine script.js-Datei und erstellen einen Controller. Dieser Controller verfügt über eine Funktion getName, die sich wie unten gezeigt bei der Konsole anmeldet.
import angular from 'angular';
angular.module('app', []).controller('nameController', function() {
this.getName = function(){
console.log("Activated!")
}
});
Das Frontend für unsere Anwendung erstellen wir in index.html. Wie unten gezeigt, erstellen wir eine Schaltfläche, die die Funktion getName aufruft, wenn ein Benutzer darauf klickt.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="app" ng-cloak>
<div ng-controller="nameController as name">
<input type="button" value="Get Name" ng-click="name.getName()">
</div>
</body>
</html>
Ausgabe:
Konsolenausgabe:
Das obige Beispiel zeigt die controller as-Syntax, die es uns leicht macht, die Funktion aufzurufen und uns den Namen des Controllers als Schlüsselwort oder ein kurzes Wort zu merken, das einfach eingegeben werden kann.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn