切换到 angular-ui-router 在 $http 上导致 500 错误答案

【问题标题】：Switching to angular-ui-router results in 500 error on $http切换到 angular-ui-router 在 $http 上导致 500 错误
【发布时间】：2015-07-30 14:56:03
【问题描述】：

我正在开发一个应用程序，它在前端使用 Angular，在后端使用 Scala。

最初，该应用使用 Angular 的默认 $routeProvider。

然而，在尝试切换到 angular-ui-router 时，$http.get 和 $http.post 不再工作（我假设 $http 完全损坏），而客户端路由仍然按预期工作（视图和控制器已正确加载） .

这是我的路线，使用$routeProvider：

$routeProvider
.when(
  "/Home", {
    templateUrl: "app/components/home/home.html",
    controller: "HomeController"
  }
)
.when(
  "/Project/:projectId/ActivityReport", {
    templateUrl: "app/components/activity-report/activityReport.html",
    controller: "ActivityReportController"
  }
)
.when(
  "/Project/:projectId/ActivityReport/:id/print", {
    templateUrl: "app/components/activity-report/activityReportPrint.html",
    controller: "ActivityReportController"
  }
)
.when(
  "/Project/:projectId/ActivityReport/:id", {
    templateUrl: "app/components/activity-report/activityReport.html",
    controller: "ActivityReportController"
  }
)
.when(
  "/ProjectOverview", {
    templateUrl: "app/components/project/project.html",
    controller: "ProjectController"
  }
)
.when(
  "/Login", {
    templateUrl: "views/login.html"
  }
)
.when(
  "/404", {
    templateUrl: "app/shared/404.html"
  }
)
.when(
  "", {
    redirectTo: '/Home'
  }
)
.otherwise({redirectTo: 'Home'});

// use the HTML5 History API
$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

并使用$stateProvider（请假设templateUrl 相同，同时进行了重大重组）：

$urlRouterProvider.otherwise('/');

$stateProvider
.state('home', {
  url: '/',
  templateUrl: 'app/components/home/home.html',
  controller: 'HomeController'
})
.state('activity-report', {
  url: '/Project/:projectId/ActivityReport/:id',
  templateUrl: 'app/components/activity-report/activityReport.html',
  controller: 'HomeController'
})
.state('activity-report-print', {
  url: '/Project/:projectId/ActivityReport/:id/print',
  templateUrl: 'app/components/activity-report/activityReportPrint.html',
  controller: 'ActivityReportController'
})
.state('activity-report-new', {
  url: '/Project/:projectId/ActivityReport/',
  templateUrl: 'app/components/activity-report/activityReport.html',
  controller: 'HomeController'
})
.state('project', {
  url: '/ProjectOverview',
  templateUrl: 'app/components/project/project.html',
  controller: 'ProjectController'
})
.state('login', {
  url: '/Login',
  templateUrl: 'views/login.html'
})
.state('404', {
  url: '/404',
  templateUrl: 'app/shared/404.html'
})

// use the HTML5 History API
$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

这里是应该get 和post 数据的工厂，在切换到ui-router 时会完全中断（500 服务器错误）：

angular.module('bananas').factory("activityReportFactory", ['$http', 'cacheFactory', function ($http, cacheFactory) {

    var urlBase = '/activity';
    var dataFactory = {};

    dataFactory.getActivityReport = function(id){
        return $http.get(urlBase + '/' + id);
    };

    dataFactory.saveActivityReport = function(activityReport){
        cacheFactory.remove(urlBase);
        cacheFactory.remove(urlBase + 'project/' + activityReport.projectId + '/activities');
        cacheFactory.remove(urlBase + '/' + activityReport.id);


        return $http.post(urlBase, activityReport);
    };

    dataFactory.cancel = function(activityReport){
        cacheFactory.remove(urlBase);
        cacheFactory.remove(urlBase + 'project/' + activityReport.projectId + '/activities');
        cacheFactory.remove(urlBase + '/' + activityReport.id);

        return $http.delete(urlBase + '/' + activityReport.id);
    };

    return dataFactory;
}]);

确切的错误信息：POST http://localhost:9000/activity 500 (Internal Server Error)

最后，服务器日志：http://pastebin.com/iiJmAnaW

切换到ui-router 后应用程序会受到什么影响？其他一切都保持不变。

编辑：这里是响应和请求标头，根据要求：http://pastebin.com/rYLtVVxY

【问题讨论】：

你能在浏览器控制台查看POST请求和响应吗？
另外，您能否暂时将以下代码注释掉，因为您的可用代码中的一些内容我还不清楚 - $locationProvider.html5Mode({ enabled: true, requireBase: false }) ;
@Tiago pastebin 没有显示您发布的数据
@Tiago 是的，我也在 Lint 上检查了它。现在检查数据类型是否相似，意味着预期是 Int 并且您提供的是 Int/boolean
这里更具体地说 - "startDateFormatted": "Invalid date", "startTimeFormatted": "Invali: d te", "endDateFormatted": "Invalid date", "endTimeFormatted": "Invali: d te "

标签： javascript angularjs scala angular-ui-router

【解决方案1】：

根据关于您切换到 ui-router 的讨论，检查您当前的控制器签名...

angular.module('MELon').controller('ActivityReportController', 
    ['$scope', '$http', '$route', '$routeParams', 
    [...]

您可能会以某种方式使用$route 和$routeParams，可能会收集一个值以供以后在$http 调用中使用。让我们切换到 ui-router 的等价物 - $state 和 $stateParams...

angular.module('MELon').controller('ActivityReportController', 
    ['$scope', '$http', '$state', '$stateParams', 
    [...]

请参阅$stateParams 和$state 了解用法

【讨论】：