Question

我将以下状态作为AngularJS应用程序的一部分：

.state('app.stages', {
      url: '/stages',
      views: {
        'menuContent': {
      templateUrl: 'templates/stages.html',
      controller: 'StagesCtrl'
    }
  }
})

.state('app.stage', {
url: '/stages/:stageId',
views: {
  'menuContent': {
    templateUrl: 'templates/stage.html',
    controller: 'StageCtrl'
  }
}

相关的控制器是：

controller('StagesCtrl', function($scope,$http) {
$http.get("http://localhost/apistages")
.then(function(response) {
    $scope.stages = response.data;
});
})

.controller('StageCtrl', function($scope, $http, $stateParams) {

  $http({
    method: 'GET',
    url: 'http://localhost/apistage/',
    params: {stageId: $stateParams.stageId}
 }).then(function successCallback(response) {
    $scope.stage = response.data;
 }, function errorCallback(response) {

  });
});

阶段列表运行良好，但阶段控制器中的查询尝试访问http://localhost/apistage/?stageId=43，这会导致500（内部服务器错误）。

我需要使用的网址格式为http://localhost/apistage/43。如何调整查询以获取该URL？

Answer 1

然后不要在$ http GET请求上使用params选项。而是在调用服务时使用URL上的简单字符串连接

$http({
    method: 'GET',
    url: 'http://localhost/apistage/'+$stateParams.stageId //append state parameter in URL itself
})

对于REST API，我强烈建议您使用角度为ngResource($resource)的模块。它具有处理休息呼叫的良好能力。

Answer 2

您不应该使用两个控制器。仅使用一个控制器并使用$ routeParams获取url参数。现在，您可以检查参数是否存在，并根据需要区分您的逻辑。您可以使用以下代码： var stageId = $routeParams.stageId; If(stageId) Do something else Do something different

如何更改AngularJS get请求的结构？

2 个答案: