我是AnuglarJS的新手,已经用它构建了一个小型网络应用程序,我想使用Facebook JavaScript SDK,但使用最佳实践(依赖注入控制器,以维护应用程序结构和可测试性)。
我找到了这个 https://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ但是对于刚接触这个框架的人来说,这非常令人困惑(恕我直言,模块、服务和工厂没有得到很好的解释)。
那么,在AngularJS应用程序中使用Facebook SDK的正确方法是什么?
我实际上不得不这样做...我没有随身携带代码,无论如何它可能是专有的......但它本质上是这样的:
// 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();
});
};
});
如果有任何错误,请告诉我,我会查找我拥有的工作代码,看看我错过了什么。但那应该是关于它的。
2015 编辑 !
这是一个古老的答案。我建议你看看github上流行的angular模块是如何做到的,或者干脆使用它们:
- https://github.com/Ciul/angular-facebook
- https://github.com/pc035860/angular-easyfb
- https://github.com/GoDisco/ngFacebook
旧答案
由于应用程序启动时的调用问题,我使用以下方法,该方法仅在加载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));
我写了这个angularjs-facebook服务。首先,在应用程序模块配置方法上初始化它以初始化您的Facebook应用程序ID和其他设置。
然后,您只是喜欢从控制器调用Facebook服务,并像往常一样异步调用Facebook方法。
https://github.com/ciul/angularjs-facebook
唯一有效的方法是以旧方式将 sdk 包含在索引页中。
因为我从@blesh实现了相同的解决方案或从@elviejo的扩展版本,如果我们有一个在调用控制器时调用的函数,它们都会出现问题,FB
未初始化的可能性非常高,这将使调用失败
undefined
:)调用函数希望这能帮助其他人避免头痛。
我被这个难倒了一段时间,我用$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后,您可以通过调用$scope.FBListener();
来清除$watch(这可能是为了性能而最好这样做)