0

OBS: Até entendi o tudo, o problema é que não consigo fazer com esse código as informações que me passaram, tipo nada. E quando faço não funciona. Alguém pode me ajudar por favor??

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>

2

2 Respostas 2

2

Vamos lá:

Antes de mais nada você precisa entender o que é um controlador, um serviço e uma diretiva no angular

Controlador (Controller)

Entenda item como sendo um controlador dos componentes que estão em tela. Em outras palavras, aqui vão ficar todas as rotinas que envolvem interação usuário com a página HTML em sí. Além disso também partem daqui as requisições a outros componentes como por exemplo o serviço.

Serviço (Service)

Esse é o cara responsável por compartilhar recursos entre os controladores e também aqui geralmente ficam as rotinas que envolvem as chamadas http. É comum o pessoal usar esse cara para efetuar chamadas rest por exemplo. Desse modo você tem um serviço de pessoa por exemplo que pode incluir, alterar, excluir um pessoa.

Serviço Genérico

App.factory("$comum", function($http, $q, $injector) {
    function ajax(url, parametros, metodo) {
        var requisicao = $http({
            method: metodo,
            url: url,
            data:parametros
        });

        var promessa = requisicao.then(
            function(resposta) {
                return(resposta.data);
            },
            function(resposta) {
                return($q.reject("Something went wrong"));
            }
        );
        return promessa;
    }
    return({
        ajax:ajax
    });
});

Serviço Histórico Venda

App.factory("$historicovenda", function($comum) {
    var historico;
    return {
        buscar : function(filtro) {
            var promessa = $comum.ajax("/fusion/services/roi/history/search", filtro, "POST");
            promessa.then(function(req) {  
                historico = req;
            })
            return promessa;
        },
        cache : function() {
            return historico;
        }
    };
});

Controlador Histórico Venda

App.controller("HistoricoVendaController", function($scope, $historicovenda) {
    $scope.buscar = function(regerar) {
        var filtro = "1";
        $historicovenda.buscar(filtro).then(function(req){
            console.log(req)
        });
    };
});

E agora vamos a sua pergunta:

Divisão de camadas

A divisão em camadas é justamente separar as responsabilidades de cada um. Um exemplo prático: Você tem um cadastro de pessoa, nesse caso podemos dividir a rotina em dois componentes. Um controlador (camada 1) responsável por executar a ação quando o usuário clicar no botão salvar e validar os dados. Além disso esse componente também irá compilar o objeto a ser salvo e em seguida irá passar a bola para o serviço (camada 2) que irá efetuar a chamada http para efetivar o usuário no banco de dados. Nesse caso temos duas camadas com baixo acoplamento. Caso necessite consultar uma pessoa em outro controlador pode usar mesmo serviço. E ai está a sacada de separar as responsabilidades, você pode compartilhar o recursos.

Diretiva (Directive)

A diretiva é utilizada quando você quer determinar um comportamento em determinado elemento HTML. Também pode ser utilizado para você criar suas próprias tags. Existem muitas bibliotecas no angular que fazem o uso de tal elemento para dar um comportamento especifico. Exemplo:

No Js:

angular.module('App', [])
.directive('sonClick', function () {    
    return {
        restrict: 'A',
        link: function(scope,element,attrs){
            element.bind('click',function(){       
                scope.$eval(attrs.sonClick);
            })
        }
    };
})
.controller('CtrlApp', function ($scope) {
    $scope.executa = function(){
        alert("scope");           
    };
});

No html:

<div ng-controller="CtrlApp">
    <button son-click="executa()">clique aqui</button>
</div> 

Modularização

Esse é o mais simples e considero tão quanto os outros. Trata-se de separar em arquivos diferentes cada componente. Um arquivo para controlador, outro para serviço, outro para diretiva e assim por diante.

inserir a descrição da imagem aqui

1

Resumidamente, vou explicar como funciona as diretivas.

1) para criar uma diretiva:

app.directive("nomeDaDiretiva", function () {
   //seu método 
});

2) para criar uma diretiva modulada:

angular.module('NomeDoModulo', [])
.directive("nomeDaDiretiva", function () {
   //seu método 
});

3) O que acontece é que apontamos o modulo para uma variável:

var app = angular.module('NomeDoModulo', []);

4) Então criamos uma diretiva:

app.directive("nomeDaDiretiva", function () {
   //seu método 
});

5) No módulo temos que passar os elementos que serão usados na aplicação, conforme coloquei ngResource, ngRoute:

var app = angular.module('NomeDoModulo', ['ngResource','ngRoute']);

6) As diretivas contém algumas restrições que podem ser definidas:

E - Diretiva restrita ao elemento
A - Diretiva restrita ao atributo do elemento
C - Diretiva restrita a classe do elemento
M - Diretiva restrita ao comentário do elemento

Aqui tem um exemplo de diretiva (observe que neste exemplo, contém a restrição EAC (em conjunto) e está modularizado: http://jsfiddle.net/ivanferrer/1cyxoytv/

A diretiva terá um retorno, e nele podem conter os seguintes parâmetros restrição (restrict), layout (template), método em si (link) e substituição (replace), este receberá um booleano (true ou false).

Também pode conter parametrização do escopo (escope):

angular.module('MeuSistema', [])
.directive('DadosUsuario', function () {    
    return {
        restrict: 'E',
        scope:{
           nome:'@',
           email:'@',
           cidade:'@'
        },
        template:'<div></div>',
        link: function(scope,element, attributes) {

            element[0].innerHTML =  'Os dados do usuário são:<br>'
             + 'Nome: ' + scope.nome + '<br>'
             + 'Email: ' + scope.email + '<br>'
             + 'Cidade: ' + scope.cidade;

        },
        replace: true
    };
}) //o correto é separar isso em um arquivo só do seu controller em uma pasta "controllers"
.controller('ExibirDados', function() {

  $scope.nome = "Larissa Mourullo";
  $scope.email = "[email protected]";
  $scope.cidade = "São Paulo";

});

E no HTML:

<html ng-app="MeuSistema">
 <title>Exemplo</title>
 <body ng-controller="ExibirDados as dados">

<dados-usuario nome="{{dados.nome}}"
               email="{{dados.email}}"
               cidade="{{dados.cidade}}">
</dados-usuario>

<script src="/directives/dados_usuario.js"></script>
<script src="/controllers/controller.js"></script>
</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .