Heim > Artikel > Web-Frontend > Eine kurze Einführung in die Verwendung von AngularJS-Controllern_AngularJS

Eine kurze Einführung in die Verwendung von AngularJS-Controllern_AngularJS

WBOYOriginal: 2016-05-16 15:54:39967Durchsuche

AngularJS-Anwendungen basieren hauptsächlich auf Controllern, um den Datenfluss innerhalb der Anwendung zu steuern. Controller werden mit der ng-controller-Direktive definiert. Ein Controller ist eine Funktion, die Eigenschaften/Eigenschaften und JavaScript-Objekte enthält. Jeder Controller akzeptiert den Parameter $scope, um die Anwendung/das Modul anzugeben, die/das vom Controller gesteuert wird.

<div ng-app="" ng-controller="studentController">
...
</div>

Hier haben wir den Controller studentController mithilfe der ng-controller-Direktive deklariert. Als nächsten Schritt definieren wir studentController wie folgt

<script>
function studentController($scope) {
  $scope.student = {
   firstName: "yiibai",
   lastName: "com",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>

studentController definiert $scope als JavaScript-Objektparameter.
$scope repräsentiert die Anwendung unter Verwendung des studentController-Objekts.
$scope.student ist eine Eigenschaft des studentController-Objekts.
FirstName und lastName sind zwei Eigenschaften des $scope.student-Objekts. Wir haben ihnen Standardwerte übergeben.
fullName ist eine Funktion des $scope.student-Objekts, dessen Aufgabe darin besteht, den zusammengeführten Namen zurückzugeben.
In der fullName-Funktion möchten wir nun, dass das student-Objekt den kombinierten Namen zurückgibt.
Hinweis: Sie können das Controller-Objekt auch in einer separaten JS-Datei definieren und die entsprechende Datei in die HTML-Seite einfügen.

Jetzt können Sie das studentController-Attribut mit ng-model oder mit Ausdrücken wie folgt verwenden.

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

Es gibt jetzt zwei Eingabefelder: student.firstName und student.lastname.
Es gibt jetzt die Methode student.fullName() zu HTML hinzugefügt.
Solange Sie nun das eingeben, was Sie in die Eingabefelder für Vorname und Nachname eingegeben haben, können Sie sehen, dass die beiden Namen automatisch aktualisiert werden.

Beispiel

Das folgende Beispiel demonstriert die Verwendung eines Controllers.
Der Inhalt der Datei testAngularJS.html lautet wie folgt:

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Ausgabe

Öffnen Sie textAngularJS.html in einem Webbrowser und sehen Sie die folgenden Ergebnisse:

2015616120726250.png (679×365)

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Einführung in die JavaScript-Unterstützung für das traditionelle Dokumentobjektmodell_GrundkenntnisseNächster Artikel：Eine kurze Einführung in die JavaScript-Unterstützung für das traditionelle Dokumentobjektmodell_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen