AngularJS Controller steuern die Daten von AngularJS Anwendungen.
AngularJS Controller sind regelmäßige JavaScript - Objekte.
AngularJS Controller
AngularJS Anwendungen werden von Controllern gesteuert.
Die ng-Controller - Richtlinie definiert die Anwendungscontroller.
Ein Controller ist ein JavaScript - Objekt, durch eine Standard - JavaScript - Objekt erstellt worden ist .
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>
Versuch es selber " Anwendung erklärt:
Die AngularJS Anwendung wird durch ng-app = "myApp" definiert. Die Anwendung läuft innerhalb des <div>.
Der ng-Controller = "myCtrl" Attribut ist ein AngularJS Richtlinie. Es definiert einen Controller.
Die myCtrl Funktion ist eine JavaScript - Funktion.
AngularJS wird der Controller mit einem $ scope Objekt aufrufen.
In AngularJS ist $ Umfang das Anwendungsobjekt (der Besitzer der Anwendung Variablen und Funktionen).
Der Controller erzeugt zwei Eigenschaften (Variablen) in den Rahmen (Vorname und Nachname).
Die ng-Modell Richtlinien binden die Eingabefelder für die Controller - Eigenschaften (Vorname und Nachname).
Controller-Methoden
Das Beispiel demonstriert über ein Controller-Objekt mit zwei Eigenschaften: Nachname und Vorname.
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>
Versuch es selber " Controller in externen Dateien
In größeren Anwendungen ist es zu Speichercontroller in externen Dateien gemeinsam.
Kopieren Sie einfach den Code zwischen den <script> -Tags in eine externe Datei mit dem Namen 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: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
Versuch es selber " Ein anderes Beispiel
Für das nächste Beispiel werden wir eine neue Controller-Datei zu erstellen:
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 dann verwenden Sie 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>
Versuch es selber "