加载Google客户端api、gapi和angular js的正确顺序

The correct order to load Google Client api gapi and angular js

本文关键字：js 顺序 angular 客户端 Google api gapi 加载      更新时间：2023-09-26

如何在Angular项目中与Google Client js api一起加载js文件有点棘手。

这个问题讨论的是做这件事的正确顺序。client.js (gapi)

有一个官方的医生在谈论这个，https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/。

文档中的一件事是它在init中使用了window.init()，这会导致无限循环。

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

但是我遇到了一个错误未捕获的类型错误:窗口。initGAPI不是一个函数

该项目是通过使用angular的yeoman生成器创建的。

在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的client .js之前执行。Init，但在窗口内。init,窗口。没有定义initGAPI。似乎在主控制器中，定义一个名为initGAPI的函数到对象窗口失败了。

我认为以自己的方式正确加载两个库并不容易，因为它们都是以不同的方式异步的。相反，让一个加载另一个更容易。

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

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

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

我也遇到过类似的问题。也许你可以尝试这样的init函数，以便它在控制器尚未加载时再次尝试。

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