AngularJS - Controladores

O aplicativo AngularJS depende principalmente de controladores para controlar o fluxo de dados no aplicativo. Um controlador é definido usando a diretiva ng-controller . Um controlador é um objeto JavaScript que contém atributos / propriedades e funções. Cada controlador aceita $ scope como um parâmetro, que se refere ao aplicativo / módulo que o controlador precisa tratar.

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

Aqui, declaramos um controlador chamado studentController , usando a diretiva ng-controller. Nós o definimos da seguinte maneira -

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

O studentController é definido como um objeto JavaScript com $ scope como argumento.
O $ escopo se refere ao aplicativo que usa o objeto studentController.
O $ scope.student é uma propriedade do objeto studentController.
O firstName e o lastName são duas propriedades do objeto $ scope.student. Passamos os valores padrão para eles.
A propriedade fullName é a função do objeto $ scope.student, que retorna o nome combinado.
Na função fullName, obtemos o objeto aluno e retornamos o nome combinado.
Como observação, também podemos definir o objeto controlador em um arquivo JS separado e consultar esse arquivo na página HTML.

Agora podemos usar a propriedade do aluno studentController usando o modelo ng ou usando expressões como 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()}}

Vinculamos student.firstName e student.lastname a duas caixas de entrada.
Associamos student.fullName () ao HTML.
Agora, sempre que você digitar qualquer coisa nas caixas de entrada de nome e sobrenome, poderá ver o nome completo sendo atualizado automaticamente.

Exemplo

O exemplo a seguir mostra o uso do 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>

Resultado

Abra o arquivo testAngularJS.htm em um navegador da web e veja o resultado.

↰ Previous page Next page ↱