1

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

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

并且有一个官方文档谈论这个， https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/。

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

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

但是我遇到了 Uncaught TypeError: window.initGAPI is not a function 的错误

该项目是通过使用 yeoman generator for angular 创建的。

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();
}

主.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 的函数失败了。

4

2 回答 2

1

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

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

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

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

于 2015-11-19T17:07:43.797 回答
1

我有一个类似的问题。也许您可以为 init 函数尝试类似的操作，以便在控制器尚未加载时再次重试。

 function init() {
    if (window.initGapi != undefined) {
        window.initGapi();
    }
    else {
        setTimeout(init, 500); // wait for 500 ms
    }
 }
于 2015-12-12T00:03:03.000 回答