Question

我正在使用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

我缺少什么？点击“修改”按钮后，浏览器中的网址将更改为https://localhost:8443/home#!/editUser/1，但它永远不会被路由到editUser.html

Answer 1

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

Answer 2

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

Answer 3

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

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

$ routeProvider不重定向到templateUrl

3 个答案: