Google Cloud endpoints has specific instructions to initialize itself as described here. This involves defining the script
1 <script src="https://apis.google.com/js/client.js?onload=init">
2 </script>and initializing the apis in the init method
1 var ROOT = 'https://your_app_id.appspot.com/_ah/api';
2 gapi.client.load('your_api_name', 'v1', function() {
3 doSomethingAfterLoading();
4 }, ROOT);However integrating this with AngularJS is not that straight forward. For one the javascript cloud endpoint does not support promises. This makes it difficult to initialize many services. Also the since the cloud endpoint initialization involves the use of a callback function, it is not straight forward to intialize within angular.
Decorating Cloud Endpoint client with promises
A good way to decorate the endpoint api with promises is to write a service The below implementation defines three methods
- initialize
- perform a gapi call with authenitcation
- do a sign in using oauth 2.0
1 angular.module('webApp')
2 .factory('cloudendpoint', function ($q) {
3 return {
4 init:function() {
5 var ROOT = '//' + window.location.host + '/_ah/api';
6 var hwdefer=$q.defer();
7 var oauthloaddefer=$q.defer();
8 var oauthdefer=$q.defer();
9
10 gapi.client.load('helloworld', 'v1', function() {
11 hwdefer.resolve(gapi);
12 }, ROOT);
13 gapi.client.load('oauth2', 'v2', function(){
14 oauthloaddefer.resolve(gapi);
15 });
16 var chain=$q.all([hwdefer.promise,oauthloaddefer.promise]);
17 return chain;
18 },
19 doCall: function(callback) {
20 var p=$q.defer();
21 gapi.auth.authorize({client_id: 'clientid', scope: 'https://www.googleapis.com/auth/userinfo.email',
22 immediate: true}, function(){
23 var request = gapi.client.oauth2.userinfo.get().execute(function(resp) {
24 if (!resp.code) {
25 p.resolve(gapi);
26 } else {
27 p.reject(gapi);
28 }
29 });
30 });
31 return p.promise;
32 },
33 sigin:function(callback) {
34 gapi.auth.authorize({client_id: 'clientid', scope: 'https://www.googleapis.com/auth/userinfo.email',
35 immediate: false}, callback);
36 }
37 }
38 });An easy way to wrap multiple calls synchronously using promises is by using $q.all(..)
Initializing Google API client in angular
To intialize the google api client in angular the scripts must be loaded in the following order
- AngularJS
- Your Controllers
- GAPI
1 <script src="bower_components/angular/angular.js"></script
2 <script src="scripts/app.js"></script>
3 <script src="scripts/services/api.js"></script>
4 <script src="scripts/controllers/main.js"></script>
5 <script src="https://apis.google.com/js/client.js?onload=init"></script>In one of your controllers define the init function that would serve as the callback for gapi. This function would delegate the call to the init function that is defined on the window object inside the controller
1 'use strict';
2 function init() {
3 window.init(); // Calls the init function defined on the window
4
5 }
6 angular.module('webApp')
7 .controller('LoginCtrl',['$scope','$rootScope','$location','cloudendpoint','$window',function ($scope,$rootScope,$location,cloudendpoint,$window) {
8 // the init function that will bridge the gapi initialize event with angular
9 $window.init= function() {
10 $scope.$apply($scope.initgapi);
11 };
12 $scope.initgapi=function() {
13 cloudendpoint.init().then(function(){alert('inited');},function(){alert('notinited')});
14 }
15 $scope.greeting=function(greetingform) {
16 cloudendpoint.doCall().then(function() {
17 gapi.client.helloworld.greetings.authed({}).execute(function(resp){
18 alert(resp);
19 });
20 });
21 $scope.signin=function(loginform) {
22 gapi.auth.authorize({client_id: 'clientid',
23 scope: 'https://www.googleapis.com/auth/userinfo.email', immediate: false},
24 function(){alert('hello');});
25 }
26 };
27 }]);Voila AngularJS and Cloudendpoints are now initialized.