Spring MVC Working with Angular Js, not able to navigate from one to another

Question

this is my project structure, Failed to load resource: the server responded with a status of 404 (), ShowDetail.jsp is not found, which path i need to give in Route templateURL ?

When click on name i need to populate details on another page,

i am using Server side(Spring MVC) Service to fetch details.

My client side code is in below snippet

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;
}

These are my files, i am able to fetch details and getting in angularJS controller, when i click on a name field in table it should display corresponding details in another page, i can fetch the corresponding details, but page is not changing, i am having problem With routing in angular Js and SpringMVC, Please help me how to resolve this issue

Sagar Sodah Sagar Sodah · Accepted Answer · 2017-03-03T09:45:04

You need to use $location to change the page. Based on your route configuration it would look something like this:

function (response) {

    self.detail= response.data;

    //Add these two lines
    var username = response.data.username;
    $location.path('/detail/' + username);

},

Note: You will have to inject $location into the controller

angular.module('myApp').controller("myController", function($scope, $http, $location) {
    ...
});

Spring MVC Working with Angular Js, not able to navigate from one to another

2 Answers