角度サービスがexpとして動作していない

Question

私は、角度のサービスにウェブアプリにGoogleログインを入れようとしていますが、私が間違っていることを理解できません。予想通り、私はページ、コンソールログservice startedをロードし、その後私は、エラーTypeError: Cannot read property 'getAuthInstance' of undefinedを取得するとここで

は私のサービス

angular.module('sensdogserver.services', []) 

.service('AuthenticationService', function ($window,$http) { 
    console.log("service started") 

    gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined 

      gapi.auth2.init(
        { 
         client_id: 'CLIENT_ID', 

        } 
      ); 
    }); 


    this.googlelogin = function(){ 
     var GoogleAuth = gapi.auth2.getAuthInstance(); 
     GoogleAuth.signIn().then(function(googleUser){//request to sign in 
     var profile = googleUser.getBasicProfile(); 

     username = profile.getName(); 
     $window.localStorage['username'] = username; 
     googleUser = googleUser; 
     googletoken = googleUser.getAuthResponse().id_token; 
     console.log("google token: " + googletoken); 
     $http.get("/api/auth/google/token",{headers:{'id_token':googletoken}}).success(function(data){console.log(data)}).error(function(data){console.log(data)}); 
     } 

     )}; 


    this.googlesignout =function() { 
     var auth2 = gapi.auth2.getAuthInstance(); 
     console.log("signing out: ", username); 
     auth2.signOut().then(function() { 
     googleUser = null; 
     googletoken = null; 
     username = null; 
      console.log('User signed out.'); 
     }); 
    } 

    var googleUser = null; 
    var googletoken = null; 
    var username = null; 

    this.googlelogin(); 


}); 

です。 Googleログインへの呼び出しをコメントにしてコントローラからgoogleloginに電話すると、ページがロードされた後、それは絶対にうまく動作します。私が理解できないことは、ログメッセージを受け取ることです。サービスがロードされ、何かが実行されているように見えますが、すべてではありません。

Answer 1

gapi.load('auth2', ...)コールバック内にthis.googlelogin();コールを配置する必要があります。あなたはそれが初期化される前にそれを呼んでいます。

angular 
    .module('sensdogserver.services', []) 
    .service('AuthenticationService', function ($window,$http) { 
    console.log("service started") 

    gapi.load('auth2', function() { 
     gapi.auth2.init({ 
     client_id: 'CLIENT_ID', 
     }); 
     console.log('gapi.load callback triggered'); 
     this.googlelogin(); // call it here in the load callback 
    }.bind(this)); 

    this.googlelogin = function(){ 
     // ... 
    }; 

    this.googlesignout = function() { 
     // ... 
    } 

    // ... 
    console.log('this will be printed before the gapi.load callback'); 
    }); 

私はロードコールバックに、あなたが問題を強調するためにgooglelogin機能を呼び出すために使用される場所へのロギングを追加しました。

gapi.load()呼び出しは非同期（ノンブロッキング）です。呼び出すと、目的のAPIが呼び出されますが、応答を待つことはありません。応答は、別のイベントループ（gapi.load()関数が呼び出されたメインプログラムブロックの後）でトリガされるコールバック関数で利用できます。

これを見てください：https://developer.mozilla.org/cs/docs/Web/JavaScript/EventLoop、これについてのいくつかの基礎を提供する必要があります。 gapi.loadを呼び出すと、setTimeoutの例と非常によく似ています。