AngularJS Controller

AngularJS-Controllersteuerndie Daten von AngularJS-Anwendungen.

AngularJS-Controller sind normaleJavaScript-Objekte。

AngularJS-Controller

AngularJS-Anwendungen werden von Controllern gesteuert.

ng-controllerDie Direktive definiert den Anwendungscontroller.

Controller sindJavaScript-Objekte, die durch den Standard-JavaScript-Objektkonstruktor⟦⟧erstellt werden.created.

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="myCtrl">

Vorname:<input type="text" ng-model="firstName"><br>
Nachname:<input type="text" ng-model="lastName"><br>
<br>
Vollständiger Name:{{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

Selbst ausprobieren »

Anwendungsanalyse:

AngularJS-Anwendung wird durchng-appdefiniert. Die Anwendung läuft in <div>.

ng-controller="myCtrl"Das Attribut ist eine AngularJS-Direktive. Es wird verwendet, um einen Controller zu definieren.

myCtrlDie Funktion ist eine JavaScript-Funktion.

AngularJS verwendet$scopedas Objekt, um den Controller aufzurufen.

In AngularJS ist $scope ein Anwendungsobjekt (gehört zu Anwendungsvariablen und -funktionen).

Der$scopedes Controllers (entspricht Scope, Kontrollbereich) ist ein Objekt, das verwendet wird, um das AngularJS-Modell zu speichern.

Der Controller erstellt zwei Eigenschaften im ScopefirstNameundlastName).

ng-modelDie Direktive bindet Eingabefelder an die Eigenschaften des Controllers (firstName und lastName).

Controller-Methoden

Das obige Beispiel zeigt ein Controller-Objekt mit zwei Eigenschaften, lastName und firstName.

Controller können auch Methoden haben (Variablen und Funktionen):

AngularJS-Beispiel

<div ng-app="myApp" ng-controller="personCtrl">

Vorname:<input type="text" ng-model="firstName"><br>
Nachname:<input type="text" ng-model="lastName"><br>
<br>
Vollständiger 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>

Selbst ausprobieren »

Controller in externen Dateien

In großen Anwendungen werden Controller meist in externen Dateien gespeichert.

Kopieren Sie den Code im <script>-Tag einfach in die benanntepersonController.jsexterne Datei: Das ist schon alles:

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>

Selbst ausprobieren »

Weitere Beispiele

Das folgende Beispiel erstellt 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 alsnamesController.js:

Verwenden Sie die Controller-Datei dann in der 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>

Selbst ausprobieren »
Andere Erweiterungen