3

我想知道如何将此Google API JavaScript 示例代码转换为 AngularJS 应用程序。我以为它会很整洁。

作为后续，它将如何与 Oauth 2.0 一起使用？

谢谢。

我尝试使用 angularjs 种子应用程序并像这样修改它 -

// controller.js

function SampleListCtrl ( $scope, $http ){
  $http.
  jsonp( 'https://apis.google.com/js/client.js?onload=JSON_CALLBACK' ).
  success( function () {
    alert( 'go go GO' );
    function makeRequest () {
    var request = gapi.client.urlshortener.url.get({
      'shortUrl': 'http://goo.gl/fbsS'
    });

   request.execute( function(response) {
       $scope.longUrl = response.longUrl;
     });
   }

    gapi.client.setApiKey( 'XXXX' );
    gapi.client.load( 'urlshortener', 'v1', makeRequest );

    $scope.samples = data.feed.entry;
  });
};

在 index.html 中

<div ng-controller="SampleListCtrl">
    <h4>{{ longUrl }}</h4>
</div>

RE：Roy Truelove 的提示我尝试添加一个正在触发的错误回调

error( function () {
  console.log( JSON.stringify( arguments ) );
});

我不确定会返回什么，所以我检查了 arguments 对象，因此控制台中的输出是 -

{"1":0,"3":{"method":"JSONP","url":"https://apis.google.com/js/client.js?onload=JSON_CALLBACK"}}

警报不会触发，这意味着回调不起作用。我怎样才能让它发挥作用？有更好的方法吗？

4

1 回答 1

2

您正在请求 JSON 但加载了一个 javascript 库，对吗？我不认为 http 服务是为此而设计的。您需要在引导 Angular 之前加载脚本，或者集成一个脚本加载器来动态加载它。

如果您仍然使用 Angular Seed 模板，那么您可以将 google API 添加到 index.html 中的脚本或使用异步加载器。

于 2012-10-23T20:37:30.077 回答