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

記事公開日:
最終更新日:

This post is also available in: English-US (英語)

AngularJSを使ってCloud EndpointsのAPIを呼び出そうとしたら、下記のエラーが出ました。
原因はCloud Endpointsがサービスの起動時(初期化時)に上手く呼び出されていないかららしいです。

Uncaught TypeError: Cannot read property 'xxx' of undefined

クライアントライブラリを呼び出す

下記のjavascriptコードが他のコード(AngularJSやionicなど)よりも「一番最後に」呼び出されるようにしておきます。
ionicとはAngularJSベースのUIフレームワークで、OnsenUIとかと同じ部類のサービスです。

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

onload=init にて初期化関数 init() を呼び出すので、Cloud Endpoints を使いたいファイル(例えば、index.html なら index.js もしくは直接HTMLに書く)に下記のコードを付け加えます。
詳しいコードの意味は、記事終わりにあるリンクのgoogleディベロッパーガイドを参照してください。

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

AngularJSのcontrollerに初期化処理を追加する

AngularJSのcontrollerもしくはserviceに以下のようなコードを追加します。コントローラーやサービスの引数に $window を取るのを忘れないようにしてください。

    $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);
    };

参考引用:
https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/?hl=ja

No tags for this post.

About
Amelt.net,LLCの創業者で、費用対効果の高い統合webマーケティングによりビジネスパートナーとして継続的にサポート。詳しいより。ブログの更新情報TwitterLinkedIn、またRSSfeedlyにてお知らせしていますのでフォローよろしくお願い致します。