AngularJS（正在加载 JSON 自定义服务）

Question

我正在尝试构建用于加载 json 文件的服务。我做错了什么？

服务

app.service("jsonService", function ($http, $q)
{
    var deferred = $q.defer();

    $http.get('./assets/json/home.json').then(function (data)
    {
        deferred.resolve(data);
    });

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

我的控制器

app.controller('homeController', function ($scope, jsonService) {

    var promise = jsonService.getHomeItems();
    promise.then(function (data)
    {
        $scope.home_items = data;
        console.log($scope.home_items);
    });

});

控制台错误：未定义 $scope

Answer 1

您缺少dependency injection。

您的服务应该是：

app.service("jsonService", ["$http", "$q", function ($http, $q)
{
    var deferred = $q.defer();

    $http.get("./assets/json/home.json").then(function (data)
    {
        deferred.resolve(data);
    });

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

还有你的控制器：

app.controller("homeController", ["$scope", "jsonService", function ($scope, jsonService)
{
    var promise = jsonService.getHomeItems();
    promise.then(function (data)
    {
        $scope.home_items = data;
        console.log($scope.home_items);
    });
}]);

Answer 2

您有一个常见的反模式，您正在解包由 $http 编辑的承诺 return，然后将数据重新包装在承诺中。这是不必要的，只是 return 由 $http.

编辑的承诺 return

this.getHomeItems = function () {
    return $http.get("./assets/json/home.json");
}

Answer 3

如果不查看您未提供的 HTML，我认为您可能没有将 $scope 注入到您的控制器构造函数中：

app.controller('homeController', ['$scope', function ($scope,  jsonService) {
    ...
}]);

理论上，AngularJS 应该能够从变量名中推断出依赖关系，但根据官方文档，在某些情况下这不起作用，并且不鼓励不显式注入依赖关系的做法。所以你可能想尝试显式注入（如上所示）。

在此处查看官方文档中的示例：

https://docs.angularjs.org/guide/controller

这里：

https://docs.angularjs.org/guide/di

AngularJS（正在加载 JSON 自定义服务）

AngularJS (Loading JSON with custom Service)

angularjs

angular-services