Question

请原谅我，如果对于一个角色大师来说这是一个简单的问题，我对服务很新。

下面是我的控制器片段，其中我尝试发出服务请求以从我的JSON文件中调出数据＆＃34; jobs.json＆＃34;。

当我加载网页时，我没有收到数据，我也没看到检查器元素中的JSON文件。

我认为我的下面的代码中存在不正确的内容。有谁问题是什么？ Click here if you need to play about with the code

"use strict"; 

var app = angular.module("tickrApp", []);

app.service("tickrService", function ($http, $q){
var deferred = $q.defer();
$http.get('app/data/items.json').then(function (data){
    deferred.resolve(data);
});

this.getItems = function () {
    return deferred.promise;
}
  })

 .controller('tickCtrl', function($scope, tickrService) {

var promise = tickrService.getItems();
promise.then(function (data){

    $scope.items= getData;
    console.log($scope.items);
});

Answer 1

在getItems函数的成功处理程序中，您正在存储getData，未定义。您想要存储data。

因此，在控制器中，您对getItems()的呼叫应如下所示

tickrService.getItems().then(function (data) {
    $scope.items = data;
});

另外，您想在getItems中进行$ http调用。像那样：

this.getItems = function () {
    var deferred = $q.defer();
    $http.get('app/data/items.json').then(function (data) {
        deferred.resolve(data);
    });
    return deferred.promise;
}

然而，您可以避免围绕承诺的上述样板代码，因为$http.get会为自己返回一个承诺。您的服务和控制器可以更简洁，更少受到样板代码的污染。

服务可以简单：

app.service("tickrService", function ($http) {

    this.getItems = function () {
        return $http.get('app/data/items.json');
    }
});

控制器可以缩短为：

app.controller('tickCtrl', function ($scope, tickrService) {

    tickrService.getItems().then(function (response) {
        $scope.items = response.data;
    })
});

请注意，$http解析的回复是包含(link to doc)的对象：

data - 使用转换函数转换的响应体。
status - 响应的HTTP状态代码。
headers - {function([headerName])} - 标题获取功能。
config - 用于生成请求的配置对象。
statusText - 响应的HTTP状态文本。

因此，在getItems的成功处理程序中，我们存储的是response.data，它是响应主体，而不是整个响应对象。

Answer 2

在您的Plunkr中，您遇到了一些错误，例如错误方式的<script>标记（您需要首先使用Angular，因此您的代码可以使用angular.module）。您还使用ng-app-data而不是data-ng-app的错误属性。

关键问题在于JS代码，$http.get()调用成功处理程序的第一个参数是一个具有data属性的对象，它是返回的实际数据。所以你应该用这个属性解决你的承诺。

然后在控制器中，如Michael P.所说，getData未定义，您应该使用传入的data参数。

app.service("tickrService", function($http, $q) {
  var deferred = $q.defer();
  $http.get('jobs.json').then(function(response) {
    deferred.resolve(response.data);
  });

  this.getjobs = function() {
    return deferred.promise;
  }
})

.controller('tickCtrl', function($scope, tickrService) {

  var promise = tickrService.getjobs();
  promise.then(function(data) {

    $scope.jobs = data;
    console.log($scope.jobs);
  });

});

请参阅forked Plunkr。

从角度服务加载JSON数据

2 个答案: