AngularJS - Controladores

La aplicación AngularJS se basa principalmente en controladores para controlar el flujo de datos en la aplicación. Un controlador se define mediante la directiva ng-controller . Un controlador es un objeto de JavaScript que contiene atributos / propiedades y funciones. Cada controlador acepta $ scope como parámetro, que se refiere a la aplicación / módulo que el controlador necesita manejar.

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

Aquí, declaramos un controlador llamado studentController , usando la directiva ng-controller. Lo definimos de la siguiente manera:

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

  • StudentController se define como un objeto JavaScript con $ scope como argumento.

  • $ Scope se refiere a la aplicación que usa el objeto studentController.

  • $ Scope.student es una propiedad del objeto studentController.

  • FirstName y lastName son dos propiedades del objeto $ scope.student. Les pasamos los valores predeterminados.

  • La propiedad fullName es la función del objeto $ scope.student, que devuelve el nombre combinado.

  • En la función fullName, obtenemos el objeto del estudiante y luego devolvemos el nombre combinado.

  • Como nota, también podemos definir el objeto controlador en un archivo JS separado y hacer referencia a ese archivo en la página HTML.

Ahora podemos usar la propiedad de estudiante de studentController usando ng-model o usando expresiones de la siguiente manera:

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

  • Vinculamos student.firstName y student.lastname a dos casillas de entrada.

  • Vinculamos student.fullName () a HTML.

  • Ahora, cada vez que escribe algo en los cuadros de entrada de nombre y apellido, puede ver que el nombre completo se actualiza automáticamente.

Ejemplo

El siguiente ejemplo muestra el uso del controlador:

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>

Salida

Abra el archivo testAngularJS.htm en un navegador web y vea el resultado.