0

Eu tenho um projeto web no qual estou tentando pegar os dados do banco e colocar, através do angular, em uma tabela. A forma como eu achei foi de usar um arquivo jsp e colocar os dados atraves de java. Estava funcionando perfeitamente. Porém quando resolvi transformar o projeto em single page começou a dar um problema de que o controller não está registrado.

App.js

var app = angular.module('app',['ngRoute', 'angularUtils.directives.dirPagination']);

app.config(function($routeProvider, $locationProvider)
{

   $routeProvider
   .when('/home', {
      templateUrl : 'app/views/home.html'
   })
   .when('/venda', {
      templateUrl : 'app/views/venda.jsp',
      controller  : 'VendaCtrl',
   })
   .when('/cliente', {
      templateUrl : 'app/views/cliente.jsp',
   })
   .when('/animal', {
      templateUrl : 'app/views/animal.jsp'
   })
   .when('/produtos', {
      templateUrl : 'app/views/produtos.jsp'
   })
   .when('/estoque', {
      templateUrl : 'app/views/estoque.jsp'
   })
   .when('/orcamento', {
      templateUrl : 'app/views/orcamento.jsp'
   })
   .when('/historico', {
      templateUrl : 'app/views/historico.jsp'
   })
   .otherwise ({ redirectTo: '/home' });
});

app.controller('VendaCtrl', function($rootScope, $location, $scope, $window, $http)
{
  $rootScope.activetab = $location.path();


  $scope.sortType = 'codigo'; 
  $scope.sortReverse  = false; 
  $scope.searchProduto   = ''; 
  $scope.pageSize = 10;
  $scope.valor = 0;
  $scope.valorTotal = 0;
  $scope.valorDesconto = 0;
  $scope.funcionario = '';
  $scope.cliente = '';

  $scope.produtos = [];  

  var carregarProdutos = function (){
      $http.get("http://localhost:8080/Karppa/app/json/jsonProdutos.json").then(function (response){
            $scope.produtos = response.data;
            console.log(response.data);
      });
  };

  $scope.desconto = function(valorDesconto){
      $scope.valorDesconto = valorDesconto;
  }

  $scope.total = function(produtos){
      var produtoSelecionado = produtos.filter(function(produto){
          if (produto.marcado) return produto;
      });
    $scope.valor = 0;
    if(produtoSelecionado != null){
        for (var i=0; i < produtoSelecionado.length; i++) {         
            $scope.valor = parseFloat($scope.valor) + parseFloat(produtoSelecionado[i].preco.replace(",","."))*parseFloat(produtoSelecionado[i].quantidade2);   
        }
    }
    if($scope.valorDesconto == 5){
        var porcentagem = "0.0"+$scope.valorDesconto;
    }else{
        var porcentagem = "0."+$scope.valorDesconto;
    }
    $scope.valorTotal = $scope.valor-($scope.valor * parseFloat(porcentagem));
    $scope.valorTotal = "R$ "+ parseFloat($scope.valorTotal).toFixed(2).replace(".",",");
  }

  $scope.refresh = function() {
      $window.location.reload();
  }

  $scope.templateUrl = "js/include.html";
  carregarProdutos();
});

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@ page import="servlet.criarContaFuncionario" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="">
<meta name="author" content="">
<title>Karppa</title>

<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css"
    rel="stylesheet" type="text/css">

<!-- Plugin CSS -->
<link href="vendor/datatables/dataTables.bootstrap4.css"
    rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
<link rel="icon" href="Karppa.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Karppa.ico" type="image/x-icon" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/style.css"> <!-- Gem style -->
<link rel="stylesheet" href="css/mdb.css"> <!-- Gem style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<!-- Angular -->
<script src="js/angular.js"></script>
<script src="js/dirPagination.js"></script>
<link rel="stylesheet" href="css/stylePagination.css" />  

<link rel="stylesheet" href="css/jquery-ui.css"> 
<link rel="stylesheet" href="css/jquery-ui.theme.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="vendor/jquery/jquery-ui.js"></script>

<!-- Single Page -->
<script src="js/angular-route.js"></script>
<style type="text/css">
.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;}
</style>
</head>
<body class="fixed-nav" id="page-top">

    <script src="app/app.js"></script>
    <script src="app/controllers/controllers.js"></script>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
        id="mainNav"> <a class="navbar-brand" href="index.jsp">Karppa</a>
    <button class="navbar-toggler navbar-toggler-right" type="button"
        data-toggle="collapse" data-target="#navbarResponsive"
        aria-controls="navbarResponsive" aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav">
            <li class="nav-item active" data-toggle="tooltip"
                data-placement="right" title="Painel de Controle"><a
                ng-class="{active: activetab == '/home'}" class="nav-link" href="#!home"> <i
                    class="fa fa-fw fa-dashboard"></i> <span class="nav-link-text">
                        Painel de Controle</span>
            </a></li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right"
                title="Clientes"><a class="nav-link" ng-class="{active: activetab == '/cliente'}" href="#!cliente"> <i
                    class="fa fa-fw fa-users"></i> <span class="nav-link-text">
                        Clientes</span>
            </a></li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right"
                title="Animal"><a class="nav-link" ng-class="{active: activetab == '/animal'}" href="#!animal"> <i
                    class="fa fa-fw fa-paw"></i> <span class="nav-link-text">
                        Animal</span>
            </a></li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right"
                title="Produtos"><a
                class="nav-link nav-link-collapse collapsed" data-toggle="collapse"
                href="#collapseProdutos"> <i class="fa fa-fw fa-dropbox"></i> <span
                    class="nav-link-text"> Produtos</span>
            </a>
                <ul class="sidenav-second-level collapse" id="collapseProdutos">
                    <li><a ng-class="{active: activetab == '/produtos'}" href="#!produtos">Produtos</a></li>
                    <li><a ng-class="{active: activetab == '/estoque'}" href="#!estoque">Estoque</a></li>
                </ul></li>
            <li class="nav-item" data-toggle="tooltip" data-placement="right"
                title="Vendas"><a class="nav-link nav-link-collapse collapsed"
                data-toggle="collapse" href="#collapseVendas"> <i
                    class="fa fa-fw fa-shopping-cart"></i> <span class="nav-link-text">
                        Vendas</span>
            </a>
                <ul class="sidenav-second-level collapse" id="collapseVendas">
                    <li><a ng-class="{active: activetab == '/venda'}" href="#!venda">Realizar Venda</a></li>
                    <li><a ng-class="{active: activetab == '/orcamento'}" href="#!orcamento">Orçamento</a></li>
                    <li><a ng-class="{active: activetab == '/historico'}" href="#!historico">Histórico</a></li>
                </ul></li>
        </ul>
        <ul class="navbar-nav sidenav-toggler">
            <li style="padding-bottom: 10px;" class="nav-item"><a class="nav-link text-center"
                id="sidenavToggler"> <i class="fa fa-fw fa-angle-left"></i>
            </a></li>
        </ul>
        <ul class="navbar-nav ml-auto main-nav">

            <li><a class="cd-signin" href="#0">Logar</a></li>
            <li><a class="cd-signup" href="#0">Registrar</a></li>

        </ul>
    </div>
    </nav>


    <div ng-view></div> 

        <!-- Scroll to Top Button -->
        <a class="scroll-to-top rounded" href="#page-top"> <i
            class="fa fa-angle-up"></i>
        </a>

        <div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
        <div class="cd-user-modal-container"> <!-- this is the container wrapper -->
            <ul style="padding: 0 0 0 0" class="cd-switcher">
                <li style="list-style-type: none;"><a href="#0">Entrar</a></li>
                <li style="list-style-type: none;"><a href="#0">Nova Conta</a></li>
            </ul>

            <div id="cd-login"> <!-- log in form -->
                <form class="cd-form" action="logar" method="POST">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                    <i class="fa fa-fw fa-user-circle-o" aria-hidden="true"></i>                        
                            </span>
                            <input class="full-width has-padding has-border" name="userLogin" id="signin-email" type="text" placeholder="Login">
                            <span class="cd-error-message">Informe Seu Login!</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                    <i class="fa fa-fw fa-key" aria-hidden="true"></i>                      
                            </span>
                            <input class="full-width has-padding has-border" name="senha" id="signin-password" type="password"  placeholder="Senha">
                            <a href="#0" class="hide-password">Show</a>
                            <span class="cd-error-message">Informe sua senha!</span>
                        </div>
                    </div>

                    <p class="fieldset">
                        <input type="checkbox" id="remember-me" checked>
                        <label for="remember-me">Lembrar-me</label>
                    </p>

                    <p class="fieldset">
                        <input class="full-width" type="submit" value="Entrar">
                    </p>
                </form>

                <p class="cd-form-bottom-message"><a href="#0">Esqueceu sua senha?</a></p>
                <!-- <a href="#0" class="cd-close-form">Close</a> -->
            </div> <!-- cd-login -->

            <div id="cd-signup"> <!-- sign up form -->
                <form class="cd-form" action="criarConta" method="POST">

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-fw fa-user-circle-o" aria-hidden="true"></i>                        
                            </span> 
                            <input class="full-width has-padding has-border" name="usuario" id="signup-username" type="text" placeholder="Nome de Usuário">
                            <span class="cd-error-message">Informe um Nome de Usuário!</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                    <i class="fa fa-fw fa-user-circle-o" aria-hidden="true"></i>                        
                            </span>
                            <input class="full-width has-padding has-border" name="nome" id="signup-username" type="text" placeholder="Nome">
                            <span class="cd-error-message">Informe Seu Nome!</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-fw fa-user-circle-o" aria-hidden="true"></i>                        
                            </span>
                            <input class="full-width has-padding has-border" name="sobrenome" id="signup-username" type="text" placeholder="Sobrenome">
                            <span class="cd-error-message">Informe Seu Sobrenome!</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-fw fa-envelope" aria-hidden="true"></i>                     
                            </span>
                            <input class="full-width has-padding has-border" name="email" id="signup-email" type="email" placeholder="E-mail">
                            <span class="cd-error-message">Informe um E-mail!</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-fw fa-address-card" aria-hidden="true"></i>                     
                            </span>
                            <select required class="full-width has-padding has-border placeholder" name="cargo">
                                <option value="">Cargo</option>
                                <option value="1">Dono</option>
                                <option value="2">Gerente</option>
                                <option value="3">Atendente</option>
                            </select>
                            <span class="cd-error-message">Informe Seu Cargo!</span>
                        </div>
                    </div>

                    <script>
                    $('select').change(function() {
                        if ($(this).children('option:first-child').is(':selected')) {
                          $(this).addClass('placeholder');
                        } else {
                         $(this).removeClass('placeholder');
                        }
                       });
                    </script>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-fw fa-key" aria-hidden="true"></i>                      
                            </span>
                            <input class="full-width has-padding has-border" name="senha" id="signup-password" type="password"  placeholder="Senha">
                            <span class="cd-error-message">Informe Sua Senha!</span>
                        </div>
                    </div>

                    <div class="form-group">
                        <input type="checkbox" id="accept-terms" required>
                        <label for="accept-terms">Eu concordo com os <a href="#0">Termos</a></label>
                    </div>

                    <div class="form-group">
                        <input class="full-width has-padding" type="submit" value="Criar Conta">
                    </div>
                </form>

                <!-- <a href="#0" class="cd-close-form">Close</a> -->
            </div> <!-- cd-signup -->

            <div id="cd-reset-password"> <!-- reset password form -->
                <p class="cd-form-message">Esqueceu sua senha? Por favor, entre com um endereço de E-mail. Você receberá um link para criar uma nova senha.</p>
                <form class="cd-form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-fw fa-envelope" aria-hidden="true"></i>                     
                            </span>
                            <input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
                            <span class="cd-error-message">Informe um E-mail!</span>
                        </div>
                    </div>
                    <p class="fieldset">
                        <input class="full-width has-padding" type="submit" value="Alterar Senha">
                    </p>
                </form>

                <p class="cd-form-bottom-message"><a href="#0">Voltar ao Login</a></p>
            </div> <!-- cd-reset-password -->
            <a href="#0" class="cd-close-form">Fechar</a>
        </div> <!-- cd-user-modal-container -->
    </div> <!-- cd-user-modal -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/datatables/jquery.dataTables.js"></script>
    <script src="vendor/datatables/dataTables.bootstrap4.js"></script>
    <!-- Custom scripts for this template -->
    <script src="js/sb-admin.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/main.js"></script> <!-- Gem jQuery -->
</body>
</html>

cliente.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="persistencia.ClienteDAO"%>
<%@ page import="java.util.*"%>
<%@ page import="modelo.Cliente"%>
<html> <head><script src="angular.min.js"></script></head>
<script>
    var app = angular.module('app');
    app.controller('ClienteCtrl', function($rootScope, $location, $scope, $window, $http)
    {
      $rootScope.activetab = $location.path();

      $scope.sortType = 'nome'; 
      $scope.sortReverse  = false; 
      $scope.searchProduto   = ''; 
      $scope.pageSize = 10;

      // create the list of produto rolls 
      $scope.clientes = [];  

      var carregarClientes = function (){
          $.getJSON("app/json/jsonClientes.json", function (data){
                $scope.clientes = data;
                console.log(data);
          });
      };
      $scope.refresh = function() {$window.location.reload();}

      $scope.templateUrl = "js/include.html";
      carregarClientes();
    });
</script>
<div class="content-wrapper py-3" ng-controller="ClienteCtrl">
    <div class="container-fluid">
        <div class="card-body">
            <div class="table-responsive">
                <div class="table-responsive">
                    <div class="container">
                        <div class="form-group">
                            <div class="input-group">
                                <input style="margin-right: 30px;" type="text"
                                    class="form-control" placeholder="Procurar"
                                    ng-model="searchProduto">
                                <div style="width: 35%;">
                                    <label for="itensPerPage"
                                        style="text-align: right; clear: both; float: left; margin-top: 7px;">Itens
                                        por Página:</label> <input style="width: 60%; float: right;"
                                        type="number" step="5" min="5" max="25" class="form-control"
                                        ng-model="pageSize" id="itensPerPage">
                                </div>
                            </div>
                        </div>
                        <table class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <td><a href="#" ng-click="sortType = 'nome'; sortReverse = !sortReverse">
                                            Nome <span ng-show="sortType == 'nome' && !sortReverse" class="fa fa-caret-down"></span> 
                                            <span ng-show="sortType == 'nome' && sortReverse" class="fa fa-caret-up"></span>
                                    </a></td>
                                    <td><a href="#" ng-click="sortType = 'sobrenome'; sortReverse = !sortReverse">
                                            Sobrenome <span ng-show="sortType == 'sobrenome' && !sortReverse" class="fa fa-caret-down"></span> 
                                            <span ng-show="sortType == 'sobrenome' && sortReverse" class="fa fa-caret-up"></span>
                                    </a></td>
                                    <td><a href="#"
                                        ng-click="sortType = 'email'; sortReverse = !sortReverse">
                                            Email <span ng-show="sortType == 'email' && !sortReverse" class="fa fa-caret-down"></span> 
                                            <span ng-show="sortType == 'email' && sortReverse" class="fa fa-caret-up"></span>
                                    </a></td>
                                    <td><a href="#"
                                        ng-click="sortType = 'cpf'; sortReverse = !sortReverse">
                                            CPF <span ng-show="sortType == 'cpf' && !sortReverse" class="fa fa-caret-down"></span> 
                                            <span ng-show="sortType == 'cpf' && sortReverse" class="fa fa-caret-up"></span>
                                    </a></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr dir-paginate="cliente in clientes | orderBy:sortType:sortReverse | filter:searchProduto | itemsPerPage:pageSize">
                                    <td>{{cliente.nome}}</td>
                                    <td>{{cliente.sobrenome}}</td>
                                    <td>{{cliente.email}}</td>
                                    <td>{{cliente.cpf}}</td>
                                </tr>
                            </tbody>
                        </table>
                        <div>
                            <div ng-include="templateUrl"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <!-- Trigger the modal with a button -->
                <button type="button"
                    class="btn btn-primary btn-block waves-effect waves-light"
                    data-toggle="modal" data-target="#modalContactForm">Adicionar
                    Cliente</button>
                <!--Modal: Contact form-->
                <div class="modal fade" id="modalContactForm" tabindex="-1"
                    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog cascading-modal" role="document">
                        <!--Content-->
                        <div class="modal-content">
                            <!--Header-->
                            <div class="modal-header light-blue darken-3 white-text">
                                <h4 class="title">
                                    <i class="fa fa-pencil"></i> Adicionar Cliente
                                </h4>
                                <button type="button" class="close waves-effect waves-light"
                                    data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <!--Body-->
                            <div class="modal-body mb-0">
                                <form action="adicionarCliente" method="POST">
                                    <div class="md-form form-sm">
                                        <i class="fa  fa-user-circle-o prefix"></i> <input type="text"
                                            name="nome" id="form19" class="form-control"
                                            placeholder="Nome">
                                    </div>
                                    <div class="md-form form-sm">
                                        <i class="fa  fa-user-circle-o prefix"></i> <input type="text"
                                            name="sobrenome" id="form20" class="form-control"
                                            placeholder="Sobrenome">
                                    </div>
                                    <div class="md-form form-sm">
                                        <i class="fa fa-envelope prefix"></i> <input type="text"
                                            id="form21" name="email" class="form-control"
                                            placeholder="E-mail">
                                    </div>
                                    <div class="md-form form-sm">
                                        <i class="fa fa-id-card prefix"></i> <input type="text"
                                            id="form21" name="cpf" class="form-control" placeholder="CPF">
                                    </div>
                                    <div class="text-center mt-1-half">
                                        <input type="submit" ng-click="refresh()"
                                            class="btn btn-info mb-2" value="Adicionar">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</html>

1 Resposta 1

0

Teria como você postar a mensagem de erro? Isso ajuda bastante.

Ao chamar o cliente.jsp, não é necessário importar o script do AngularJS, visto que todos os arquivos já foram carregados na sua página inicial e permaneceram carregados durante a execução da sua página.

Se você necessita definir o controller dentro da página JSP, tente fazer a alteração abaixo, isso poderá resolver os eu problema.

Ao invés de fazer desta forma

    <script>
       var app = angular.module('app');
       app.controller('ClienteCtrl', function($rootScope, $location, $scope, $window, $http)
       {
           ...
       }
    </script>

Tente assim

    <script>
        function ClienteCtrl($rootScope, $location, $scope, $window, $http) {
            ...
        }
    </script>

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 .