Google Calendar and Async API calls in angular

1

Hello Ionic!
This might be more of an angular issue, but I’m trying out Ionic as a hybrid dev stack.

I’m working with data from a google calendar. As some of you may know the Google Calendar API is asynchronous. According to the API things happen in this order:

  1. Call the api: <script src="https://apis.google.com/js/client.js?onload=init"></script>

  2. Using “?” query call your function to load the calendar api:

    function init() {
    gapi.client.setApiKey(Key);
    gapi.client.load(‘calendar’, ‘v3’, listUpcomingEvents);
    } //this function can live anywhere

  3. The gapi.client.load function, if successful, then should call your calendar request e.g., the listUpcomingEvents() which then should get your data.

Using plain javascript I can sequence the events properly. With angular it’s step 3 where I run into issues. The third argument of gapi.client.load('calendar', 'v3', listUpcomingEvents) won’t work with an angular function inside a controller, or a service as far as I know.

So I am only using: gapi.client.load('calendar', 'v3’).

Without the function argument you cannot guarantee the calendar api will be ready when you make your data request. Most times it returns undefined.

I supposed what I need is to be able to call a function outside of a controller but still scoped to the view. I haven’t found a working solution, especially inside Ionic.

Is there a solution to this?

2

Just in case anyone is following this, the official google solution and the stackoverflow thread are not working either:

https://cloud.google.com/solutions/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications

Google’s method for Angular results in half the time the calling function (e.g., window.init() ) not being defined. The other half behaves the same, the API is not loaded yet when the function call to the calendar data is made.

It seems like this may be a Google problem with the API (??), however, this has worked fine using just plain javascript.

If anyone else has more experience please feel free to contribute.

3

Hi,
I’ve create THIS project to use Google Api Library on Angular Js.
Check if could be helpfull for you…

4

Yes, this works in the right order. Thank you. I’d given up hope and learned to live with the asynchrony. I had tried other methods that used the same general process as yours, but it seems that somehow wrapping the api call into a provider’s $get method does the trick.