AngularJS：工厂$ http.get JSON文件

Question

我希望仅使用硬编码JSON文件在本地进行开发。我的JSON文件如下（放入JSON验证程序时有效）：

{
    "contentItem": [
            {
            "contentID" : "1", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        },{
            "contentID" : "2", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        }
    ]
}

当JSON在工厂内部进行硬编码时，我已经使控制器，工厂和html正常工作。但是，现在我已经用$
http.get代码替换了JSON，它不起作用了。我已经看过$ http和$
resource的许多不同示例，但不确定去哪里。我正在寻找最简单的解决方案。我只是想为ng-repeat和类似指令提取数据。

厂：

theApp.factory('mainInfoFactory', function($http) { 
    var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });
    var factory = {}; // define factory object
    factory.getMainInfo = function() { // define method on factory object
        return mainInfo; // returning data that was pulled in $http call
    };
    return factory; // returning factory to make it ready to be pulled by the controller
});

任何和所有帮助表示赞赏。谢谢！

Answer 1

好的，这是要研究的事项列表：

1）如果您没有运行任何类型的Web服务器，而只是使用file：//index.html进行测试，则可能会遇到同源策略问题。看到：

https://code.google.com/archive/p/browsersec/wikis/Part2.wiki#Same-
origin_policy

许多浏览器不允许本地托管的文件访问其他本地托管的文件。Firefox允许这样做，但前提是要加载的文件与html文件（或子文件夹）位于同一文件夹中。

2）从$ http.get（）返回的成功函数已经为您拆分了结果对象：

$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {

因此，使用function（response）调用成功并返回response.data是多余的。

3）成功函数不会返回传递给它的函数的结果，因此这不会做您认为的事情：

var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });

这更接近您的预期：

var mainInfo = null;
$http.get('content.json').success(function(data) {
    mainInfo = data;
});

4）但是，您真正想要做的是返回一个对象的引用，该对象的属性将在数据加载时填充，因此，如下所示：

theApp.factory('mainInfo', function($http) {

    var obj = {content:null};

    $http.get('content.json').success(function(data) {
        // you can do some processing here
        obj.content = data;
    });

    return obj;    
});

mainInfo.content将从null开始，并且在加载数据时将指向它。

或者，您可以返回实际的承诺$ http.get返回并使用该承诺：

theApp.factory('mainInfo', function($http) { 
    return $http.get('content.json');
});

然后，您可以在控制器的计算中异步使用该值：

$scope.foo = "Hello World";
mainInfo.success(function(data) { 
    $scope.foo = "Hello "+data.contentItem[0].username;
});