加载facebook-sdk for angularjs时出现问题

时间:2014-03-26 08:17:19

标签: facebook angularjs facebook-javascript-sdk angularjs-scope

我正在尝试将facebook登录与我的网络应用程序集成,但它以某种方式给出了以下错误。

Uncaught Error: Provider Facebook must define $get factory method. from facebook

虽然我添加了具有$ get方法的angular-facebook.js文件,但仍然有一个错过。

我的index.html是:

            <!doctype html>
            <html lang="en" ng-app="AngularSpringApp">
            <head>
                <meta charset="utf-8">
                <title>Service App</title>
                <link rel="stylesheet" href="/resources/css/app.css"/>
                <link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css" />
            </head>
            <body>
            <div id="wrapper">

                <ul class="menu">
                    <li><a href="#/cars">Cars</a></li>
                    <li><a href="#/trains">Trains</a></li>
                    <li><a href="#/railwaystations">Railway Station</a></li>
                </ul>
                <hr class="" />
                <div ng-view></div>

            </div>

            <script src="/resources/js/lib/angular/angular.js"></script>
            <script src="/resources/js/angular-facebook.js"></script>
            <!--<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="//rawgithub.com/Ciul/angular-facebook/master/lib/angular-facebook.js"></script>-->
            <script src="/resources/js/app.js"></script>
            <script src="/resources/js/services.js"></script>
            <script src="/resources/js/controllers/RailwayStationController.js"></script>
            <script src="/resources/js/controllers/CarController.js"></script>
            <script src="/resources/js/controllers/TrainController.js"></script>
            <script src="/resources/js/filters.js"></script>
            <script src="/resources/js/directives.js"></script>
            </body>
            </html>

我的部分文件包含facebook登录/注销:

            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">

                        <div class="page-header">
                            <h1>Hello ngFacebook!
                                <small><a href="http://www.facebook.com/luiscarlosjayk" target="_blank">by Ciul</a></small>
                            </h1>
                        </div>

                        <div>
                            <div class="alert alert-info" data-ng-show="salutation">Hello, {{user.name}}</div>
                            <div class="alert alert-warning" data-ng-show="byebye">Bye bye :'(</div>
                        </div>

                        <button type="button" class="btn btn-primary btn-large" data-ng-show="!logged"
                                data-ng-disabled="!facebookReady" data-ng-click="IntentLogin()">Login with Facebook
                        </button>
                        <button type="button" class="btn btn-danger btn-large" data-ng-show="logged"
                                data-ng-disabled="!facebookReady" data-ng-click="logout()">Logout
                        </button>

                        <div>
                            <debug val="user"></debug>
                        </div>

                    </div>
                </div>
            </div>

app.js是:

            'use strict';

            var AngularSpringApp = {};

            var App = angular.module('AngularSpringApp', ['facebook', 'AngularSpringApp.filters', 'AngularSpringApp.services', 'AngularSpringApp.directives']);

            // Declare app level module which depends on filters, and services
            App.config(['$routeProvider', '$FacebookProvider', function ($routeProvider, $FacebookProvider) {

                var myAppId = '239661002870669';

                // You can set appId with setApp method
                // FacebookProvider.setAppId('myAppId');

                /**
                 * After setting appId you need to initialize the module.
                 * You can pass the appId on the init method as a shortcut too.
                 */
                $FacebookProvider.init(myAppId);

                $routeProvider.when('/cars', {
                    templateUrl: 'cars/layout',
                    controller: CarController
                });

                $routeProvider.when('/trains', {
                    templateUrl: 'trains/layout',
                    controller: TrainController
                });

                $routeProvider.when('/railwaystations', {
                    templateUrl: 'railwaystations/layout',
                    controller: RailwayStationController
                });

                $routeProvider.otherwise({redirectTo: '/cars'});
            }]);

Controller.js:

            'use strict';

            /**
             * CarController
             * @constructor
             */
            var CarController = function($scope, $http, $timeout, Facebook) {

                // Define user empty data :/
                $scope.user = {};

                // Defining user logged status
                $scope.logged = false;

                // And some fancy flags to display messages upon user status change
                $scope.byebye = false;
                $scope.salutation = false;

                /**
                 * Watch for Facebook to be ready.
                 * There's also the event that could be used
                 */
                $scope.$watch(
                    function() {
                        return Facebook.isReady();
                    },
                    function(newVal) {
                        if (newVal)
                            $scope.facebookReady = true;
                    }
                );

                /**
                 * IntentLogin
                 */
                $scope.IntentLogin = function() {
                    Facebook.getLoginStatus(function(response) {
                        if (response.status == 'connected') {
                            $scope.logged = true;
                            $scope.me();
                        }
                        else
                            $scope.login();
                    });
                };

                /**
                 * Login
                 */
                $scope.login = function() {
                    Facebook.login(function(response) {
                        if (response.status == 'connected') {
                            $scope.logged = true;
                            $scope.me();
                        }

                    });
                };

                /**
                 * me
                 */
                $scope.me = function() {
                    Facebook.api('/me', function(response) {
                        /**
                         * Using $scope.$apply since this happens outside angular framework.
                         */
                        $scope.$apply(function() {
                            $scope.user = response;
                        });

                    });
                };

                /**
                 * Logout
                 */
                $scope.logout = function() {
                    Facebook.logout(function() {
                        $scope.$apply(function() {
                            $scope.user   = {};
                            $scope.logged = false;
                        });
                    });
                }

                /**
                 * Taking approach of Events :D
                 */
                $scope.$on('Facebook:statusChange', function(ev, data) {
                    console.log('Status: ', data);
                    if (data.status == 'connected') {
                        $scope.$apply(function() {
                            $scope.salutation = true;
                            $scope.byebye     = false;
                        });
                    } else {
                        $scope.$apply(function() {
                            $scope.salutation = false;
                            $scope.byebye     = true;

                            // Dismiss byebye message after two seconds
                            $timeout(function() {
                                $scope.byebye = false;
                            }, 2000)
                        });
                    }


                });

                $scope.fetchCarsList = function() {
                    $http.get('cars/carlist.json').success(function(carList){
                        $scope.cars = carList;
                    });
                };

                $scope.addNewCar = function(newCar) {
                    $http.post('cars/addCar/' + newCar).success(function() {
                        $scope.fetchCarsList();
                    });
                    $scope.carName = '';
                };

                $scope.removeCar = function(car) {
                    $http.delete('cars/removeCar/' + car).success(function() {
                        $scope.fetchCarsList();
                    });
                };

                $scope.removeAllCars = function() {
                    $http.delete('cars/removeAllCars').success(function() {
                        $scope.fetchCarsList();
                    });

                };

                $scope.fetchCarsList();
            };

请让我知道我错过的错误在哪里,我是Angularjs的新手,已经消耗了超过一半的时间。谢谢!

1 个答案:

答案 0 :(得分:0)

如果您想详细说明如何将FacebookAPI集成到AngularJs中,您可以考虑阅读本文。

http://www.boynux.com/angularjs-facebook-integration/

这只是创建了一个可以在应用程序中轻松使用的Facebook模块。