Spring MVC 使用 Angular Js，无法从一个导航到另一个

Question

这是我的项目结构，加载资源失败：服务器响应状态为404（），未找到ShowDetail.jsp，我需要在Route templateURL中给出哪个路径？

当点击名称时，我需要在另一个页面上填充详细信息，

我正在使用服务器端（Spring MVC）服务来获取详细信息。

我的客户端代码在sn-p下面

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

这些是我的文件，我可以获取详细信息并进入 angularJS 控制器，当我单击表中的名称字段时，它应该在另一个页面中显示相应的详细信息，我可以获取相应的详细信息，但页面没有改变，我在 Angular Js 和 SpringMVC 中遇到路由问题，请帮我解决这个问题

Answer 1

---

您需要使用 $location 来更改页面。根据您的路线配置，它看起来像这样：

function (response) {

    self.detail= response.data;

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

},

注意： 您必须将 $location 注入控制器

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

Answer 2

在您的$http.get 成功块中添加$window.location.href。

$http.get(REST_SERVICE_URI + '/detail/' + name)
      .then(
        function(response) {

          self.detail = response.data;
          $window.location.href = "#yourMappingUrl";

        },
        function(errResponse) {
          console.error('Error while fetching Users');

        }
      );