Reference

ngFacebook is a Facebook SDK wrapper for AngularJS Apps. It aims to minimum configuration Facebook support to AngularJS applications.

Installation

bower install --save ngFacebook

Support

Currently supported features of the Facebook SDK:

• User Authentication (login, logout etc)
• Graph API
• UI
• XFBML.parse

Usage

Initialisation

Include the module in your app and initialise it during the application config block in the same manner you would initialise the FB SDK:

angular
    .module('my-angularjs-app', ['facebook'])
    .config(['$facebookProvider', function($facebookProvider) {
        $facebookProvider.init({
            appId: 'myFbApplicationId',
            channel: '//path/to/channel.html'
        });
    }]);

### Methods
Use `$facebook` as you would FB. Method and property names are the same as on the traditional FB object, except that they use promises instead of callbacks.

```javascript
angular
    .module('my-angularjs-app')
    .controller('my-controller', ['$facebook', function($facebook) {
        // bind directly to the response promise
        $scope.loginStatus = $facebook.getLoginStatus();

        // use the promise in code
        $facebook.getLoginStatus().then(
            function(response) {
                $scope.loginResponse = response;
            },
            function(response) {
                $scope.loginError = response.error;
            }
        );
    }]);

The one exception to this is $facebook.getAuthResponse which is synchronous.

Events

Events from the Facebook SDK are then broadcast through the $rootScope of the application. The naming convention is to use the same event name as the Facebook SDK, prepended with 'facebook.' - so 'auth.authResponseChange' is broadcast as 'facebook.auth.authResponseChange'. Consume these events as you would any other angular event:

angular
    .module('my-angularjs-app')
    .controller('another-controller', ['$scope', '$facebook', function($scope, $facebook) {
        $scope.$on('facebook.auth.authResponseChange', function(response) {
            $scope.authStatus = response.status;
        });
    }]);

XFBML.parse

When the Facebook SDK loads, it parses FBML mark up on the page and renders it in the browser (e.g. fb:activity, fb:login, etc). However, in an Angular app that uses routing when a new view loads this parser doesn't automatically run. Instead you need to manually call FB.XFBML.parse() in order to render the FBML elements.

The $facebook.parse() method wraps this function so that you can render FBML elements from within your Angular app.

angular
    .module('my-angularjs-app')
    .controller('my-controller', ['$facebook', function($facebook) {
        // Render FBML elements
        $facebook.parse();
    }]);