使用 Angular.js 获取 JSONP答案

【问题标题】：Fetching JSONP with Angular.js使用 Angular.js 获取 JSONP
【发布时间】：2016-02-15 08:59:48
【问题描述】：

<html ng-app="movieApp">
 <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
 <script>
  var base = 'http://api.themoviedb.org/3';
  var service = '/movie/862';
  var apiKey = '####';
  var callback = 'JSON_CALLBACK';
  var url = base + service + '?api_key=' + apiKey + '&callback=' + callback;
  var movieApp = angular.module('movieApp', []);

  movieApp.controller('MovieCtrl', function ($scope, $http){
      $http.jsonp(url).then(function(data) {
      $scope.movies = data;
    });
  });
</script>
</head>
<body style="padding:12px;" ng-controller="MovieCtrl">
  <div ng-repeat="movie in movies">
    <h1>{{movie.title}} {{movie.id}}</h1>
    <p>{{movie.overview}}</p>
    <img ng-src="http://image.tmdb.org/t/p/w500{{movie.poster_path}}" style='width:200px'/>
  </div>
</body>
</html>

尝试使用 Angular.js 获取 JSON。信息很好，但我相信状态也会出现。导致 5 幅图像被放置在屏幕上，4 幅损坏的图像和 1 幅良好的图像连同数据一起被放置在屏幕上。如何避免发送这些额外数据？

【问题讨论】：

您可以使用您的服务器端吗？ /movie/ 后端控制器只需要发送所需的信息，您也可以查看微服务..
微服务跟什么有什么关系？
@DaveNewton 没有什么特别的，只是更容易定制响应数据。不过没什么特别的。刚想起来。根据我对问题的理解，OP 不想要请求中的所有信息，只需要特定信息：减少接收数据。
API就是API。代码应该直接处理返回的实际数据；添加一个额外的层来完善记录在案的 API 应该做的事情当然是可能的，但最大的投资回报率就是按原样使用它。

标签： javascript angularjs jsonp

【解决方案1】：

使用 AJAX 请求 JSON 数据

您希望通过 AJAX 请求获取 JSON 数据并进行渲染。使用 $http 服务实现一个控制器来获取数据并将其存储在作用域中。

<body ng-app="MyApp">
  <div ng-controller="PostsCtrl">
    <ul ng-repeat="post in posts">
      <li>{{post.title}}</li>
    </ul>
  </div>
</body>
var app = angular.module("MyApp", []);

app.controller("PostsCtrl", function($scope, $http) {
  $http.get('data/posts.json').
    success(function(data, status, headers, config) {
      $scope.posts = data;
    }).
    error(function(data, status, headers, config) {
      // log error
    });
});

http://fdietz.github.io/recipes-with-angular-js/consuming-external-services/requesting-json-data-with-ajax.html

【讨论】：

如何减少接收到的臃肿数据？
不要认为这是我的解决方案，$http.get 似乎不适用于这种情况。我用 get 尝试了几个例子，而 jsonp 似乎是唯一让我成功的解决方案。