Cant integrate facebook login to angular app using ngFacebook

Question

Somehow I am not able to integrate facebook Login to my angularjs app, though I feel I am just loosing a minor mistake which I cant point out and thus you geeks might be sureshot help!

I have used this plunker example:

Following the above code same as what has been mentioned in plunker, below are y files.

my app.js {which has nothing but routing info, ngFacebook module I have injected in controller.js}

            'use strict';

            // Declare app level module which depends on filters, and services
            angular.module('ngdemo', ['ngdemo.filters', '$strap.directives', 'ngdemo.services', 'ngdemo.directives', 'ngdemo.controllers']).
                config(['$routeProvider', function ($routeProvider) {
                    $routeProvider.when('/view5', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl4'});
                    $routeProvider.when('/view1', {templateUrl: 'modulepages/home.html', controller: 'MyCtrl1'});
                    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
                    $routeProvider.when('/view4', {templateUrl: 'modulepages/bizregistration.html', controller: 'MyCtrl3'});
                    $routeProvider.when('/view6', {templateUrl: 'partials/modalcontent.html', controller: 'MyCtrl5'});
                    $routeProvider.otherwise({redirectTo: '/view5'});
                }]);

And this is my Controller.js which has the heart of ngFacebook Integration.

            'use strict';

            /* Controllers */

            var app = angular.module('ngdemo.controllers', ['ngResource', 'ngFacebook'])
                .config([ '$facebookProvider', function( $facebookProvider ) {
                    alert("am i here?");
                    $facebookProvider.setAppId('239661002870669');
                }]);


            // Clear browser cache (in development mode)
            //
            // http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine
            app.run(function ($rootScope, $templateCache) {

                (function(){
                    // If we've already installed the SDK, we're done
                    if (document.getElementById('facebook-jssdk')) {return;}

                    // Get the first script element, which we'll use to find the parent node
                    var firstScriptElement = document.getElementsByTagName('script')[0];

                    // Create a new script element and set its id
                    var facebookJS = document.createElement('script');
                    facebookJS.id = 'facebook-jssdk';

                    // Set the new script's source to the source of the Facebook JS SDK
                    facebookJS.src = '//connect.facebook.net/en_US/all.js';

                    // Insert the Facebook JS SDK into the DOM
                    firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
                }());

                $rootScope.$on('$viewContentLoaded', function () {
                    $templateCache.removeAll();
                });
            });



            app.controller('DemoCtrl', ['$scope', '$facebook', function ($scope, $facebook) {
                 alert("I am here out");

                $scope.isLoggedIn = false;
                $scope.login = function() {
                    $facebook.login().then(function() {
                        refresh();
                    });
                }
                function refresh() {
                    $facebook.api("/me").then(
                        function(response) {
                            $scope.welcomeMsg = "Welcome " + response.name;
                            $scope.isLoggedIn = true;
                        },
                        function(err) {
                            $scope.welcomeMsg = "Please log in";
                        });
                }

                refresh();


            }]);

and that's my index.html

            <!DOCTYPE html>
            <html ng-app="ngdemo" lang="en">
            <head>
            <meta charset="utf-8">
            <title>You local needs are just a pingle away - pingle.com</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="css/app.css"/>
            <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">

            </head>
            <body ng-controller="DemoCtrl" bgcolor="#e8e8e8">

            <div class="container">
                <h4>
                    {{welcomeMsg}}
                </h4>
                <button type="button" ng-click="login()" ng-hide="isLoggedIn" class="btn btn-default navbar-btn">
                    Login
                </button>
            </div>
            <div id="fb-root">
            </div>

            <div ng-view>
            </div>

            <script src="lib/angular/angular.js"></script>
            <script src="lib/angular/angular-resource.js"></script>
            <script src="lib/angular/angular-strap.js"></script>
            <script src="js/app.js"></script>
            <script src="js/services.js"></script>
            <script src="js/controllers.js"></script>
            <script src="js/filters.js"></script>
            <script src="js/directives.js"></script>

            <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js">
            </script>
            <script src="//rawgithub.com/GoDisco/ngFacebook/master/ngFacebook.js"></script>

            </body>
            </html>

Could you please help where the problem is, it will be a great help and it is the important part of my application.

Answer 1

I just copied/pasted your code in my IDE and tested it.

I had to remove some things to simplify the testing.

E.g. remove filters, directives, services and also the config for the routeprovider. I also removed angular-strap. I updated the facebook app id to an ID of an app I own...

If you remove everything you can get it working, then you can gradually add what you need, like routing, angular-strap etc. maybe one of those creates problems...

The code you provided (cleaned with all unnecessary stuff) just worked fine for the facebook login, like the plunker code...

At the moment of writing, if you do not specify the API Facebook version you may get an error in the console, thus I specify it like this:

angular.module('app')
.config(function ($facebookProvider) {
    $facebookProvider.setAppId(facebookAppId);

    $facebookProvider.setCustomInit({
        version: 'v2.1'
    });

    $facebookProvider.setPermissions('email');
});

Actually I think this question can be closed because the code provided was incomplete and needed some effort, like removing all the unneded stuff as I mentioned...