Controladores AngularJS
Los controladores AngularJS controlan los datos de las aplicaciones AngularJS.
Los controladores AngularJS son objetos JavaScript regulares .
Controladores AngularJS
Las aplicaciones de AngularJS están controladas por controladores.
La directiva ng-controller define el controlador de la aplicación.
Un controlador es un objeto JavaScript , creado por un constructor de objetos JavaScript estándar .
Ejemplo de AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.firstName
= "John";
$scope.lastName = "Doe";
});
</script>
Aplicación explicada:
La aplicación AngularJS está definida por ng-app="myApp" . La aplicación se ejecuta dentro de <div>.
El atributo ng-controller="myCtrl" es una directiva de AngularJS. Define un controlador.
La función myCtrl es una función de JavaScript.
AngularJS invocará el controlador con un objeto $scope .
En AngularJS, $scope es el objeto de la aplicación (el propietario de las variables y funciones de la aplicación).
El controlador crea dos propiedades (variables) en el alcance ( nombre y apellido ).
Las directivas del modelo ng vinculan los campos de entrada a las propiedades del controlador (nombre y apellido).
Métodos de controlador
El ejemplo anterior demostró un objeto controlador con dos propiedades: lastName y firstName.
Un controlador también puede tener métodos (variables como funciones):
Ejemplo de AngularJS
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl',
function($scope) {
$scope.firstName = "John";
$scope.lastName
= "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
Controladores en archivos externos
En aplicaciones más grandes, es común almacenar controladores en archivos externos.
Simplemente copie el código entre las etiquetas <script> en un archivo externo llamado personController.js :
Ejemplo de AngularJS
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
Otro ejemplo
Para el siguiente ejemplo, crearemos un nuevo archivo de controlador:
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
Guarde el archivo como namesController.js :
Y luego use el archivo del controlador en una aplicación:
Ejemplo de AngularJS
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>