Cuantas veces nos hemos olvidado de que teníamos que hacer algo pero no nos viene a la cabeza el qué y después de varios días nos acordamos pero ya era tarde… Pues eso, a mi me pasa muy a menudo y para eso, hoy vamos a aprender a crear una** web-app **de cosas que tenemos pendientes por hacer (TODO’s).

Para este proyecto usaremos AngularJS, algo de HTML con el framework de **Bootstrap **para que quede bonito y otro *poquitito *de CSS.

La aplicación es bastante básica a nivel visual y funcional.

**¿Qué es el *[User Story?](https://es.wikipedia.org/wiki/Historias_de_usuario)*
*Usery story #1:* Voy a poder escribir mi tarea a realizar y guardarlo*.*

*Usery story #2: *Tendré un espacio donde me muestre todas las tareas que tengo pendientes.

*Usery story #3: *Podré terminar una tarea, que al terminarla se tachará el texto.

*User story #4: *Podré eliminar la tarea, lo que hará que se quite de mi espacio de tareas pendientes.

Dicho todo esto, vamos a ponernos con el código.

Generando el fichero package.json

Vamos a crearnos una carpeta en la que trabajar y en ella hacemos un npm init para generar nuestro archivo de dependencias de npm

<code class="EnlighterJSRAW" data-enlighter-language="null">npm init

Lo rellenaremos con los datos que veamos oportunos y al terminar ya podremos instalar las dependencias que requiramos en este proyecto.

<code class="EnlighterJSRAW" data-enlighter-language="null">npm install --save bootstrap angular

Creando el archivo visual (html)

Vamos a crear un archivo index.html

Una aplicación TODO para gestionar nuestra tareas con AngularJS


TODO Gestion

{{todo.name}}

  

Explicando parte por parte

  • En las primeras líneas importo las librerias de **bootstrap, angular **y el *js *de mi app.
  • Más abajo tengo la etiqueta de style, que hace de plantilla CSS, es bastante fácil, cambiar tamaño de fuente, disminuir anchuras, y para el tachado, no requieren de más explicación.
  • En la línea 27 le indicamos a nuestro *body *de que será una aplicación angular con el nombre **codigodiario_todo **y ademas todo el body trabajará con el controlador TODOCtrl.
  • Tenemos un *input *con un botón con la directiva **ng-click **que lo que hará será disparar una función que tenemos creada en nuetra app.js que veremos un poco más abajo, lo que hace es agregar nuestra tarea a la lista de tareas.
  • En la línea tenemos la directiva **ng-repeat, **que funciona idénticamente como un for. todo es una variable que creamos sobre la marcha y todos es la variable de nuestro array que tenemos en la parte lógica de app.js que veremos ahora.
  • Y lo último son los botones de terminado y borrar. El primero al pulsarlo asigna la clase **tachado **a nuestro p con la descripción del **TODO **y el segundo lo borra de la lista ( su código lo veremos ahora).

Inspeccionando la lógica de la app

var app = angular.module('codigodario_todo', []); app.controller('TODOCtrl', ['$scope', function($scope){ $scope.todos = []; var counter = 0; $scope.addTodo = function () { var todoToAdd = {id: counter, name: $scope.todoInput}; this.todos.push(todoToAdd); counter++; $scope.todoInput=""; }; $scope.deleteTodo = function (todo) { this.todos.splice(todo.id, 1); } }]);

Aquí tenemos 3 partes importantes.

<code class="EnlighterJSRAW" data-enlighter-language="null">app.controller('TODOCtrl', ['$scope', function($scope){})]);

Declaramos nuestro controlador, recordad que se tiene que llamar igual que el nombre que le pusimos al ng-controller en el index.html

$scope.todos = []; var counter = 0;

Declaramos la variable todos con $scope delante para que esa variable sea accesible desde el html directamente. Este array guardará todas nuestras tareas pendientes. Y el **counter **es un contador básico que se irá incrementando con cada tarea introducida, lo he usado como para darles una *id *a las tareas.

Agregando una nueva tarea

$scope.addTodo = function () { var todoToAdd = {id: counter, name: $scope.todoInput}; this.todos.push(todoToAdd); counter++; $scope.todoInput=""; };

Aquí declaramos la función **addTodo **que usamos en nuestro html, el que se dispara al pulsar el botón de añadir. Básicamente lo que hace es recibir los parámetros del input, meterlos en un objeto y asignarle una id con el contador y los *pushea *al array. Cuando la tarea se haya guardado satisfactoriamente borra el campo del input para que podamos introducir otra tarea nueva.

Screenshot from 2016-04-13 18:43:53

Borrando una tarea existente

$scope.deleteTodo = function (todo) { this.todos.splice(todo.id, 1); }

Aquí tenemos la función para eliminar la tarea, recibimos como parámetro el todo a eliminar y con el método .splice eliminamos la tarea del array.

Código final

Una aplicación TODO para gestionar nuestra tareas con AngularJS


TODO Gestion

{{todo.name}}

  

var app = angular.module('codigodario_todo', []); app.controller('TODOCtrl', ['$scope', function($scope){ $scope.todos = []; var counter = 0; $scope.addTodo = function () { var todoToAdd = {id: counter, name: $scope.todoInput}; this.todos.push(todoToAdd); counter++; $scope.todoInput=""; }; $scope.deleteTodo = function (todo) { this.todos.splice(todo.id, 1); } }]);

Espero que os haya servido este tutorial para aprender a crear **una aplicación TODO con AngularJS, **nos vemos pronto!

Aquí os dejo el enlace al repositorio de este tutorial en **GitHub **para que podáis ver mejor el código.

github-logo