AngularJS-ionic-Cloud Endpoints:Cannot read property ‘xxx’ of undefined

Published on:
Last updated:

This post is also available in: 日本語 (Japanese)

When I try to call the API of Cloud Endpoints using AngularJS, I'm getting an error message below.
Cause is that Cloud Endpoints method does not called at the start of service(initialization).

Uncaught TypeError: Cannot read property 'xxx' of undefined

Call the client library

Javascript code below will make sure to to be called "the last" than other code(such as AngularJS and ionic).

<script src="https://apis.google.com/js/client.js?onload=init"></script>

Since calling the initialization function "init ()" by "onload = init", you add the following code to the file where you want to use the Cloud Endpoints.
Meaning of the detailed code, please refer to the google Developer Guide link at the end article.

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

Add an initialization process to controller of AngularJS

Add the code like the following to controller or service of AngularJS.
Do not forget to take a "$window" to the argument of the controller and services.

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

    $scope.sample_googleendpoints_lib = function () {
        var ROOT = 'https://your_app_id.appspot.com/_ah/api';
        gapi.client.load('your_api_name', 'v1', function () {
            doSomethingAfterLoading();
            alert("Ready!");
        }, ROOT);
    };

Reference Quote:
https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications

No tags for this post.

About
Kuniyoshi Takemoto is the founder of Amelt.net LLC, and editor of this blog(www.amelt.net).Learn more and follow me on LinkedIn.