從角度服務加載JSON數據

Question

如果這對於有角度的專家來說只是一個簡單的問題，請原諒我，我對服務還是相當陌生的。

以下是我的控制器的代碼段，在該代碼段中，我嘗試發出服務請求以從JSON文件“ jobs.json”中調出數據。

加載網頁時我沒有收到數據，也沒有在inspector元素中看到JSON文件。

我認為下面的代碼中有錯誤。 有人問什么問題嗎？ 如果您需要使用代碼，請單擊此處

"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;
}

但是 ，您可以避免在promise周圍使用上述樣板代碼，因為$http.get自身返回promise。 您的服務和控制器可能更簡潔，而且不會受到樣板代碼的污染。

該服務可能很簡單：

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解析的響應是一個包含（指向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);
  });

});

參見分叉的Plunkr 。