Question

如何使用Google Client js api加载Angular项目中的js文件有点棘手。

这个问题正在谈论这样做的正确顺序。 Angular Js and google api client.js (gapi)

还有官方文件在谈论这个， https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/

doc中的一件事是它在init中使用了window.init（），这将导致无限循环。

正如willlma指出的那样，我们应该为函数使用不同的名称。

但我遇到了错误未捕获的TypeError：window.initGAPI不是函数

该项目是通过使用自动生成器生成角度来创建的。

在index.html中加载js的顺序

<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

app.js（仅此文件的后半部分）：

var init = function(){
    console.log("gapi init");
    window.initGAPI();
}

main.js：

angular.module('testApp')
  .controller('MainCtrl', function ($scope, $window) {
    $window.initGAPI = function(){
        console.log("controller inti");
    }
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

我已经测试了一些日志，发现$ window.initGAPI的定义是在加载调用window.init的cliet.js之前执行的，但在window.init中，没有定义window.initGAPI。它似乎在主控制器中，定义了一个名为initGAPI的函数，对象窗口失败了。

Answer 1

我认为以这种方式正确加载两个库并不是那么容易，因为两者都以不同的方式异步。相反，更容易让一个人加载另一个。

第一个更简单的方法是将client.js lib放在所有脚本的末尾，然后在Google库完全加载时执行手动Angular引导程序。

其他方法可能相反，所以让Angular创建Google client.js脚本标记并加载库。

检查此项目：https://github.com/canemacchina/angular-google-client 我创建了这个库来帮助我在Angular中使用Google客户端库，它使用第二种方法...

Answer 2

我有类似的问题。也许你可以为init函数尝试这样的事情，这样当控制器没有加载时它会再次重试。

 function init() {
    if (window.initGapi != undefined) {
        window.initGapi();
    }
    else {
        setTimeout(init, 500); // wait for 500 ms
    }
 }

加载Google Client api gapi和angular js的正确顺序

2 个答案: