Error with controller in another file - AngularJS

0

I have a web project in which I am trying to get the data from the bank and put, through the angular, into a table. The way I found it was to use a jsp file and put the data through java. It was working perfectly. But when I decided to turn the project into a single page it started to give a problem that the controller is not registered.

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--><scriptsrc="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><scriptsrc="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><scriptsrc="js/main.js"></script> <!-- Gem jQuery -->
</body>
</html>

client.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>
    
asked by anonymous 26.11.2017 / 15:36

1 answer

0

Would you like to post the error message? This helps a lot.

When calling client.jsp, you do not need to import the AngularJS script, since all files have already been uploaded to your home page and remained loaded during the execution of your page.

If you need to set the controller inside the JSP page, try to make the change below, this might solve the problem.

Instead of doing this

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

Try this way

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