Javascript 使用Angular.js中API调用的数据_Javascript_Angularjs

Javascript 使用Angular.js中API调用的数据

javascript angularjs

Javascript 使用Angular.js中API调用的数据,javascript,angularjs,Javascript,Angularjs,在通过FreeCodeCamp在CodeSchool上介绍Angular.js之后，我正在编写一个zipline，在这里我必须对Camper News上的故事进行风格化。基本上，我正在打电话给一个，需要显示结果但是，我很难用angular.js显示API调用的结果。我在网上和StackOverflow上搜索，找不到解决问题的方法这是我的app.js： angular.module('camperNews', ['$news'/*TODO:Add ng-resource*/]); a

在通过FreeCodeCamp在CodeSchool上介绍Angular.js之后，我正在编写一个zipline，在这里我必须对Camper News上的故事进行风格化。基本上，我正在打电话给一个，需要显示结果

但是，我很难用angular.js显示API调用的结果。我在网上和StackOverflow上搜索，找不到解决问题的方法

这是我的app.js：

  angular.module('camperNews', ['$news'/*TODO:Add ng-resource*/]);

  angular 
       .module('camperNews')
       .controller('StoryController', ['$news', function($news) {
    var story = this;
    story.news = [];

/*Will load a resource, with the array 
*and $resolved(bool) and $promise(promise type) and etc..
*/
    story.news = $news.get();
  }]);

和我的HTML：

<body ng-controller="StoryController as story">
    <div id="container" class="text-center">
        <div id="posts" class="text-center" ng-repeat="new in story.news">
            <div class="post">
                <div class="author">
                    <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a>
                </div>
            </div>
        </div>
    </div>
  </body>

我在控制台中查看，我的呼叫返回了一些内容，问题显然是在我的HTML中，并且是由于我缺乏经验造成的。我会帮助找到一个解决方案或提示如何解决我的问题

提前谢谢。

使用

then（）

和

$http

回调响应参数是一个比数据更复杂的对象。。。数据是该对象的属性：

$http.get('http://www.freecodecamp.com/news/hot').then(function(response) {    
  story.news = response.data;
}, function(err) {
  console.error('ERR', err);
});

您需要将

更改为

或者，您可以更改

story.news=response设置为story.news=response.data
尝试在不使用（函数（）{}）（）的情况下运行它
2.看起来您正在使用$http.get通过http ajax工具访问api服务器，但您更愿意使用api客户端作为api提供者的一部分
$resource是专为此类用途而设计的提供程序
这是工厂文件（news.factory.js）
这是我的app.js：
  angular.module('camperNews', ['$news'/*TODO:Add ng-resource*/]);

  angular 
       .module('camperNews')
       .controller('StoryController', ['$news', function($news) {
    var story = this;
    story.news = [];

/*Will load a resource, with the array 
*and $resolved(bool) and $promise(promise type) and etc..
*/
    story.news = $news.get();
  }]);

和我的HTML：
<body ng-controller="StoryController as story">
    <div id="container" class="text-center">
        <div id="posts" class="text-center" ng-repeat="new in story.news">
            <div class="post">
                <div class="author">
                    <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a>
                </div>
            </div>
        </div>
    </div>
  </body>


为什么不使用$scope？而不是var story=此；编写$scope.story={}；$scope.story.news=响应；然后写ng controller=“statecontroller”。在这种情况下，$resource服务会更好
$resource
尝试在中使用story.news=response.data
。然后
块。感谢您的解释。在视图中使用controllerAs
别名和语法时，您可以在controller中使用此
<body ng-controller="StoryController as story">
    <div id="container" class="text-center">
        <div id="posts" class="text-center" ng-repeat="new in story.news">
            <div class="post">
                <div class="author">
                    <a href="{{new.link}}" target="_blank"><img class="author-picture" src="{{new.author.picture}}"></a>
                </div>
            </div>
        </div>
    </div>
  </body>