AngularJS - Controller

Die AngularJS-Anwendung stützt sich hauptsächlich auf Controller, um den Datenfluss in der Anwendung zu steuern. Ein Controller wird mit der Direktive ng-controller definiert . Ein Controller ist ein JavaScript-Objekt, das Attribute / Eigenschaften und Funktionen enthält. Jeder Controller akzeptiert $ scope als Parameter, der sich auf die Anwendung / das Modul bezieht, die der Controller verarbeiten muss.

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

Hier deklarieren wir einen Controller namens studentController unter Verwendung der ng-controller-Direktive. Wir definieren es wie folgt:

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

Der studentController ist als JavaScript-Objekt mit dem Argument $ scope definiert.
Der Bereich $ bezieht sich auf eine Anwendung, die das studentController-Objekt verwendet.
Der $ scope.student ist eine Eigenschaft des studentController-Objekts.
Der Vorname und der Nachname sind zwei Eigenschaften des Objekts $ scope.student. Wir übergeben ihnen die Standardwerte.
Die Eigenschaft fullName ist die Funktion des Objekts $ scope.student, das den kombinierten Namen zurückgibt.
In der Funktion fullName erhalten wir das Schülerobjekt und geben dann den kombinierten Namen zurück.
Als Hinweis können wir das Controller-Objekt auch in einer separaten JS-Datei definieren und auf diese Datei auf der HTML-Seite verweisen.

Jetzt können wir die student-Eigenschaft von studentController mit dem ng-Modell oder mit den folgenden Ausdrücken 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()}}

Wir haben student.firstName und student.lastname an zwei Eingabefelder gebunden.
Wir haben student.fullName () an HTML gebunden.
Wenn Sie jetzt etwas in die Eingabefelder für Vor- und Nachnamen eingeben, wird der vollständige Name automatisch aktualisiert.

Beispiel

Das folgende Beispiel zeigt die Verwendung des Controllers -

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" 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>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Ausgabe

Öffnen Sie die Datei testAngularJS.htm in einem Webbrowser und sehen Sie das Ergebnis.