Wie verwende ich den AngularJS-Controller? Der AngularJS-Controller steuert die Auflösung der AngularJS-Anwendungsinstanz

In diesem Artikel wird hauptsächlich die Verwendung des AngularJS-Controllers vorgestellt. AngularJS-Controller steuert die Daten der AngularJS-Anwendung. Werfen wir nun einen Blick auf diesen Artikel

Einführung in den AngularJS-Controller:

AngularJS-ControllerSteuerung Daten der AngularJS-Anwendung.

AngularJS-Controller sind reguläre JavaScript-Objekte.

AngularJS-Controller

AngularJS-Anwendungen werden von Controllern gesteuert. Die

ng-controller-Direktive definiert einen Anwendungscontroller.

Controller sind JavaScript-Objekte, die vom Standard-JavaScript-Objektkonstruktor erstellt werden.

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

名: <input type="text" ng-model="firstName"><br>
名: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</p>

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

App-Auflösung:

AngularJS-Anwendungen werden durch ng-app definiert. Die Anwendung läuft innerhalb von

. Das Attribut

ng-controller="myCtrl" ist eine AngularJS-Direktive. wird verwendet, um einen Controller zu definieren. Die Funktion

myStrg ist eine JavaScript-Funktion .

AngularJS verwendet das Objekt $scope , um Controller aufzurufen.

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

Der $scope des Controllers (entspricht Scope, Kontrollbereich) wird zum Speichern von AngularJS-Modellobjekten verwendet. Der

-Controller erstellt zwei Eigenschaften im Bereich (firstName und lastName). Die

ng-model-Direktive bindet das Eingabefeld an die Eigenschaften des Controllers (Vorname und Nachname). (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte AngularJS Development Manual auf der chinesischen PHP-Website, um mehr zu erfahren)

Controller-Methode

Das obige Beispiel zeigt eine Methode mit lastName und firstName. Controller-Objekt mit zwei Eigenschaften.

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

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</p>

<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 großen Anwendungen ist es üblich, Controller in einer externen Datei zu speichern.

Kopieren Sie einfach den Code im