https://i.sstatic.net/Iovci.png
I am currently facing an issue with my project structure. I received a "Failed to load resource: the server responded with a status of 404 ()" error message, indicating that ShowDetail.jsp is not found. Can anyone advise on the correct path to give in the Route templateURL?
https://i.sstatic.net/Iovci.png
My objective is to populate details on another page when a name is clicked.
I am utilizing Server side (Spring MVC) Service to retrieve the required details.
Below is a snippet of my client-side code:
var App = angular.module("myApp", ['ngRoute', 'angularUtils.directives.dirPagination']);
App.config(['$routeProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/detail/:username', {
templateUrl: 'showDetail.jsp',
controller: 'detailController'
});
}
]);
angular.module('myApp').controller("myController", function($scope, $http) {
function getDetails(name) {
$http.get(REST_SERVICE_URI + '/detail/' + name)
.then(
function(response) {
self.detail = response.data;
},
function(errResponse) {
console.error('Error while fetching Users');
}
);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<div ng-controller="myController as ctrl">
<tbody>
<tr dir-paginate="u in ctrl.users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td><span ng-bind="u.id"></span>
</td>
<td>
<a>
<span ng-bind="u.name" ng-click="ctrl.getDetails(u.name)"></span>
</a>
</td>
<td><span ng-bind="u.department"></span>
</td>
<td>
<span ng-bind="u.job"></span>
</td>
</tr>
</tbody>
</div>IndexController.java
@RequestMapping(value= "/detail/{name}",method = RequestMethod.GET)
public String getDetails(@PathVariable("name") String name) {
return "showDetail";
}
MainController.java
@RequestMapping(value = "/detail/{name}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<Detail> getDetails(@PathVariable("name") String name) {
System.out.println("Fetching detail with name " + name);
Detail detail = userService.findByName(name);
if (detail == null) {
System.out.println("Detail with id " + name + " not found");
return new ResponseEntity<Detail>(HttpStatus.NOT_FOUND);
}
return new ResponseEntity<Detail>(detail, HttpStatus.OK);
}
ServiceImpl.java
public Detail findByName(String name) {
for(Detail deatil : details){
if(deatil.getFirstname().equalsIgnoreCase(name)){
return deatil;
}
}
return null;
}
I have successfully fetched the details and am able to access them in the AngularJS controller. However, when I click on a name field in the table, the corresponding details should be displayed on another page. Although I can retrieve the required details, the page is not changing. I suspect the issue lies with routing in AngularJS and Spring MVC. I would appreciate any assistance on how to resolve this problem.