AngularJS: Criando uma Todo List
Autor: Willian Parige | Publicado: 2017-01-17T08:51:00-02:00





Nesse exemplo criaremos um Todo List de maneira simples, principalmente para os que ainda não está muito familiarizado com o AngularJS.



Para o nosso exemplo criaremos os arquivos index.html onde irá conter nosso código HTML, conforme e imagem abaixo.






Nossa tela terá um contador de lembretes ao topo e um link para remover os lembretes já finalizados, ao clicar no check-box o item ficará como concluído.


Criaremos agora o app.js&nbsp;com nosso código Angular/JavaScript que irá conter as principais funções para carregar, adicionar e Limpar nosso Todo List.



Vamos começar com o código HTML criando nosso index.html:



&lt;html&gt;
   &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;    
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css"&gt;
      &lt;style&gt;
         .concluida-true {
         text-decoration: line-through;
         color: grey;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;!--Vinculando nosso HTML com o nosso angular app.js --&gt;
   &lt;body ng-app="mainApp"&gt;
      &lt;h2&gt;Todo List&lt;/h2&gt;
      &lt;!--Vinculando ao nosso controller mainController --&gt;
      &lt;div ng-controller="mainController"&gt;
         &lt;!-- Exibe o contador de lembretes --&gt;   
         &lt;span&gt;{{lembretes()}} de {{todos.length}} lembretes&lt;/span&gt;
         &lt;!--Link para remover os items já finalizados --&gt;
         [ &lt;a href="" ng-click="removeConcluidas()"&gt;Remover Finalizadas&lt;/a&gt; ]
         &lt;ul class="unstyled"&gt;
            &lt;!-- ng-repeat é um especie de For do angular para exibir a lista de Todos --&gt;
            &lt;li ng-repeat="todo in todos"&gt;
               &lt;label class="checkbox"&gt;
               &lt;input type="checkbox" ng-model="todo.concluida"&gt;
               &lt;span class="concluida-{{todo.concluida}}"&gt;{{todo.texto}}&lt;/span&gt;
               &lt;/label&gt;
            &lt;/li&gt;
         &lt;/ul&gt;
         &lt;!-- Form para adicionar um novo, ao clicar no botão Adicionar será chamado o adicionar() --&gt;
         &lt;form ng-submit="adicionar()"&gt;
            &lt;input type="text" ng-model="novoTexto"  size="30" placeholder="Nova"&gt;
            &lt;input class="btn-primary" type="submit" value="Adicionar"&gt;
         &lt;/form&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;



E agora nosso app.js:



angular.module('mainApp', [])
 .controller('mainController', function ($scope) {

  //Insere uns itens iniciais    
  $scope.todos = [{
   texto: 'Aprender Angular',
   concluida: true
  }, {
   texto: 'Estudar Inglês',
   concluida: false
  }];

  //Adicionando uma nova Todo
  $scope.adicionar = function () {
   //Adiciona o item na variável Todos
   $scope.todos.push({
    texto: $scope.novoTexto,
    concluida: false
   });

   //Limpa o campo após adicionar
   $scope.novoTexto = '';
  };

  //Contador de lembretes
  $scope.lembretes = function () {
   var total = 0;
   angular.forEach($scope.todos, function (todo) {
    total += todo.concluida ? 0 : 1;
   });
   return total;
  };

  //Remover os itens já concluidos
  $scope.removeConcluidas = function () {
   //Adiciona em uma nova variável a lista de todos
   var antigas = $scope.todos;

   //Zera a variavel "todos"
   $scope.todos = [];

   //For para remover as que já foram Concluidas
   angular.forEach(antigas, function (todo) {
    //Devolve na variável "todos" os que não foram concluidas
    if (!todo.concluida)
     $scope.todos.push(todo);
   });
  };
 });



Como o código está todo documentado, irei dispensar meus comentários.



Você pode fazer o download do código aqui



Até a próxima.