Una web-app TODO para gestionar nuestra tareas con AngularJS

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?

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

npm init

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

npm install --save bootstrap angular

 Creando el archivo visual (html)

Vamos a crear un archivo index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Una aplicación TODO para gestionar nuestra tareas con AngularJS</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <script src="node_modules/angular/angular.min.js"></script>
  <script src="app.js"></script>
  <style>
    .panel-cd{
      width: 50%;ç
    }
    table p{
      font-size: 20px;
    }
    .todo_input{
      width: 30%;

    }
    .tachado{
      text-decoration:line-through;
    }

  </style>

</head>
<body ng-app="codigodario_todo" ng-controller="TODOCtrl">
  <div class="container-fluid">
    <center>
      <img src="http://codigodiario.me/wp-content/uploads/2016/04/emblemmatic-codigodiario-logo-101.png" alt="">
      <div class="input-group input-group-lg todo_input">
        <input type="text" ng-model="todoInput" class="form-control" placeholder="Darle de comer al gato..." aria-describedby="sizing-addon1">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="addTodo()">Añadir</button>
          </span>
      </div>
    </center>	

    <!-- PANEL -->
    <br><br>
    <center>
      <table class="table panel-cd">
        <tr>
        	<th>TODO</th>
        	<th>Gestion</th>
        </tr>
        <tr ng-repeat="todo in todos">
        	<td><p ng-class="myVar">{{todo.name}}</p></td>
        	<td><button class="btn btn-info" ng-click="myVar='tachado'">Terminado!</button>	&nbsp;&nbsp;<button class="btn btn-warning" ng-click="deleteTodo(todo)">Borrar</button></td>
        </tr>
      </table>
</center>
  </div>
</body>
</html>

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.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Una aplicación TODO para gestionar nuestra tareas con AngularJS</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
  <script src="node_modules/angular/angular.min.js"></script>
  <script src="app.js"></script>
  <style>
    .panel-cd{
      width: 50%;ç
    }
    table p{
      font-size: 20px;
    }
    .todo_input{
      width: 30%;

    }
    .tachado{
      text-decoration:line-through;
    }

  </style>

</head>
<body ng-app="codigodario_todo" ng-controller="TODOCtrl">
  <div class="container-fluid">
    <center>
      <img src="http://codigodiario.me/wp-content/uploads/2016/04/emblemmatic-codigodiario-logo-101.png" alt="">
      <div class="input-group input-group-lg todo_input">
        <input type="text" ng-model="todoInput" class="form-control" placeholder="Darle de comer al gato..." aria-describedby="sizing-addon1">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="addTodo()">Añadir</button>
          </span>
      </div>
    </center>	

    <!-- PANEL -->
    <br><br>
    <center>
      <table class="table panel-cd">
        <tr>
        	<th>TODO</th>
        	<th>Gestion</th>
        </tr>
        <tr ng-repeat="todo in todos">
        	<td><p ng-class="myVar">{{todo.name}}</p></td>
        	<td><button class="btn btn-info" ng-click="myVar='tachado'">Terminado!</button>	&nbsp;&nbsp;<button class="btn btn-warning" ng-click="deleteTodo(todo)">Borrar</button></td>
        </tr>
      </table>
</center>
  </div>
</body>
</html>

 

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

Desarrollador a tiempo completo, amante del buen rol y los juegos de plataforma. Mi tiempo libre me gusta invertirlo para ver series y malas peliculas