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">×</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>