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请求