angular-facebook

An Angularjs module to take approach of Facebook javascript sdk.

Module License: MIT

Added by: Sam Deering

GitHub

Repository

ciul/angular-facebook

Stats

Stars: 559

Watchers: 559

Forks: 141

Module Description

Angular-Facebook Build Status

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

Module stats last updated: 2017-04-17 15:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!