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.