2

AngularJS で Facebook API を呼び出そうとしています。

問題は、FB API からのすべての呼び出しが非同期であるため、Facebook でのクエリがいつ agularjs で使用できるかを知る必要があることです。

このために、コントローラーで次のメソッドを呼び出します。

Facebook.getLoginStatus();

どの Facebook が私のサービスで、次のように定義されます。

app.factory('Facebook', function() {

    getLoginStatus: function() {

        FB.getLoginStatus(function(stsResp) {
            console.log(stsResp);
            if(stsResp.authResponse) {
                // User is already logged in
                return true;
            } else {
                // User is not logged in.
                return false;
            }
        });
    }

}

この場合、ユーザーがログインしているかどうかを確認する必要があります。true の場合、いくつかのオプションが表示されます。それ以外の場合は、[ログイン] ボタンが表示されます。

私はすでに $q.defer() 関数、プロミス、ファクトリを使用して応答データを監視しようとしています。しかし、何でも思い通りに機能します。Egghead.ioの例を元にいくつかの開発例を確認しましたが、angularjs での非同期呼び出しが十分に理解できていないと思います。

前もって感謝します。

4

4 に答える 4

8

Facebook API を Angular サービスにラップする完全な基本的な作業例を次に示します。

http://plnkr.co/edit/0GRLdWPJOzGFY14irxLT?p=preview

この質問に対する私の回答も参照してください（Angular-FB統合の部分的な例がいくつかあります）：

AngularJS:約束をどこで使用しますか?

于 2013-04-20T05:37:37.937 に答える
4

すべての fb コードをもう少し角度のあるスタイルにしたい場合は、FB クラスをプロバイダーにカプセル化するなどのことを検討してください。FB は、プロバイダー パターンを実際に使用すると便利なまれな例の 1 つです (config セクションでアプリ ID を設定するため)。

以下は、基本的なログイン機能と、グラフ API 呼び出しを行うための一般的なメソッドを備えた角度のある facebook プロバイダーの例です。

app.provider('facebook', function() {
  var fbReady = false
  this.appID = 'Default';

  function fbInit(appID) {
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));  
    window.fbAsyncInit = function() {
     FB.init({
      appId      : appID,
      cookie     : true,  
      xfbml      : true,  
      version    : 'v2.0' 
    });
     fbReady = true;
   }   
 }

 this.setAppID = function(appID) {
  this.appID = appID;
};

this.$get = function() {
  var appID = this.appID;
  var self = this;
  fbInit(appID);

  return {
    graph : function(path, cb) {
      FB.api(path, function(response) {
        cb(response);
      });
    },
    getAuth: function() {
      return self.auth;
    },
    getLoginStatus: function(cb) {
      if (!fbReady) {
        setTimeout(function() { 
          self.$get()['getLoginStatus'](cb);
        } , 100);
        console.log('fb not ready');
        return;
      }
      FB.getLoginStatus(function(response) {
        cb(response);
      });
    },
    login: function(cb) {
      if (!fbReady) {
        self.$get()['login'](cb);
        console.log('fb not ready');
        return;
      }
      FB.login(function(response) {
        if (response.authResponse) {
          self.auth = response.authResponse;
          cb(self.auth);
        } else {
          console.log('Facebook login failed', response);
        }
      }, {"scope" : "manage_notifications"});

    },
    logout: function() {
      FB.logout(function(response) {
        if (response) {
          self.auth = null;
        } else {
          console.log('Facebook logout failed.', response);
        }

      });
    }
  }
}
});

後でそれを使用する場合は、構成セクションでアプリの ID を設定するだけです。

app.config(function(facebookProvider){
 facebookProvider.setAppID('<your_app_id>');
})

それをコントローラーに注入します。

.controller('MainCtrl', function ($scope, facebook) {

次に、コントローラー/実行セクションでいくつかの呼び出しを実行します。

facebook.graph('/me/notifications', onNotificationsGotten);
于 2014-05-09T08:06:43.523 に答える
3

このモジュール angularjs-facebook をプロバイダーとして作成しました。構成でアプリ ID を構成すると、facebook の非同期呼び出しを使用できるようになります。コントローラーでリッスンするメソッドもあります。

https://github.com/ciul/angularjs-facebook

于 2013-08-18T17:02:26.593 に答える