Der AngularJS-Controller wird zur Steuerung der Daten von AngularJS-Anwendungen verwendet.
AngularJS-Controller sind gewöhnliche JavaScript-Objekte.
AngularJS-Controller
AngularJS-Anwendungen werden über Controller gesteuert.
Die ng-controller-Direktive definiert einen Anwendungscontroller.
Ein Controller ist ein JavaScript-Objekt, das mit Standard-JavaScript-Objektkonstruktoren erstellt werden kann.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Code-Erklärung:
Die AngularJS-Anwendung wird durch ng-app="myApp" definiert. Der effektive Anwendungsbereich liegt im
ng-controller="myCtrl"-Attribut ist eine AngularJS-Direktive, die einen Controller definiert.
Die myStrg-Funktion ist eine gewöhnliche JavaScript-Funktion.
AngularJS verwendet das $scope-Objekt, um Controller aufzurufen.
In AngularJS ist $scope ein Anwendungsobjekt (d. h. der Eigentümer von Anwendungsvariablen und -funktionen).
Der Controller enthält zwei Eigenschaften (oder Variablen): firstName und lastName. Sie werden an das $scope-Objekt angehängt.
Die ng-model-Direktive bindet den Wert des Eingabe-Tags an die Eigenschaften des Controllers (Vorname und Nachname).
Controller-Methoden
Das obige Beispiel zeigt, dass das Controller-Objekt zwei Eigenschaften enthält: lastName und firstName.
Controller können auch Methoden enthalten (Variablen Funktionen zuweisen):
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
Legen Sie den Controller in einer externen Datei ab
In großen Anwendungen wird Controller-Code oft in externe Dateien geschrieben.
Kopieren Sie den Code im
