Skip to main content
1 de 2

Como utilizar .directive, modularização e divisão de camadas? AngularJS

Olá, eu estou com um sério problema em entender como funcionam esssas coisas citadas em um texto. Gostaria de criar uma .directive, fazer a modularizarão fazendo parte do código ser utilizada em serviços e efetuar a divisão de camadas nesse código. Estou começando agora a aprender então estou tendo muita dificuldade nessa parte do processo de criação Angular.

angular.module('TarefApp', []);

// Code goes here
angular.module('TarefApp')

.controller('TarefasController', function($scope) {
  $scope.categorias = [];
  $scope.tarefas = [];
  $scope.categoriaTarefa = {
    tarefa: {}
  };

  $scope.addTarefa = function(tarefa) {
    if (!$scope.categoriaSelecionada) {
      alert("Selecione uma categoria!")
      return;
    }

    var c = $scope.categoriaSelecionada;

    if (!$scope.categoriaTarefa.tarefa[c])
      $scope.categoriaTarefa.tarefa[c] = [];
    else {
      var itemDuplicado = false;
      angular.forEach($scope.categoriaTarefa.tarefa[c], function(item, index) {
        itemDuplicado = (item.nome === tarefa.nome);
        if (itemDuplicado) {
          alert("Tarefa para categoria já existe!");
          return false;
        }
      });
    }

    if (!itemDuplicado) {
      $scope.categoriaTarefa.tarefa[c].push(tarefa);
      $scope.tarefa = {};
    }
  };

  $scope.delTarefas = function() {
    angular.forEach($scope.categorias, function(item) {
      var c = item.nome;
      var oldTarefas = $scope.categoriaTarefa.tarefa[c];
      $scope.categoriaTarefa.tarefa[c] = [];

      angular.forEach(oldTarefas, function(tar) {
        if (!tar.selecionado) $scope.categoriaTarefa.tarefa[c].push(tar);
      });
    });
  };

  $scope.addCategoria = function(categoria) {
    for (var i = 0; i < $scope.categorias.length; i++) {
      if ($scope.categorias[i].nome === categoria.nome) {
        alert("A categoria já existe!");
        return;
      }
    }
    $scope.categorias.push(angular.copy(categoria));
    delete $scope.categoria;
  };
});
        .container {
          margin-top: 2%;
        }
        .apgfiltro {
          margin-top: 5%;
          margin-bottom: 2.9%;
        }
        a:hover {
          text-decoration: none !important;
        }
        .done-true {
          text-decoration: line-through;
          color: #ccc;
        }
        .col-xs-9.edit {
          margin-top: 3%;
        }
<html lang="pt-br" ng-app="TarefApp">
<head>
<!-- Angular.js minificado  -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


        <!-- Angular.js minificado  -->
        <script src="js/app.js"></script>
        <script src="js/controller/TarefasController.js"></script>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
        <div id="div-container" class="container ng-scope" ng-controller="TarefasController">
            <div class="row">
                <div class="col-xs-3">
                    <!-- Ínicio Adicionar Categoria -->
                    <div class="page-header">
                        <h4>Adicionar Categoria</h4>
                    </div>
                    <div id="div-form">
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <input type="text" class="form-control ng-pristine ng-valid" ng-model="categoria.nome">
                            </div>
                            <button class="btn btn-info btn-block ng-pristine ng-valid" ng-click="addCategoria(categoria)" ng-model="infoIgual" ng-disabled="!categoria.nome" disabled="disabled">Adicionar</button>
                        </form>
                    </div>
                    <!-- Fim Adicionar Categoria -->
                    <!-- Ínicio Adicionar Tarefa -->
                    <div class="page-header">
                        <h4>Adicionar Tarefa</h4>
                    </div>
                    <div id="div-form">
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <input type="text" class="form-control ng-pristine ng-valid" ng-model="tarefa.nome">
                                <br>
                                <select class="form-control" id="category" ng-options="item.nome as item.nome for item in categorias" ng-model="categoriaSelecionada">

                                </select>
                            </div>
                            <button class="btn btn-info btn-block ng-pristine ng-valid" ng-click="addTarefa(tarefa)" ng-model="infoIgual" ng-disabled="!tarefa.nome" disabled="disabled">Adicionar</button>
                        </form>
                    </div>
                    <!-- Fim Adicionar Tarefa -->
                </div>

                <!-- Categorias + Tarefas -->
                <div class="col-xs-9 edit">
                    <button class="btn btn-danger btn-block" ng-click="delTarefas()">Apagar tarefas selecionadas</button>
                    <div ng-repeat="categoria in categorias">
                        <h4 ng-model="categoria.selecionado">{{categoria.nome}}</h4>
                        <div ng-repeat="tarefa in categoriaTarefa.tarefa[categoria.nome]">
                            <input type="checkbox" ng-model="tarefa.selecionado" ng-click="tarefaFeita()">
                            <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
  </html>