我正在尝试将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的新手,已经消耗了超过一半的时间。谢谢!
答案 0 :(得分:0)
如果您想详细说明如何将FacebookAPI集成到AngularJs中,您可以考虑阅读本文。
http://www.boynux.com/angularjs-facebook-integration/
这只是创建了一个可以在应用程序中轻松使用的Facebook模块。