如何使用表达式从 Angular 服务访问 JSONP 数据答案

【问题标题】：How to access JSONP data from Angular service in view using expressions如何使用表达式从 Angular 服务访问 JSONP 数据
【发布时间】：2015-03-24 03:42:50
【问题描述】：

我正在构建一个基于 Angular 的应用程序来显示来自 Strava API 的数据。我曾尝试使用 $http.get 但我宁愿使用单独的服务，以便我的代码位于逻辑位置，因此我的控制器没有做很多事情，只需调用我的服务。

我有三个文件用于这个逻辑；服务、控制器和视图。访问令牌是从 Strava 获取的，以获取外部来源中的帐户信息。

为我服务：

 /* Services */
 var access_token = "my_access_token";

stravaApp.factory('StravaActivities', function($resource) {
   return $resource('https://www.strava.com/api/v3/athlete/activities?access_token=' + access_token, {}, {
        getJSONP: {
          method: 'JSONP',
          isArray: true,
          params: {
              callback: 'JSON_CALLBACK'
          }
        }
      });
    });

在我的控制器中

/**
 * @ngdoc function
 * @name stravaApp.controller:SitecontentCtrl
 * @description
 * # SitecontentCtrl
 * Controller of the stravaApp
 */

angular.module('stravaApp').controller('SitecontentCtrl', ['$scope', 'StravaActivities',
  function($scope, StravaActivities) {
    $scope.activities = StravaActivities.getJSONP();
  }]);

在我的模板/视图中

<ul class="act">
<li ng-repeat="act in activities | filter:query | orderBy:orderProp"
    class="thumbnail act-listing">
    <pre>{{activities | json }}</pre>
</li>
</ul>

调用的json文件为：https://www.strava.com/api/v3/athlete/activities?access_token=my_access_token&callback=angular.callbacks._0

我找不到使用表达式（例如 {{acts.id }}）访问视图中数据的方法。当我使用 {{ act | json }} 我收到了完整的 JSON 文件，但我无法使用我尝试过的解决方案从 json 访问单个部分。我认为问题与回调有关。由于 Strava API 不支持 CORS，我必须使用 JSONP。

我发现了一个有确切问题的帖子，但是没有提供解决方案，并且代码示例正在使用 $http.get，我想在我的服务中使用 $resource。

谁能给我一个解决方案？提前致谢！

【问题讨论】：

使用$resource 没有真正的好处，因为您不能发布到 jsonp api。 API 甚至提供 jsonp 服务吗？在这种情况下，并非所有 API 都需要使用代理
这是有道理的。我使用 $resource 的事实只是因为我遇到了一个简洁的示例，还没有将数据发布到 API 的意图。 Strava 确实支持 JSONP (engineering.strava.com/strava-api-update)，所以我想知道它是否会按照我对 $resource 的想法工作。如果那不起作用，我必须使用 $http.get()
有一个$http.jsonp 简写也有docs.angularjs.org/api/ng/service/$http#jsonp

标签： json angularjs service jsonp factory

【解决方案1】：

我现在真的很傻。我收到了开发人员的答复。这个问题根本与角度无关。似乎在 Strava 中，这些段被标记为私有，因此 API 返回 401。我现在可以从我的应用程序调用任何端点。

【讨论】：

【解决方案2】：

        (function() {
    app.controller('StravaController', function($scope, $http) {
    $http({ method: 'JSONP', url: 'https://www.strava.com/api/v3/athlete?per_page=1&access_token=your_token_here&callback=JSON_CALLBACK' }).success(function (data) {
            console.log('hello');
            $scope.athlete = data; // response data 
        }).
        error(function (data) {
            console.log(data);
        });
    });

})();

【讨论】：