AngularJS-Controller
AngularJS-Controller steuern die Daten von AngularJS-Anwendungen.
AngularJS-Controller sind reguläre JavaScript-Objekte .
AngularJS-Controller
AngularJS-Anwendungen werden von Controllern gesteuert.
Die Direktive ng-controller definiert den Anwendungscontroller.
Ein Controller ist ein JavaScript-Objekt , das von einem Standard-JavaScript -Objektkonstruktor erstellt wird .
AngularJS-Beispiel
<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>
Anwendung erklärt:
Die AngularJS-Anwendung wird durch ng-app="myApp" definiert . Die Anwendung wird innerhalb des <div> ausgeführt.
Das Attribut ng-controller="myCtrl" ist eine AngularJS-Direktive. Es definiert einen Controller.
Die myCtrl- Funktion ist eine JavaScript-Funktion.
AngularJS ruft den Controller mit einem $scope- Objekt auf.
In AngularJS ist $scope das Anwendungsobjekt (der Eigentümer von Anwendungsvariablen und -funktionen).
Der Controller erstellt zwei Eigenschaften (Variablen) im Gültigkeitsbereich ( firstName und lastName ).
Die ng-model- Direktiven binden die Eingabefelder an die Controller-Eigenschaften (firstName und lastName).
Controller-Methoden
Das obige Beispiel zeigt ein Controller-Objekt mit zwei Eigenschaften: lastName und firstName.
Ein Controller kann auch Methoden (Variablen als Funktionen) haben:
AngularJS-Beispiel
<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>
Controller in externen Dateien
In größeren Anwendungen ist es üblich, Controller in externen Dateien zu speichern.
Kopieren Sie einfach den Code zwischen den <script> -Tags in eine externe Datei namens personController.js :
AngularJS-Beispiel
<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 src="personController.js"></script>
Ein anderes Beispiel
Für das nächste Beispiel erstellen wir eine neue Controller-Datei:
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
Speichern Sie die Datei als namesController.js :
Und verwenden Sie dann die Controller-Datei in einer Anwendung:
AngularJS-Beispiel
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>