Question

仍在努力学习Angular。

我这里有一个傻瓜 - https://plnkr.co/edit/oEXn5JDKeqoN82jz3PC1?p=preview

尝试使用$ http和$ q加载外部json文件

我有一个simpleController在simpleService文件中调用getJson（）函数来加载json。

只是尝试在主页上输出数据以开始。

本地我在控制台中收到错误

        TypeError: simpleService.getJson is not a function

服务

(function() {

  angular.module('cxoAppJs').service('simpleService', simpleService);

  simpleService.$inject = ['$http', '$q'];

  function simpleService($http, $q) {

    function getJson() {

      var deferred = $q.defer();

      http.get('https://api.myjson.com/bins/gznzh').then(function() {

        deferred.resolve(data);

        return deferred.promise;

      })

    }

  }

})();

Answer 1

像Tome Pejoski所说，你不需要包装$ http.get函数

但是你的错误不是自己包装的问题。您必须在服务中返回您的功能才能访问它

(function(){
      angular.module('cxoAppJs').service('simpleService', simpleService);

      simpleService.$inject = ['$http', '$q'];
      function simpleService($http, $q){
        var service = {};
        service.getJson = function(){ return $http.get('https://api.myjson.com/bins/gznzh');};
        return service;
      }
})();

之后，您可以在控制器中调用它

angular.module('cxoAppJs').controller('ExampleCtrl', ExampleCtrl);
ExampleCtrl.$inject('$scope', 'simpleService');
function ExampleCtrl($scope, simpleService){
  $scope.exampleData = {};
  simpleService.getJson().then(function(request){
     $scope.exampleData = request.data
  })
}

编辑：

Quick Example Plunker

Answer 2

您不需要在promise中包装HTTP调用。 $http会自动创建承诺。

您的代码应如下所示：

$http.get('https://api.myjson.com/bins/gznzh').then(function(result){
  return result.data;       
}

Angular - $ http，$ q load json

2 个答案: