Angularjs 正在加载 Google Api

Question

我在 angularjs 1.3（使用 ui.router 的 SPA）中使用 Google Api 时遇到问题。根据 google api 说明，我添加了对 client.js 文件的引用，并在我的 index.html 头中添加了回调，

   <html ng-app="myApp">
    <head>
        
        <script src="Scripts/jquery-2.1.3.min.js"></script>

        <script src="Scripts/angular.min.js"></script>
        <script src="Scripts/angular-ui-router.min.js"></script>
    <script>
    function LoadGAPI() {
       
    }
    </script>
    <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=LoadGAPI"></script>

据我了解，client.js 将异步加载完整的客户端 api，并在完成后调用定义的函数 LoadGAPI。

有时会在我的 angular 应用程序被调用之前调用 LoadGAPI。运行有时不会。我不介意它异步加载。但是我如何提醒我的 angular 应用程序它确实可以使用了？

Answer 1

我 faced something similar before and there are two ways of solving it, one is delaying the whole angular's bootstrapping 直到另一个库通过在 LoadGAPI 和 dom 准备好后手动触发它来加载，例如：

var n = 0;

function LoadGAPI () {
  
  // Only pass after the first call
  if (n++) {

    angular.bootstrap(angular.element(document).find('html'), ['app']);
  }
};

angular.element(document).ready(LoadGAPI);

另一个是确保库仅在需要它的 ui-路由器状态下使用 resolve:

州

$stateProvider
        ...
        .state('some.state', {
            url        : '/some',
            templateUrl: 'view/some.state.html',
            controller : 'some.state',
            resolve    : GAPI.resolver
        })
        ...

解析器

var GAPI = {
    ready   : false,
    resolver: {
        api: ['$q', function($q) {

            if (!GAPI.deferred) {

                GAPI.deferred = $q.defer();
            }

            if (GAPI.ready) {

                GAPI.deferred.resolve();
            }

            return GAPI.deferred.promise;
        }]
    }
};

window.LoadGAPI = function () {

    GAPI.ready = true;

    if (GAPI.deferred) {

        GAPI.deferred.resolve();
    }
};

第二个可以简化，但我希望你能理解。

Angularjs 正在加载 Google Api

Angularjs loading Google Api

google-api

google-api-client

angularjs