AngularJS Controlador

Controladores AngularJScontrolanlos datos de las aplicaciones AngularJS.

Los controladores AngularJS son convencionalesobjetos de JavaScript。

Controladores AngularJS

Las aplicaciones AngularJS son controladas por controladores.

ng-controllerLa directiva define el controlador de la aplicación.

El controlador esun objeto de JavaScript, por el JavaScript estándarconstructor de objetoscreado.

Ejemplo de AngularJS

<div ng-app="myApp" ng-controller="myCtrl">

Nombre:<input type="text" ng-model="firstName"><br>
Apellido:<input type="text" ng-model="lastName"><br>
<br>
Nombre completo:{{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

Pruébalo »

Análisis de la aplicación:

La aplicación AngularJS porng-appdefinida. La aplicación se ejecuta dentro de <div>.

ng-controller="myCtrl"El atributo es una directiva AngularJS. Se usa para definir un controlador.

myCtrlLa función es una función de JavaScript.

AngularJS usa$scopeel objeto para llamar al controlador.

En AngularJS, $scope es un objeto de aplicación (pertenece a las variables y funciones de la aplicación).

del controlador$scope(equivalente al ámbito/alcance de control) se usa para guardar el objeto del Model de AngularJS (modelo).

El controlador crea dos propiedades en el ámbitofirstNameylastName).

ng-modelLa directiva vincula el campo de entrada a las propiedades del controlador (firstName y lastName).

Métodos del controlador

El ejemplo anterior muestra un objeto controlador con las dos propiedades lastName y firstName.

El controlador también puede tener métodos (variables y funciones):

Ejemplo de AngularJS

<div ng-app="myApp" ng-controller="personCtrl">

Nombre:<input type="text" ng-model="firstName"><br>
Apellido:<input type="text" ng-model="lastName"><br>
<br>
Nombre completo:{{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>

Pruébalo »

Controlador en un archivo externo

En aplicaciones grandes, normalmente los controladores se guardan en archivos externos.

Solo necesitas copiar el código de la etiqueta <script> en un archivo externo llamadopersonController.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: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

Pruébalo »

Otros ejemplos

El siguiente ejemplo crea 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'} ]; });

Guarda el archivo comonamesController.js:

Luego, usa el archivo de controlador en la 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>

Pruébalo »
Otras extensiones