AngularJS - 對Facebook API的異步調用

Question

我試圖用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，我將顯示一些選項，否則，我將顯示Login按鈕。

我已經嘗試使用$ q.defer（）函數，promises，factorys來查看響應數據，一切。 但是任何事情都可以按照我的意 我已經檢查了一些基於Egghead.io示例的開發示例，但我認為我並不完全理解angularjs中的異步調用。

提前致謝。

Answer 1

這是在Angular服務中包裝Facebook API的完整基本工作示例：

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

另請參閱我對此問題的回答（其中包含一些Angular-FB集成的部分示例）：

AngularJS：在哪里使用承諾？

Answer 2

如果你想讓所有的fb代碼都采用稍微有點棱角的風格，可以考慮做一些事情，比如在提供者中封裝FB類。 FB是一個罕見的例子，其中提供者模式實際上很好用（在配置部分設置應用程序ID）。

這是一個角度facebook提供程序的示例，它具有基本的登錄功能和用於進行圖形api調用的通用方法：

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

Answer 3

我將此模塊angularjs-facebook寫為提供程序，這樣在配置中您可以配置您的應用程序ID，然后您可以使用facebook異步調用。 還有監聽控制器的方法。

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

Answer 4

下面是使用iTunes API發出異步http請求的一個很好的例子。 它應該可以幫助你弄清楚如何使用Facebook API。

Angular JS中的異步HTTP請求