错误 - AngularJS 服务与 GET JSON 文件

Question

我正在开发一个简单的示例 AngularJS 应用程序，它从外部 JSON 数据文件中读取数据。我已经尝试了所有方法，但找不到应用程序无法运行的原因。任何输入将不胜感激。

'filmCtrl'控制：

angular
    .module('mediaApp')
    .controller('filmCtrl', function(filmList) {
        var vm = this;
        vm.films = filmList.retrieveFilms();
    });

'filmList' 服务：

angular
    .module('mediaApp')
    .service('filmList', function($http) {

        var vm = this;

        vm.retrieveFilms = function() {
            return $http
                .get('films.json')
                .then(function(response) {
                    return response.films;
                });
        };

        return vm;
    });

JSON:

{
    "films":[
        {
            "title": "Reservoir Dogs",
            "director": "Quentin Tarantino",
            "year": "1992"
        },
        {
            "title": "2001: A Space Odyssey",
            "director": "Stanley Kubrick",
            "year": "1967"
        },
        {
            "title": "Memento",
            "director": "Christopher Nolan",
            "year": "2000"
        },
        {
            "title": "Enter the Dragon",
            "director": "Robert Clouse",
            "year": "1973"
        },

         [etc]...
    ]
}

所有这些文件都保存在同一个文件夹中，并已包含在我的 HTML 文件中。 JSON 已经过验证。我哪里做错了？

Answer 1

在 then(response) 中，响应 object 具有以下属性：

data – {string|Object} – 使用转换函数转换的响应 body。

status – {number} – 响应的 HTTP 状态代码。

headers – {function([headerName])} – Header getter 函数。

config – {Object} – 用于生成请求的配置 object。

statusText – {string} – 响应的 HTTP 状态文本。

所以这应该是

return $http
   .get('films.json')
   .then(function(response) {
      return response.data.films;
});

而不是

return $http
   .get('films.json')
   .then(function(response) {
      return response.films;
});

有关详细信息，请参阅 the official doc。

如果您不是运行任何类型的网络服务器并且只是使用 file://films.json 进行测试，那么您可能运行进入 same-origin政策问题。参见：

http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy

一些错误信息可能有用。

Answer 2

根据我的意见，您可以像这样创建 service -

mediaApp.service('filmList', ['$http',
function($http) {
    var vm = this;
    vm.retrieveFilms = function() {
        return $http.get('data.json');
    };
    return vm;
}]);

在 controller 中，您可以像 -

一样消费这个 service

mediaApp.controller('filmCtrl', function(filmList) {
    var vm = this;
    filmList.retrieveFilms().then(function(response) {
        vm.films =response.data.films;
    });
});

工作计划 - http://plnkr.co/edit/6RVlvdh8oG5WaiEHaPdM?p=preview

它将在 FF 中工作，但对于某些浏览器，它会抛出 CORS 错误，因此在服务器上运行更好。

错误 - AngularJS 服务与 GET JSON 文件

Bug - AngularJS Service with GET JSON file

json

angularjs

angularjs-service

angularjs-controller