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>