Loading Google Cloud Endpoint Library from AngularJS-Client doesn't work

Question

I've an working Endpoint, tested successfully with API-Explorer local and on AppEngine. Now I try to develop an AngularJS-Client. I read a lot of stuff the last week, but it doesn't work. My Controller looks like that.

 'use strict';

const WEB_CLIENT_ID = "<...>.apps.googleusercontent.com";
const EMAIL_SCOPE = "https://www.googleapis.com/auth/userinfo.email";


function init() {
    window.init();
}


angular.module('stakeholder1', [])
.controller('StakeholderController', ['$scope', '$window',
  function StakeholderController($scope, $window) {

    $window.init= function() {
        $scope.$apply($scope.load_oauth_lib);
        $scope.$apply($scope.load_stakeholder_lib)
    };

    $scope.load_oauth_lib = function() {
        gapi.client.load('oauth2', 'v2', null);
        gapi.auth.authorize({client_id: WEB_CLIENT_ID,
            scope: EMAIL_SCOPE, immediate: false},
            null);
    };

    $scope.is_backend_ready = false;

    $scope.load_stakeholder_lib = function() {
        gapi.client.load('stakeholderendpoint', 'v1',
            function(){
            $scope.is_backend_ready = true;
            }, 'https://my-stakeholders.appspot.com/_ah/api');
    };

    $scope.saveStakeholder= function() {
        stakeholder = {
                    "name" : $scope.name        
            };

        gapi.

client.stakeholderendpoint.saveStakeholder(stakeholder).execute();
        }

  }]);

My mark-up looks like that. If I remove the ng-show-Directive and post a name, I get an error "angular.js:13236 ReferenceError: stakeholder is not defined". So I think the API is not loaded.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html ng-app="stakeholder1">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>MyStakeholders</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="../app/controllers/stakeholder1.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=init"></script>

  </head>

  <body>
    <h1>MyStakeholders</h1>    

    <div ng-controller="StakeholderController" class="container" ng-show="is_backend_ready">    

       <form ng-submit="saveStakeholder()">
           <input type="text" ng-model="name" required><br>
           <input type="submit" class="btn" value="Post">
       </form>

    </div>

 </body>
</html>

I'm using Eclipse with GPE. In my WEB-INF-directory there is a generated file stakeholderendpoint-v1.api. Should this file being loaded with gapi.client.load?

I would be glad about some hints or advice how I can debug the load process.

score 0 · Answer 1 · answered May 05 '16 at 14:03

Yes, the stakeholderendpoint should be loaded with gapi.client.load() into the gapi before it is used like gapi.client.stakeholderendpoint.

That file in the WEB-INF directory is important but you can ignore it. The function gapi.client.load() will handle everything behind the scenes.

In your code, the flag $scope.is_backend_ready is indicating if the endpoint is loaded and ready for use. You can protect your UI against errors with this flag. But I recommend to store it in the $rootScope for future use in other controllers. Or even better is to create a service, which loads all the endpoints and store the state of is_backend_ready. Then you can decide to show some progress bar during the loading the endpoints, until the is_backend_ready is true.

Or you can use angular-gapi library.

Loading Google Cloud Endpoint Library from AngularJS-Client doesn't work

1 Answers1