Tutorial de AngularJS: Tema 6 – Mi primer Controlador

AngularJS

Hola, en nuestro anterior tutorial de AngularJS aprendimos a programar nuestro primer Hola Mundo. En el totorial de hoy vamos a meternos en harina y empezaremos a programar en JavaScript un primer Controlador para la aplicación.

Los controladores se utilizan para implementar la lógica de presentación en AngularJS. En ellos incluiremos el código necesario para inicializar una aplicación, gestionar los eventos, etc. Son los encargados de gestionar el scope, que donde están los datos que se van a manejar dentro de la parte de presentación.

Vamos a ver el código del ejemplo de hoy y lo desgranaremos para que lo entendáis mejor:

<html ng-app="app">
<head>
 <title>Ejemplo de Sumas - AngularJS - eXpert Designs -</title>
</head>
<body ng-controller="sumasController">
Valor 1: <input ng-model="v1" type="number" step="any">
Valor 2: <input ng-model="v2" type="number" step="any">
<button ng-click="sumar(v1,v2)">Sumar</button>
<h2>Resultado: {{resultado}}!</h2>

<h2>Resultado a tiempo real: {{v1 + v2}}!</h2>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="sumasCtrl.js"></script>
</body>
</html>

En esta ocasión hemos valor a la etiqueta ng-app. Este valor significa que nuestra módulo de la aplicación se llamará app y permitirá que cuelguen de este todas las directivas, controladores, filtros, etc. que se vinculen a este módulo.

<html ng-app="app">

Lo siguiente que vemos es el uso de la etiqueta ng-controller. Lo que hacemos con esto es decir que el código que está recogido dentro de la etiqueta que la contiene está comandado por ese controlador.

<body ng-controller="sumasController">

Luego tenemos dos inputs de tipo numérico con decimales. Aquí haremos uso de la etiqueta ng-model. Ng-model se utiliza para comunicar de manera bidireccional los valores de los campos de los formularios de la vista y el scope (two-way data binding entre $scope –> view y view –> $scope). En el ejemplo vemos que se usan las variables v1 y v2.

Valor 1: <input ng-model="v1" type="number" step="any">
Valor 2: <input ng-model="v2" type="number" step="any">

En la siguiente porción de código tenemos un botón que usa la etiqueta ng-click. Como su nombre indica, llamará a la función sumar pasándole los valores v1 y v2 cuando se haga click en ese botón. Esto hará que se actualice el valor de {{resultado}}. AngularJs utiliza la doble llave para pintar las variables del $scope en pantalla.

Además, para que veáis las posibilidades de AngularJs, mostramos también el resultado a tiempo real de la operación mediante la operación directa {{v1 + v2}}. Ojo porque si no se usan valores numéricos en las operaciones la suma los concatenará.

<button ng-click="sumar(v1,v2)">Sumar</button>
<h2>Resultado: {{resultado}}!</h2>

<h2>Resultado a tiempo real: {{v1 + v2}}!</h2>

Llegados a este punto os preguntaréis dónde está el código de la función sumar. ¡Pues en el controlador!

En esta ocasión el controlador lo hemos programado en un fichero aparte, por lo que deberemos incluirlo en el html principal de nuestra aplicación. Esto deberemos hacer con cada fichero que contenga controladores, directivas, filtros o cualquier otro JavaScript de la web-app.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="sumasCtrl.js"></script>

El código javascript de nuestro controlador es el siguiente:

var app = angular.module('app', []);
app.controller('sumasController', function ($scope) {
  $scope.sumar = function (v1, v2) {
    $scope.resultado = v1 + v2;
  };
});

En el código vemos lo siguiente:

  • Primero se crea la variable app, que referencia al módulo ‘app’ que es el que usaremos en nuestra aplicación (y es el mismo que hemos puesto en el html dentro del ng-app).
  • Luego se crea el controlador ‘sumasController’ que a su vez es una función que usa el $scope. El $scope como hemos dicho nos permite comunicar la vista con el controlador.
  • En el controller se ha creado una función sumar dentro de la variable de $scope para que pueda ser llamada desde el botón. Esta función sumará los valores y los mostrará dentro de la variable del $scope resultado.

Sencillo y complicado a la vez, ¿verdad?

No os desaniméis, con el tiempo comprenderéis por qué se hace de esta manera y veréis que casi todo el código de AngularJs se usa de una forma prácticamente igual.

Veamos el resultado:

Una cosa que veremos más adelante es que AngularJs ya implementa en origen un control de errores básico. En este caso, si ponemos una letra el resultado no se va a mostrar y se rodeará al input con un halo rojo de error.

En el próximo tutorial vamos a hacer una calculadora sencilla usando lo que hemos aprendido hoy. Estad atentos!

4 pensamientos sobre “Tutorial de AngularJS: Tema 6 – Mi primer Controlador

  1. ManyGC

    Hola, soy nueva en esto y estoy viendo tu tutorial y haciendo los ejercicios, mi pregunta es la siguiente… en esta línea Resultado: {{resultado}}! debe de mandar algún resultado? o por que la pusiste? porque no hace nada?
    saludos 😉

    1. eNeRGy2k

      Hay dos líneas, una que da el resultado a tiempo real y otra que da el resultado cuando se da clic al botón. Ese clic es la función de AngularJs que rellena {{resultado}}

    1. eNeRGy2k

      Buenas,
      El dashboard que indicas es un boceto que se usa como esqueleto de la aplicación. Prácticamente no tiene programado nada (ni gestión de usuarios, ni código interno,…) y tras hacer los pasos de su instalación sólo conseguirás que funcione como lo hace su demo. Incluso su versión Premium (15$), que proporciona algunas directivas montadas y widgets, no te va a servir como dashboard plenamente funcional.
      Para conseguir hacer funcionar este tipo de dashboards o webapps es necesario tener conocimientos del universio de aplicaciones y extras que entrañan la programación en estos entornos, tales como Gulp, Node.js, Bower, etc.
      No obstante, para no dejaros con las ganas, en su GitHub (link) tienen una pequeña guía de instalación, aunque si no conocéis las aplicaciones y conceptos de los que hablo mejor ni lo intentéis 🙂
      Yo recomendaría primero empaparse de todas estas aplicaciones, y luego de cómo hacer un login de usuarios contra un servicio web, la securización de la aplicación mediante rutas, etc. y dejar la parte de la capa de presentación para cuando ya tengáis claros todos estos conceptos. Sé que la parte visual es la más agradecida, pero una web bonita pero poco funcional o insegura no es algo que ningún programador deseemos 😉
      Nuestra idea es en breve hacer un pequeño tutorial de rutas y con algo más de tiempo hacer unos cuantos de uso de servicios web (primero para consultar datos y luego algo más serio). También queremos dar nociones de Node.js, Bower, Gulp, Git, etc. para que podáis avanzar en la programación con nosotros.
      Espero haberte sido útil.

Deja un comentario

A %d blogueros les gusta esto: