Netrunning: AngularJS (03) Controladores

lunes, 25 de agosto de 2014

AngularJS (03) Controladores

Seguimos avanzando por AngularJS y llegamos a los controladores, donde ya podemos empezar a introducir código javascript, ya que se trata de un objeto.

Con esto entramos de lleno en el modelo-vista-controlador, con el que AngularJS comienza a tener mucha más fuerza. Para ello utiliza $scope que es algo así como el pegamento que une al controlador y la vista.

Angular funciona desde una vista (Todo lo que hemos hecho hasta ahora), pero es mejor no poner la lógica en la vista ya que es bastante difícil mantenerla desde el propio html (algo así como ocurre con el css, que en muy raras ocasiones se utiliza el atributo style).

En su lugar vamos a tener un objeto especial de JavaScript - un contenedor - denominado un controlador. La vista pasa los datos al controlador, el cual se encarga de tratarlos, pudiendo incluso actualizar un back-end.

El pegamento entre la Vista y el Controlador se denomina Ámbito de la aplicación, y en angular vamos a ver un montón de objetos o variables que comienzan con $.
$scope representa el ámbito del objeto.

Pero vamos a ver un ejemplo de todo esto para entenderlo mejor:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="personController">

<p>Nombre: <input type="text" ng-model="persona.nombre"></p>
<p>Apellido: <input type="text" ng-model="persona.apellido"></p>
<p>Nombre completo: {{persona.nombre + " " + persona.apellido}}</p>

</div>

<script>
function personController($scope) {
    $scope.persona = {
        nombre: "Paco",
        apellido: "Perez"
    };
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

</body>
</html>

Se inicia la aplicación mediante la directiva ng-app dentro de un div
La directiva ng-controller pone nombre al controlador (el objeto), en nuestro caso llamado personController
La función personController es una función básica de javascript, un constructor
El controlador del objeto tiene una la propiedad $scope.persona
El objeto persona tiene dos propiedades; nombre y apellido
La directiva ng-model une los inputs con las propiedades del controlador (nombre y apellido)

De hecho un controlador, puede tener en su interior otras funciones como propiedades. En este ejemplo vemos el mismo resultado pero trabajando desde el controlador:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="personController">

<p>Nombre: <input type="text" ng-model="persona.nombre"></p>
<p>Apellido: <input type="text" ng-model="persona.apellido"></p>
<p>Nombre completo: {{persona.nombreCompleto()}}</p>

</div>

<script>
function personController($scope) {
    $scope.persona = {
        nombre: "Paco",
        apellido: "Perez",
        nombreCompleto: function() {
            var x = $scope.persona; 
            return x.nombre + " " + x.apellido;
        }
    };
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>


</body>
</html>

Como podemos ver, en este caso, hay una función como una propiedad, que toma los valores de nombre y apellido, para devolverlos como una cadena que es la que se invoca como {{persona.nombreCompleto()}}

Métodos en el controlador

En el controlador también puede haber métodos, como podemos observar en el siguiente ejemplo:

!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="personController">

<p>Nombre: <input type="text" ng-model="persona.nombre"></p>
<p>Apellido: <input type="text" ng-model="persona.apellido"></p>
<p>Nombre completo: {{nombreCompleto()}}</p>

</div>

<script>
function personController($scope) {
    $scope.persona = {
        nombre: "Paco",
        apellido: "Perez",
     };
     $scope.nombreCompleto = function() {
         var x;
         x = $scope.persona;
         return x.nombre + " " + x.apellido;
     };
}
</script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>


</body>
</html>

Controladores en archivos externos

Cuando nuestra aplicación es grande, lo normal, al igual que con el css, el javascript... es que
nuestro script de angularjs se encuentre en un archivo externo, para que de esa manera nuestro código sea más claro y limpio.
Siguiendo con el ejemplo anterior, vamos a extraer el script a otro archivo y a enlazarlo:
Nuestro código html quedaría:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="personController">

<p>Nombre: <input type="text" ng-model="persona.nombre"></p>
<p>Apellido: <input type="text" ng-model="persona.apellido"></p>
<p>Nombre completo: {{persona.nombreCompleto()}}</p>

</div>

<script src="personController.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>


</body>
</html>

Como puedes ver se ha eliminado el código del script sustituyendolo por un enlace que lleva hasta el siguiente archivo que tiene el nombre de personController:

function personController($scope) {
    $scope.persona = {
        nombre: "Paco",
        apellido: "Perez",
        nombreCompleto: function() {
            var x = $scope.persona; 
            return x.nombre + " " + x.apellido;
        }
    };
}

De este modo nuestra aplicación funciona exactamente igual que antes pero carece del script embebido.