17

我是 AnuglarJS 的新手，并且已经用它构建了一个小型网络应用程序，我想将 Facebook JavaScript SDK 与它一起使用，但使用最佳实践（依赖注入到控制器，以维护应用程序结构和可测试性）。

我发现了这个https://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ 但对于这个框架的新手来说非常混乱（模块、服务和工厂没有很好地解释恕我直言）。

那么，在 AngularJS 应用程序中使用 Facebook SDK 的正确方法是什么？

4

5 回答 5

5

我实际上不得不这样做......我没有代码，无论如何它可能是专有的......但它本质上是这样的：

// create a simple factory:    
app.factory('facebook', ['$window', function($window) {

    //get FB from the global (window) variable.
    var FB = $window.FB;

    // gripe if it's not there.
    if(!FB) throw new Error('Facebook not loaded');

    //make sure FB is initialized.
    FB.init({
       appId : 'YOUR_APP_ID'
    });

    return {
        // a me function
        me: function(callback) {
            FB.api('/me', callback);
        }

        //TODO: Add any other functions you need here, login() for example.
    }
}]);

// then you can use it like so:
app.controller('SomeCtrl', function($scope, facebook) {

    //something to call on a click.
    $scope.testMe = function() {

       //call our service function.
       facebook.me(function(data) {
          $scope.facebookUser = data;

          //probably need to $apply() this when it returns.
          // since it's async.
          $scope.$apply();
       });
    };
});

如果其中有任何错误，请告诉我，我会查找我拥有的工作代码，看看我错过了什么。但这应该是关于它的。

于 2012-12-10T16:26:39.963 回答
5

2015 年编辑！

这是一个古老的答案。我建议你看看 github 上流行的 angular-modules 是如何做到的，或者干脆使用它们：

旧答案

由于应用程序启动时的调用问题，我使用以下方法，仅在加载 SDK 后加载应用程序：

window.fbAsyncInit = function () {
FB.init({
    appId: window.fbConfig.appID,
    channelUrl: '//' + window.location.hostname + window.location.pathname + 'channel.php',
    status: window.fbConfig.oInitOptions.bStatus || true,
    cookie: window.fbConfig.oInitOptions.bCookie || true,
    xfbml: window.fbConfig.oInitOptions.bXfbml || true
});


// Get Login Status once at init
window.FB.getLoginStatus(function (oResponse) {
    if (oResponse && oResponse.status) {
        window.fbConfig.sAuthStatus = oResponse.status;
    }

    // Bootstrap app here only after the sdk has been loaded
    angular.bootstrap(document.body, ['fbAngularApp']);
});
};

// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
    return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = '//connect.facebook.net/' + window.fbConfig.lng + '/all.js';
ref.parentNode.insertBefore(js, ref);
}(document));
于 2013-09-21T04:43:01.120 回答
1

我已经编写了这个 angularjs-facebook 服务。首先，您在您的应用程序模块配置方法中对其进行初始化，以初始化您的 facebook 应用程序 ID 和其他设置。

然后您就可以享受从控制器调用 Facebook 服务并像往常一样异步调用 Facebook 方法了。

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

于 2013-08-18T17:11:34.767 回答
0

唯一可行的方法是以旧方式在索引页面中包含 sdk。

因为我已经从@blesh 实现了相同的解决方案，或者从@elviejo 实现了扩展版本，如果我们有一个在调用控制器时调用的函数，它们都有一个问题，FB未初始化的机会非常高，这将使从undefined:)调用函数时调用失败

希望这将有助于其他人避免头痛。

于 2013-05-06T13:57:24.583 回答
0

我被这个问题难住了一段时间，我用 $watch 解决了这个问题

//setup watch for FB API to be ready
//note that since you use $window, you need to inject it into your controller
//angular.module('myApp').controller('appController', function ($scope, $window, ...) {
$scope.FBListener = $scope.$watch(function () {
  return $window.FB;
}, function (newVal, oldVal) {
  // FB API loaded, make calls
  console.log("FB is ready");
  //functions that do FB API calls
  $scope.getFBEvents();
  $scope.getFBPosts();
});

加载 FB 后，您可以通过调用清除 $watch （这可能是最好的性能）$scope.FBListener();

于 2016-10-07T13:32:14.650 回答