Angular Google GApi
An AngularJS module for using all Google Apis and your Google Cloud Endpoints (Google App Engine) with OAuth.
This module uses Google APIs Client Library for JavaScript, available for all GApis.
Example
Demo
Code
Requirements
Installation
Add library
This module is available as bower
package, install it with this command:
$ bower install --save angular-google-gapi
it's also available as a npm
package, install it with this command:
$ npm install --save angular-google-gapi
or you may download the latest release
<script type="text/javascript" src="/angular-google-gapi/dist/angular-google-gapi.min.js"></script>
Add dependency
var app = angular.module('myModule', ['angular-google-gapi']);
Configuration
without Google Auth
add run()
in root module
app.run(['GApi', 'GAuth',
function(GApi, GAuth) {
var BASE = 'https://myGoogleAppEngine.appspot.com/_ah/api';
GApi.load('myApiName', 'v1', BASE).then(function(resp) {
console.log('api: ' + resp.api + ', version: ' + resp.version + ' loaded');
}, function(resp) {
console.log('an error occured during loading api: ' + resp.api + ', resp.version: ' + version);
});
}
]);
with Google Auth
add run()
in root module
app.run(['GAuth', 'GApi', 'GData', '$state', '$rootScope',
function(GAuth, GApi, GData, $state, $rootScope) {
$rootScope.gdata = GData;
var CLIENT = 'yourGoogleAuthAPIKey';
var BASE = 'https://myGoogleAppEngine.appspot.com/_ah/api';
GApi.load('myApiName','v1',BASE);
GApi.load('calendar','v3');
GAuth.setClient(CLIENT)
GAuth.setScope('https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/calendar.readonly');
GAuth.load();
GAuth.checkAuth().then(
function (user) {
console.log(user.name + ' is logged in');
$state.go('webapp.home');
},
function() {
$state.go('login');
}
);
}
]);
GApi.load
Error handling
GApi.load('myApiName', 'v1', BASE)
.catch(function(api, version) {
console.log('an error occured during loading api: ' + api + ', version: ' + version);
});
Usage
Execute your api without params
app.controller('myController', ['$scope', 'GApi',
function myController($scope, GApi) {
GApi.execute('youApi', 'you.api.method.name').then(function(resp) {
$scope.value = resp;
}, function() {
console.log('error :(');
});
}
]);
Execute your api with params
app.controller('myController', ['$scope', 'GApi',
function myController($scope, GApi) {
GApi.execute('youApi', 'you.api.method.name', {param: value}).then(function(resp) {
$scope.value = resp;
}, function() {
console.log('error :(');
});
}
]);
Execute your api without params with Google Auth
app.controller('myController', ['$scope', 'GApi',
function myController($scope, GApi) {
GApi.executeAuth('youApi', 'you.api.method.name').then(function(resp) {
$scope.value = resp;
}, function() {
console.log('error :(');
});
}
]);
Execute your api with params with Google Auth
app.controller('myController', ['$scope', 'GApi',
function myController($scope, GApi) {
GApi.executeAuth('youApi', 'you.api.method.name', {param: value}).then(function(resp) {
$scope.value = resp;
}, function() {
console.log('error :(');
});
}
]);
Signup with Google
The login should be triggered by a user action, or you might run into issues with popup blockers. More information about this can be found in the Google APIs Client Library Documentation.
app.controller('myController', ['$scope', 'GAuth', '$state',
function myController($scope, GAuth, $state) {
$scope.doSignup = function() {
GAuth.login().then(function(user) {
console.log(user.name + ' is logged in');
$state.go('webapp.home');
}, function() {
console.log('login failed');
});
};
}
]);
Get user info
Get user info after login is very simple
app.controller('myController', ['$rootScope',
function myController($rootScope) {
console.log($rootScope.gdata.getUser().name);
}
]);
<h1>{{gdata.getUser().name}}</h1>
User object:
email
picture
(url)id
(Google id)name
(Google account name or email if don't exist)link
(link to Google+ page)
Development
gulp
is used to minify angular-google-gapi.js
(using Uglify). Execute npm install
(requires Node.js
and npm
) to install the required packages.
Run gulp
to generate a minified version (angular-google-gapi.min.js
). Note that this requires gulp
to be installed globally (via npm install -g gulp
).