Angular-Facebook

An AngularJS module based approach to the Facebook Javascript SDK.

Demo

Sample application.

Install

install with bower

bower install angular-facebook

or download the master.zip

Usage

You first have to declare the facebook module dependency inside your app module (perhaps inside your app main module). Then you need to configure the facebook module using the 'FacebookProvider':

angular.module('app', ['facebook'])

  .config(function(FacebookProvider) {
     // Set your appId through the setAppId method or
     // use the shortcut in the initialize method directly.
     FacebookProvider.init('YOUR_APP_ID');
  })

  .controller('authenticationCtrl', function($scope, Facebook) {

    $scope.login = function() {
      // From now on you can use the Facebook service just as Facebook api says
      Facebook.login(function(response) {
        // Do something with response.
      });
    };

    $scope.getLoginStatus = function() {
      Facebook.getLoginStatus(function(response) {
        if(response.status === 'connected') {
          $scope.loggedIn = true;
        } else {
          $scope.loggedIn = false;
        }
      });
    };

    $scope.me = function() {
      Facebook.api('/me', function(response) {
        $scope.user = response;
      });
    };
  });

You can use the isReady function to get notified when the Facebook SDK is ready

$scope.$watch(function() {
  // This is for convenience, to notify if Facebook is loaded and ready to go.
  return Facebook.isReady();
}, function(newVal) {
  // You might want to use this to disable/show/hide buttons and else
  $scope.facebookReady = true;
});

Development

Install all dependencies and use gulp to watch the tests

# Install node.js dependencies
npm install

# Install bower components
bower install

# Run karma tests
gulp watch

To run protractor tests you need to install protractor first. (Protractor Setup)

# Prepare the testapp
gulp prepare-testapp

# Run protractor tests
protractor protractor.config.js