AngularJS controladores controlan los datos de aplicaciones AngularJS.
AngularJS controladores son regulares Objetos de JavaScript.
AngularJS Controladores
AngularJS aplicaciones son controlados por los controladores.
La directiva ng-controlador define el controlador de la aplicación.
Un controlador es un objeto de JavaScript, creado por un objeto constructor de JavaScript estándar.
Ejemplo 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>
Inténtalo tú mismo " Aplicación explicó:
La aplicación AngularJS se define por NG-app = "myApp". La aplicación se ejecuta dentro de la <div>.
El atributo = "myCtrl" ng-controlador es una directiva AngularJS. Define un controlador.
La función myCtrl es una función de JavaScript.
AngularJS invocarán el controlador con un objeto $ ámbito de aplicación.
En AngularJS, $ ámbito es el objeto de la aplicación (el propietario de variables de aplicación y funciones).
El controlador crea dos propiedades (variables) en el ámbito de aplicación (nombre y apellido).
Las directivas ng-modelo se unen los campos de entrada a las propiedades del controlador (nombre y apellido).
Métodos de controlador
El ejemplo anterior demuestra un objeto controlador con dos propiedades: Apellidos y firstName.
Un controlador también puede tener métodos (variables como funciones):
Ejemplo 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>
Inténtalo tú mismo " Controladores en archivos externos
En aplicaciones de mayor tamaño, es común a controladores de tienda en archivos externos.
Sólo tienes que copiar el código entre las etiquetas <script> en un archivo externo denominado personController.js :
Ejemplo 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: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
Inténtalo tú mismo " Otro ejemplo
Para el siguiente ejemplo vamos a crear 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 a continuación, utilizar el archivo de controlador en una aplicación:
Ejemplo 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>
Inténtalo tú mismo "