Angular Js i google api client.js (gapi)
Zrobienie tego zajęło mi pewnego dnia, więc myślę, że moje doświadczenie może być przydatne od kogoś. A może inni znajdą poprawę.
Więc zaczynam angularJS dwa dni temu. I chcę, aby działał z punktami końcowymi Google Cloud, aby utworzyć interfejs zaplecza. Nadchodzą kłopoty dla mnie.
Klient javascript dla gapi przychodzi z ładowaniem asynchronicznym, więc inicjalizacja kątowa ulegnie awarii, gdy gapi undefined.
Musisz więc uruchomić ładowanie kątowe, gdy zainicjowano gapi:
usuń ng-app = "myApp"Dodaj<script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script>
Dodaj wywołanie zwrotne:
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');
}
Poczuj się dobrze, ale co powiesz na telefon?
Oto kontroler:
angular.module('myApp.controllers', []).
.controller('MyCtrl', ['$scope' ,'helloWorldService',
function($scope,greetingsService) {
helloWorldService.loadData($scope);
}]);
A oto usługa:
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();
}
});
};
}]);
I magicznie twoja strona aktualizuje się dzięki kątowym.
Zapraszam do zaznaczania gdziekolwiek się nie uda.