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
).