Los controladores en AngularJS se encargar de controlar los datos de las aplicaciones AngularJS. Los controladores son Objetos JavaScript .

Controladores en AngularJS

Las aplicaciones AngularJS son controladas por los controladores. Un controlador no es más que un objeto JavaScript, que se crea con el constructor de objetos de JavaScript. El ámbito de la aplicación esta definido por $scope y se corresponde con el elemento HTML asociado a la aplicación. Ejemplo:
<div ng-app="" ng-controller="cochesController">

Marca: <input type="text" ng-model="coche.marca"><br>
Modelo: <input type="text" ng-model="coche.modelo"><br>
<br>
El Coche es: {{coche.marca + " " + coche.modelo}}

</div>

<script>
function cochesController($scope) {
    $scope.coche = {
        marca: "Audi",
        modelo: "A5"
    };
}
</script>
Explicación de la aplicación: La aplicación AngularJS está definida por la directiva ng-app . La aplicación corre dentro de elemento <div> . La directiva ng-controller indica el nombre del objeto correspondiente al controlador. La función cocheController es el constructor estándar del objecto JavaScript. El objeto controlador tiene una propiedad: $scope.coche. El objeto coche tiene dos propiedades: marca y modelo. La directiva ng-model enlaza los campos <input/> a las propiedades del controlador (marca y modelo).

Propiedades del Controlador

En el ejemplo de arriba te he mostrado un objeto controlador con dos propiedades, marca y modelo. Un controlador también puede tener funciones como propiedades del controlador. Ejemplo:
<div ng-app="" ng-controller="cocheController">

Marca: <input type="text" ng-model="coche.marca"><br>
Modelo: <input type="text" ng-model="coche.modelo"><br>
<br>
El coche es: {{coche.nombreCompleto()}}

</div>

<script>
function cocheController($scope) {
    $scope.coche = {
        marca: "Audi",
        modelo: "A3",
        nombreCompleto: function() {
            var x;
            x = $scope.coche;
            return x.marca + " " + x.modelo;
        }
    };
}
</script>

Métodos del Controlador

Un controlador también puede tener métodos. Ejemplo:
<div ng-app="" ng-controller="cocheController">

Marca: <input type="text" ng-model="coche.marca"><br>
Modelo: <input type="text" ng-model="coche.modelo"><br>
<br>
El coche es: {{ nombreCompletoDelCoche() }}

</div>

<script>
function personController($scope) {
    $scope.coche = {
        marca: "Audi",
        modelo: "A3",
     };
     $scope.nombreCompletoDelCoche = function() {
         var x;
         x = $scope.coche; 
         return x.marca + " " + x.modelo;
     };
}
</script>

Controladores en ficheros externos

En aplicaciones más grandes, es habitual tener los controladores en ficheros JavaScript externos. Solo debes copiar el código entre las etiquetas <script> en un fichero externo llamado cocheController.js . Ejemplo:
<div ng-app="" ng-controller="cocheController">

Marca: <input type="text" ng-model="coche.marca"><br>
Modelo: <input type="text" ng-model="coche.modelo"><br>
<br>
El Coche es: {{coche.marca + " " + coche.modelo}}

</div>

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

Otro Ejemplo de Controlador AngularJS

En el siguiente ejemplo crearemos un nuevo fichero para nuestro controlador: Controlador:
function alumnosController($scope) {
    $scope.alumnos = [
        {nombre:'Paco',pais:'España'},
        {nombre:'Manuel',pais:'Chile'},
        {nombre:'Laura',pais:'Argentina'}
    ];
}
Y ahora usamos el controlador en nuestra aplicación AngularJS:
<div ng-app="" ng-controller="alumnosController">

<ul>
  <li ng-repeat="alumno in alumnos">
    {{ alumno.nombre + ', ' + alumno.pais }}
  </li>
</ul>

</div>

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

Hasta aquí este artículo sobre los controladores en AngularJS. Si tienes alguna duda o comentario puedes dejarlo aquí abajo o en Twitter. En el próximo artículo veremos los filtros de AngularJS . No olvides suscribirte para recibir contenidos exclusivos que solo se envían a los suscriptores por email. Imagen CC por: http://commons.wikimedia.org/wiki/File:US_Navy_040707-N-6932B-042_U.S._Navy_air_traffic_controllers_monitor_and_direct_the_launch_and_recovery_of_all_aircraft.jpg

Ver Indice Tutorial