How do I use AngularJS with Google API JavaScript Client?

Question

I am wondering how I would convert this Google API JavaScript Sample code into an AngularJS app. I thought it would be really neat.

And as a follow-up how would it work with Oauth 2.0?

Thanks.

I tried using the angularjs seed app and modified it like this -

// controller.js

function SampleListCtrl ( $scope, $http ){
  $http.
  jsonp( 'https://apis.google.com/js/client.js?onload=JSON_CALLBACK' ).
  success( function () {
    alert( 'go go GO' );
    function makeRequest () {
    var request = gapi.client.urlshortener.url.get({
      'shortUrl': 'http://www.google.com/'
    });

   request.execute( function(response) {
       $scope.longUrl = response.longUrl;
     });
   }

    gapi.client.setApiKey( 'XXXX' );
    gapi.client.load( 'urlshortener', 'v1', makeRequest );

    $scope.samples = data.feed.entry;
  });
};

And in index.html

<div ng-controller="SampleListCtrl">
    <h4>{{ longUrl }}</h4>
</div>

RE: Roy Truelove's tip I have tried adding an error callback which is firing

error( function () {
  console.log( JSON.stringify( arguments ) );
});

I wasn't sure what would come back so I inspected the arguments object and so the output in the console is -

{"1":0,"3":{"method":"JSONP","url":"https://apis.google.com/js/client.js?onload=JSON_CALLBACK"}}

The alert does not fire meaning that the callback didn't work. How do I get that to work? Is there a better approach?

If 'success' isn't being called then it's likely that 'error' is, and that there'll be some info in there that will advise you about what might be wrong. As a side note if you want some advice on how to 'angularize' this, move all the google-specific stuff into a Service — Roy Truelove
– Roy Truelove, Commented Oct 23, 2012 at 13:28
@RoyTruelove thanks for the tip i tried that but i don't seem to be getting back any error message. i have updated my question — Peter
– Peter, Commented Oct 23, 2012 at 20:26
i am referring to the javascript arguments array : developer.mozilla.org/en-US/docs/JavaScript/Reference/… — Peter
– Peter, Commented Oct 24, 2012 at 10:32

F Lekschas · Accepted Answer · 2012-10-23 20:37:30Z

2

You are requesting JSON but load a javascript library, right? I don't think the http service is made for that. You would need to either load the script before bootstrapping Angular or integrate a script loader to dynamically load it.

If you are anyway using the Angular Seed template than you can just add the google API to the scripts in the index.html or use the asynchronous loader.

answered Oct 23, 2012 at 20:37

F Lekschas

12.9k12 gold badges67 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Peter Over a year ago

you are right and that is what the sample suggests but it feels as if i would be going against the mvc pattern. That's why I am trying to force this functionality into the controller. i could be wrong or going about it the wrong way. Is there a way to bind the result of the script loading to the $scope or display it in the view(s)? Or expose a function in a controller to a DOM event like 'document.ready'?

F Lekschas Over a year ago

@Peter Why is this going against the MVC pattern? The MVC pattern describes how your application is structured.

F Lekschas Over a year ago

@Peter (sorry I was too slow in editing...) ...The MVC pattern describes how your application is structured not whether to load script files on the fly or beforehand. You can surely include a script loader into your application and inject it in any controller / service / directive.

Peter Over a year ago

I haven't had a chance to try this out but I think it is the right approach. Thanks. :-)

Harry Moreno Over a year ago

would be nice to see a jsfiddle of how to load a js lib in angular and use it. Right now I'm building my first app and it's tough.

Collectives™ on Stack Overflow

How do I use AngularJS with Google API JavaScript Client?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related