AngularJS Tratar exceções do Java EE

Front-end
#1

Efetuei o tratamento de erros no back end e preciso que os mesmos sejam mostrados no front end Angular Js.

Podem me ajudar com um exemplo?

Obrigado

#2

Até onde você conseguiu chegar ?

Já fez a implementação da chamada do angular para o backend ?

Se você compartilhar o código que já tem fica mais fácil ajudar.

#3

Voce pode retornar um http code, 404, 500, e uma mensagem por exemplo.

#4

1 - Realizei todo o tratamento das exceções no java e estou conseguindo visualizar a mensagem no front retornando o erro 400 :

angular.min.js:103 POST http://localhost:8080/country 400 (Bad Request)(anonymous function) 
Objectvalue: "Dados duplicados"__proto__: Objectheaders: (d)status: 400statusText: "Bad Request"__proto__: Object

Porem preciso passar está mensagem na tela ao clicar em cadastrar.

2 - Sim, controller e service.

3 - Segue código front end.

<div class="page-content-inner">
	<section class="panel">
		<div class="panel-body">
			<div class="row">
				<div class="col-lg-12">
					<button type="submit" class="btn btn-success pull-right btn-sm" data-toggle="modal" data-target="#myModal" ng-click="novo()" >
						<span class="glyphicon glyphicon-plus">Novo</span>
					</button>
					
					<h4>Cadastro de Estados</h4>
					<br />
					
					<div class="form-group row">
						<div class="col-md-1">
							<label class="form-control-label">Busca</label>
						</div>
						
						<div class="col-md-4">
							<input type="text"  class="form-control ng-pristine ng-valid" placeholder="Procurar Estado..." ng-model="searchDescription">
						</div>
					</div>
					
					<div class="table-responsive margin-bottom-50">
						<table class="table table-hover thead-default nowrap table-condensed">
							<thead>
								<tr>
									<th>#</th>
									<th>Pais</th>
									<th>Descrição</th>
									<th>Código</th>
									<th>Região</th>
									<th>Ações</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="state in states | filter:searchDescription">
									<td>{{state.id}}</td>
									<td>{{state.country.description}}</td>
									<td>{{state.description}}</td>
									<td>{{state.code}}</td>
									<td>{{state.region}}</td>
									<td>
										<a href="" ng-click="edit(state)" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit fa-lg"></i></a>
										<a href="" ng-click="remove(state)"><i class="fa fa-times fa-lg"></i></a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="padding-top: 70px ">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<h4 class="modal-title" id="myModalLabel">Novo Estado</h4>
								</div>
								
								<div class="modal-body">
									<div class="panel">
										<form name="formulario" class="well" ng-submit="enviar()">
											<div class="form-group">
												<label for="criterio_busca">País</label>
												<select style="text-transform: uppercase" ng-model="state.country.id" ng-options="country.id as country.description for country in countries" required></select>
											</div>
											
											<div class="form-group">
												<label class="texto_calibri">Descrição</label>
												<input type="text" maxlength="40" class="form-control input-sm texto_calibri"  ng-model="state.description" required >
											</div>
											
											<div class="form-group">
												<label class="texto_calibri">Código</label>
												<input type="text" maxlength="2" class="form-control input-sm texto_calibri"  ng-model="state.code" required >
											</div>
											
											<div class="form-group">
												<label class="texto_calibri">Região</label>
												<input type="text" maxlength="10" class="form-control input-sm texto_calibri" ng-model="state.region" required >
											</div>
											
											<input type="submit"  value="{{!state.id ? 'Cadastrar' : 'Atualizar'}}" class="btn btn-primary btn-sm">
											<button type="button" ng-click="cancel()" class="btn btn-default btn-sm">Limpar</button>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- End  -->
</div>
#5

Não seria mais fácil criar no objeto de retorno um cabeçalho contendo as informações de erro? Código e mensagem? É assim que trabalho e funciona para qualquer front-end

#6

O status 409, é sobre conflito, ele também poderia ser usado.
Abre um pop up com a mensagem por ex, sua dificuldade está em acessar o valor da propriedade ou na forma de exibir ?

#7

Acredito que na forma de exibir pq neste momento preciso pegar a mensagem através do js e assim passar para o angular.

#8

No seu endpoint do backend, devolve um Response com o erro

#9

Sim

public State save(final State state) {
	try {
		return commonDao.save(state);
	} catch (Exception e) {
		throw new HunzaException("Dados duplicados", e);
	}
}