Installing

The project is registered on bower. To install it using the following command bower install angularjs-facebook-sdk --save inside your project.

You'll need to refer the module on your main application module like below:

angular.module('yourModule', ['angularjs-facebook-sdk'])

Services

facebookConfigProvider

This service is mainly used during the configuration phase.

angular.module('app', ['angularjs-facebook-sdk'])
    .config(function facebookConfig (facebookConfigProvider) {
      facebookConfigProvider.setAppId(207348272805163);
      facebookConfigProvider.setLanguage('en-US');
      facebookConfigProvider.setDebug(true);

      // When autoInit is setted to false you need to initialize
      // the facebookConfig service manually inside a run block.
      facebookConfigProvider.autoInit(false);

      // Same: developers.facebook.com/docs/javascript/reference/FB.init/
      facebookConfigProvider.setOptions({
        status: true
      });
    })

facebookConfig

Getter of facebookConfigProvider.

angular.module('app', ['angularjs-facebook-sdk'])
    .run(function appRunner(facebookConfig) {
      // Only need when auto initialization is disabled
      // using facebookConfigProvider.autoInit(false)
      facebookConfig.init().then(function(){
        console.log('Facebook SDK is loaded.');
      });
    })

facebookService

This is the main service that encapsulates all operations available on the Facebook Javascript SDK.

All operations are wrapped inside AngularJS life-cycle and they're all Promise-based. For example, the example below shows how to use the facebookService.ready promise to know when the initialization process is complete.

angular.module('app')
  .run(function (facebookService) {
    facebookService.ready.then(function () {
      var statusHandler = function (response) {
        if (response.status === 'connected') {
          facebookService.api('/me').then(function (response) {
            console.log(response);
          });
        }
      };

      facebookService.Event.subscribe('auth.statusChange', statusHandler);
    });
  })

Directives