$routeProvider 未重定向到 templateUrl答案

【问题标题】：$routeProvider not redirecting to templateUrl$routeProvider 未重定向到 templateUrl
【发布时间】：2017-07-08 22:34:14
【问题描述】：

我正在使用 AngularJS 创建一些 CRUD 页面，并且在用户页面列表中，一旦用户单击“Edit”按钮，我就会尝试重定向到编辑页面。但由于某种原因，$routeProvider 无法正常工作。

这是我的index.html 显示用户列表

<tr ng-repeat="user in usersData">
    <td>{{ user.firstname }}</td>
    <td>{{ user.lastname }}</td>
    <td>{{ user.jobtitle }}</td>
    <td>{{ user.userprofile.sex }}</td>
    <td>{{ user.userprofile.maritalstatus }}</td>
    <td><a ng-click="editUser(user.id)" class="btn btn-small btn-primary">edit</a></td>
    <td><a ng-click="deleteUser(user.id)" class="btn btn-small btn-danger">delete</a></td>
</tr>

我的app.js

var app = angular.module('benefitApp', ['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
        .when("/editUser/:userId", {
                templateUrl : "templates/editUser.html"
            });
});

app.controller('userController', ['$scope','$http','$location',function($scope, $http, $location) {
  $http.get("https://localhost:8443/benefits/v1/users/").then(function (response){
      $scope.usersData = response.data;
  });
  $scope.editUser = function(userId) {    
      $location.path('/editUser/' + userId);
  }
}]);

我的目录结构如下

src/main/resources/static/js/app.js
src/main/resources/static/css/bootstrap.css
src/main/resources/templates/index.html
src/main/resources/templates/editUser.html

我错过了什么？单击“编辑”按钮后，浏览器中的 url 更改为 https://localhost:8443/home#!/editUser/1，但它永远不会被路由到 editUser.html

【问题讨论】：

试试home/editUser/:userid。更好的是，使用 $location 的 html5 模式：docs.angularjs.org/api/ng/provider/$locationProvider
@SimonPoole - 不起作用...我尝试添加 $locationProvider

标签： javascript angularjs web-applications

【解决方案1】：

尝试添加这个和 ng-view 指令$location.path('editUser/' + userId);

【讨论】：

还是一样的结果

【解决方案2】：

尝试在您的应用中添加 ng-view 指令，以便 $route 服务可以呈现正确的模板。

【讨论】：

我添加了这个，仍然没有变化。这是相同的输出

【解决方案3】：

我通过将模板移动到我在静态文件夹下创建的视图文件夹解决了这个问题。

app.config(function($routeProvider,$locationProvider){  
    $locationProvider.html5Mode(true);
    $routeProvider.when('/listUser', {templateUrl: 'views/listUser.html', controller: 'userController'});
    $routeProvider.when('/listCompany',{templateUrl: 'views/listCompany.html', controller: 'companyController'});
    $routeProvider
        .when('/editUser/:userId', {
                templateUrl : 'views/editUser.html'
            })
            ;   
    $routeProvider
        .when('/editCompany/:companyId', {
            templateUrl : 'views/editCompany.html'
        })
        ;
    $routeProvider.when('/createUser',{templateUrl:'views/createUser.html'});
    $routeProvider.when('/createCompany',{templateUrl:'views/createCompany.html'});
});

【讨论】：