How to enable Facebook JS libraries in angular?

Question

I would like to include the Facebook javascript libraries in the Angular project so that all facebook APIs (login, logout, etc.) are encapsulated inside the service. But due to the asynchronous nature of the FB library, my code looks too verbose, and I have a few calls to $ rootScope.apply (), which I'm not sure is best practice.

I now have something like this:

app.factory('Facebook', function($rootScope, $window, $q){ var FBdefer = $q.defer(); var FBpromise = FBdefer.promise; $window.fbAsyncInit = function(){ $rootScope.$apply(function(){ FB.init(/* FB init code here*/); FBdefer.resolve(FB); } } var fb_service_api = { login: function(){ var deferred = $q.defer(); FBPromise.then(function(FB){ FB.login(function(response){ $rootScope.$apply( deferred.resolve(response) ); }); } return deferred.promise. } } return fb_service_api; }) 

Look for a nice design template that fits well with the Angular framework.

Answer 1

I think you can solve this using the Misko Hevery approach here to delay loading your controller (s) until Facebook's XHR calls are "resolved."

This seems to have solved all my problems with asynchronously loading data, and you can probably just remove your $apply() calls.