Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Aprender AngularJS Fácil: Controladores

Jesús Lucas
  • Escrito por Jesús Lucas el 03 de Julio de 2014
  • <1 min de lectura | Frontend
Aprender AngularJS Fácil: Controladores

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

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars