AngularJS - Controller

L'applicazione AngularJS si basa principalmente sui controller per controllare il flusso di dati nell'applicazione. Un controller viene definito utilizzando la direttiva ng-controller . Un controller è un oggetto JavaScript che contiene attributi / proprietà e funzioni. Ogni controller accetta $ scope come parametro, che si riferisce all'applicazione / modulo che il controller deve gestire.

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

Qui dichiariamo un controller chiamato studentController , utilizzando la direttiva ng-controller. Lo definiamo come segue -

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

  • StudentController è definito come un oggetto JavaScript con $ scope come argomento.

  • $ Scope si riferisce all'applicazione che utilizza l'oggetto studentController.

  • $ Scope.student è una proprietà dell'oggetto studentController.

  • Il firstName e il lastName sono due proprietà dell'oggetto $ scope.student. Passiamo loro i valori predefiniti.

  • La proprietà fullName è la funzione dell'oggetto $ scope.student, che restituisce il nome combinato.

  • Nella funzione fullName, otteniamo l'oggetto student e quindi restituiamo il nome combinato.

  • Come nota, possiamo anche definire l'oggetto controller in un file JS separato e fare riferimento a quel file nella pagina HTML.

Ora possiamo usare la proprietà student di studentController usando ng-model o usando espressioni come segue:

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()}}

  • Abbiamo associato student.firstName e student.lastname a due caselle di input.

  • Abbiamo associato student.fullName () a HTML.

  • Ora ogni volta che digiti qualcosa nelle caselle di immissione del nome e del cognome, puoi vedere il nome completo che viene aggiornato automaticamente.

Esempio

L'esempio seguente mostra l'uso del controller:

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>

Produzione

Apri il file testAngularJS.htm in un browser web e guarda il risultato.