JavaScript 版 Facebook SDK 与 AngularJS

您可以集成 AngularJS 和 JavaScript 版 Facebook SDK。但由于我们的 SDK 适用于 Web 环境，而不是其他特定框架，所以我们并未提供 AngularJS 模块。

加载 JavaScript 版 Facebook SDK

如需向应用添加 JavaScript 版 Facebook SDK，我们建议您按照 AngularJS 网页应用中的 Facebook 身份验证文档或 https://docs.angularjs.org/guide 网站上发布的其他指南操作。

使用最新版 SDK

按照任何指南操作时，请务必加载最新的 SDK 文件sdk.js：

// Old SDK (deprecated)
js.src = "https://connect.facebook.net/en_US/all.js";

// New SDK (v2.x)
js.src = "https://connect.facebook.net/en_US/sdk.js";

并在 FB.init() 调用中提供图谱 API 版本（目前是 v2.4）：

$window.fbAsyncInit = function() {
    FB.init({ 
      appId: '{your-app-id}',
      status: true, 
      cookie: true, 
      xfbml: true,
      version: 'v2.4'
    });
};

处理回调

JavaScript 版 Facebook SDK 不支持 Promise 的概念。为解决这个问题，您可以在服务中捆绑 JavaScript 版 Facebook SDK 调用函数（举例）：

// ...
.factory('facebookService', function($q) {
    return {
        getMyLastName: function() {
            var deferred = $q.defer();
            FB.api('/me', {
                fields: 'last_name'
            }, function(response) {
                if (!response || response.error) {
                    deferred.reject('Error occured');
                } else {
                    deferred.resolve(response);
                }
            });
            return deferred.promise;
        }
    }
});

使用示例如下：

$scope.getMyLastName = function() {
   facebookService.getMyLastName() 
     .then(function(response) {
       $scope.last_name = response.last_name;
     }
   );
};

第三方学习资源

AngularJS 指南页面还列出了一些第三方学习资源，可帮助您便捷地使用 JavaScript 版 Facebook SDK。