javascript - descargar - Angular Js y google api client.js(gapi)

angularjs ejemplos

Question

Me llevó un día hacerlo funcionar, así que creo que mi experiencia puede ser útil para alguien. Y tal vez algunos otros encontrarán una mejora.

Así que comienzo angularJS hace dos días. Y quiero que funcione con Google Cloud Endpoints para crear una interfaz de back-end. Aquí viene el problema para mí.

El cliente javascript para gapi viene con carga asíncrona, por lo que la inicialización angular se bloqueará al tener Gapi indefinido.

Por lo tanto, necesita iniciar el proceso angular cuando gapi se inicializa:

1. eliminar ng-app = "myApp"
2. Añada <script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script>

3. Agregue la devolución de llamada:

   function googleOnLoadCallback(){  
       var apisToLoad = 1; // must match number of calls to gapi.client.load()  
       var gCallback = function() {  
           if (--apisToLoad == 0) {  
               //Manual bootstraping of the application  
               var $injector = angular.bootstrap(document, [''myApp'']);  
               console.log(''Angular bootstrap complete '' + gapi);  
           };  
       };  
       gapi.client.load(''helloWorld'', ''v1'', gCallback, ''//'' + window.location.host + ''/_ah/api'');  
   }

Se siente bien, pero ¿qué tal una llamada?

Entonces aquí está el controlador:

angular.module(''myApp.controllers'', []).  
    .controller(''MyCtrl'', [''$scope'' ,''helloWorldService'',  
        function($scope,greetingsService) {
          helloWorldService.loadData($scope);  
    }]);

Y aquí está el servicio:

angular.module(''myApp.services'', [])
service(''helloWorldService'', [function() {
   this.loadData = function($scope)  {
     //Async call to google service
     gapi.client.helloWorld.greetings.listGreeting().execute(
        function(resp) {
            if (!resp.code) {
                console.debug(resp);
                $scope.greetings = resp.items;
                // Because it''s a callback,
                // we need to notify angular of the data refresh...
                $scope.$apply();
            }
      });
   };
}]);

Y mágicamente las actualizaciones de su página gracias a angular.

Siéntase libre de marcar en cualquier lugar que vaya mal.

Answer 1

Aunque casi todo el progreso también vale la pena mencionar angular-googleapi , que envuelve muy bien algunas llamadas de la API de Google Calendar y Google Plus y fácil de ampliar.

Debería agregar este bit a su controlador cuando verifique la autorización:

$scope.authenticated = false;

$scope.$on("google:authenticated", function(){
   $scope.authenticated = true;
   $scope.$on(''googleCalendar:loaded'', function(){
       # work your magic here
       # $scope.calendars = googleCalendar.listCalendars();
       # $scope.$apply();
   });
});

function checkAuth() {
   setTimeout(function(){
       gapi.auth === undefined ? checkAuth() : googleLogin.checkAuth();
   }, 20);
}

checkAuth();

Answer 2

Buen post y gracias! Este enfoque funcionó para mí. Puede importar el orden en que aparezca el código en su archivo index.html. No funcionó para mí hasta que tuve las cosas en este orden.

...
<script>
  function googleOnLoadCallback(){
      alert(''googleOnLoadCallback called'');
      var apisToLoad = 1; // must match number of calls to gapi.client.load()
      var gCallback = function() {
          if (--apisToLoad == 0) {
              //Manual bootstraping of the application
              var $injector = angular.bootstrap(document, ["myApp"]);
              console.log("myApp bootstrap complete " + gapi);
          };
      };
      gapi.client.setApiKey("my_client_id");
      gapi.client.load("translate", "v2", gCallback);

  }
</script>
<!-- See https://developers.google.com/api-client-library/javascript/samples/samples -->
<script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script>
</head>

Answer 3

En lugar de realizar un bootstrapping o establecer un tiempo de espera, es más eficiente dejar cargar Angular antes / mientras realiza las solicitudes del servidor. Seguí el consejo descrito en AngularJS + Cloud Endpoints: Una receta para construir aplicaciones web modernas , que hace lo siguiente.

Mantenga su directiva ng-app como siempre (sin bootstrapping)

<html ng-app="myApp">
<head>
  <script src="angular.js" type="text/javascript"></script>
  <script src="app.js" type="text/javascript"></script>
  <script src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body ng-show="backendReady">

Cree una variable global para la función de devolución de llamada GAPI en cualquier parte de su JS

var app = angular.module(''myApp'', []);

var init = function() {
  window.initGapi();
}

app.controller(''MainController'', function($scope, $window, gapiService) {
  var postInitiation = function() {
    // load all your assets
  }
  $window.initGapi = function() {
    gapiService.initGapi(postInitiation);
  }
});

app.service(''gapiService'', function() {
  this.initGapi = function(postInitiation) {
    gapi.client.load(''helloWorld'', ''v1'', postInitiation, restURL);
  }
});

Desde el enlace de arriba:

La razón por la que no desea ejecutar la inicialización en el primer método init () es para poder poner tanto código como sea posible en el mundo de AngularJS, como controladores, servicios y directivas. Como resultado, puede aprovechar toda la potencia de AngularJS y tener todas sus pruebas unitarias, pruebas de integración, etc.

Esto puede parecer una forma indirecta de hacer las cosas, pero optimiza la velocidad, la capacidad de prueba y la separación de las preocupaciones.

Answer 4

Entonces estaba teniendo el mismo problema. Poner este código en mi fábrica funcionó

var initialize = function() {
    if(gapi.client == undefined) {
        setTimeout(function() {
            initialize()
        }, 1000);
    } else {
        gapi.client.setApiKey("<api_key>");
        gapi.client.load(''youtube'', ''v3'').then(function() {
            console.log("youtube is ready")
        });
    }
};

initialize()

Básicamente, el problema es tratar de llamar a gapi.client antes de que se cargue. Si solo comprueba que está cargado, y si no lo está, vuelva a intentarlo en un segundo (puede establecer el tiempo para lo que desee, configúrelo más bajo si espera que el usuario lo necesite de forma relativamente rápida después de que se cargue la página).

Estuve luchando con esto por un tiempo, y esto es todo lo que funcionó para mí ... ¡Espero que esto ayude!

Answer 5

Escribí una directiva simple para cargar la API de google map de forma asíncrona:

// js/directives/gmapAsync.js

(function(){
''use strict'';

angular.module(''app'').directive(''gmapAsync'',
    [''$window'', ''$rootScope'', gmapAsync]
);

function gmapAsync($window, $rootScope){

    var gmapScript = $window.document.createElement(''script'');  

    $window.onGmapScriptLoaded = function(){
        console.log(''google maps script loaded'');

        $rootScope.gmapApiLoaded = true;
        $rootScope.$broadcast(''gmap.api.loaded'');

    };

    return {
        restrict: ''A'',
        transclude: false,
        scope:false,
        link:   function(scope, element, attributes){

            if (navigator.onLine) {
                appendScript();
            } else {
                $window.addEventListener(''online'',appendScript);
            }

            function appendScript(){
                gmapScript.type = ''text/javascript'';
                gmapScript.src = ''https://maps.googleapis.com/maps/api/js?v=3.exp&'' + ''callback=onGmapScriptLoaded'';
                $window.document.body.appendChild(gmapScript);
            }
        }
    };
}
})();

Luego, en su controlador principal, puede manejar el evento:

// js/controllers/AppCtrl.js

(function(){
''use strict'';

    angular.module(''app'').controller(''AppCtrl'',[$scope,AppCtrl])

    function AppCtrl($scope){

        $scope.$on(''gmap.api.loaded'',function(){
            // your stuff to init after the api is loaded
        });
    }

})();

Solo tienes que declarar la directiva en tu etiqueta de cuerpo:

<!DOCTYPE html>
<html>

    <head></head>

    <body data-ng-app="app" data-gmap-async data-ng-controller="AppCtrl">

        <!-- template body -->

        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/controllers/AppCtrl.js"></script>
        <script type="text/javascript" src="js/directives/gmapAsync.js"></script>
    </body>

</html>

Answer 6

Hice lo siguiente

gapi-service.js

''use strict'';

app.factory(''Gapi'', [''ENV'', function(ENV) {

return {
load: function load() {
  console.log(''loading google apis...'');
  if (typeof gapi.client === ''undefined'') {
    setTimeout(load, 500);
  } else {
    gapi.client.setApiKey(ENV.googleToken);
    gapi.client.load(''storage'', ''v1'', function() {
      console.log(''loaded! :)'');
      var request = gapi.client.storage.buckets.list({ project: ''''});
      console.log(request);
      request.execute(function(response) { console.log(response); });
    });
  }
}
  };
}]);

index.html

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>"Txtbinge"</title>
  </head>

  <body ng-app="myApp">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>

<script src="scripts/client.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/gapi-service.js"></script>


  </body>
</html>

controllers.js

''use strict'';

app.controller(''AppController'', function($scope, $state, Camera, Gapi) {

  Gapi.load();

});

Answer 7

Mire esto: https://github.com/canemacchina/angular-google-client .

Escribí este módulo para usar Google Api o Google Cloud Endpoint en una aplicación angular.

Answer 8

Usé una solución similar a willlma, pero mi aplicación hace uso de UI Router, por lo que no se sabe a qué controlador se llamará.

Pude resolver esto con una Promesa de Javascript.

index.html

<html ng-app="myApp">
<head>
    <script src="angular.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="https://apis.google.com/js/client.js?onload=init">
</head>

app.js

var app = angular.module(''myApp'', []);

app.controller(''MainController'', function($scope, gapiService) {
    gapiService.then(function(gapi) {
        // You can use gapi normally here;
    });
});

app.service(''gapiService'', function($window) {
    return new Promise(function(resolve, reject) {
        if ($window.gapi !== undefined) {
            console.log("Have gapi already");
            resolve($window.gapi);
        } else {
            console.log("Waiting for gapi");
            $window.init = function() {
                resolve($window.gapi);
            }
        }
    });
});