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>

名: <input><br>
名: <input><br>
<br>
姓名: {{firstName + " " + lastName}}

</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, 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>

名: <input><br>
姓: <input><br>
<br>
姓名: {{fullName()}}

</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;personCtrl&#39;, 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 <script>-Tag In der externen Datei von personController.js: </script>

<p>

First Name: <input><br>
 Last Name: <input><br>
<br>
 Full Name: {{firstName + " " + lastName}}

</p>

<script></script>

Andere Beispiele

Die folgenden Beispiele erstellen 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 unter NamenController.js:

Verwenden Sie dann die Controller-Datei in der Anwendung:

<p>

</p>

   
•      {{ x.name + ', ' + x.country }}   

<script></script>

Okay, dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur chinesischen PHP-Website Lernen Sie aus dem AngularJS-Benutzerhandbuch). Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie verwende ich den AngularJS-Controller? Der AngularJS-Controller steuert die Auflösung der AngularJS-Anwendungsinstanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!