如何将 AngularJS 与 Google API JavaScript 客户端一起使用？答案

【问题标题】：How do I use AngularJS with Google API JavaScript Client?如何将 AngularJS 与 Google API JavaScript 客户端一起使用？
【发布时间】：2012-10-12 18:25:06
【问题描述】：

我想知道如何将这个 Google API JavaScript Sample code 转换为 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"}}

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

【问题讨论】：

如果没有调用“成功”，那么很可能是“错误”，并且其中会有一些信息会告诉您可能出现的问题。作为旁注，如果您想要一些关于如何“角度化”它的建议，请将所有谷歌特定的东西移到服务中
@RoyTruelove 感谢我尝试过的提示，但我似乎没有收到任何错误消息。我已经更新了我的问题
“参数”在哪里定义？
我指的是 javascript 参数数组：developer.mozilla.org/en-US/docs/JavaScript/Reference/…

标签： javascript oauth-2.0 angularjs

【解决方案1】：

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

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

【讨论】：

你是对的，这就是样本所暗示的，但感觉好像我会反对 mvc 模式。这就是为什么我试图将这个功能强制到控制器中。我可能是错的或以错误的方式去做。有没有办法将脚本加载的结果绑定到 $scope 或将其显示在视图中？或者将控制器中的函数暴露给 DOM 事件，例如“document.ready”？
@Peter 为什么这违背了 MVC 模式？ MVC 模式描述了您的应用程序的结构。
@Peter（对不起，我编辑太慢了...） ...MVC 模式描述了您的应用程序的结构，而不是动态或预先加载脚本文件。您当然可以在您的应用程序中包含一个脚本加载器并将其注入任何控制器/服务/指令中。
我没有机会尝试这个，但我认为这是正确的方法。谢谢。 :-)
很高兴看到如何以角度加载 js 库并使用它的 jsfiddle。现在我正在构建我的第一个应用程序，这很困难。