Как правильно внедрить SDK Facebook JavaScript в контроллеры AngularJS?
Я новичок в AnuglarJS и уже создал с ним небольшое веб-приложение,
Я хотел бы использовать его с помощью JavaScript JavaScript SDK, но с использованием лучших практик (зависимость от инъекций для контроллеров, поддержка структуры приложения и возможности тестирования).
Я нашел это https://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ
но его очень запутанный для кого-то нового в этой структуре (модули, сервисы и фабрики не очень хорошо объясняются ИМХО).
Итак, каков правильный способ использования SDK для Facebook в приложении AngularJS?
Ответы
Ответ 1
Мне действительно нужно было это сделать... У меня нет кода со мной, и он, вероятно, проприетарный в любом случае... но это было по существу так:
// create a simple factory:
app.factory('facebook', ['$window', function($window) {
//get FB from the global (window) variable.
var FB = $window.FB;
// gripe if it not there.
if(!FB) throw new Error('Facebook not loaded');
//make sure FB is initialized.
FB.init({
appId : 'YOUR_APP_ID'
});
return {
// a me function
me: function(callback) {
FB.api('/me', callback);
}
//TODO: Add any other functions you need here, login() for example.
}
}]);
// then you can use it like so:
app.controller('SomeCtrl', function($scope, facebook) {
//something to call on a click.
$scope.testMe = function() {
//call our service function.
facebook.me(function(data) {
$scope.facebookUser = data;
//probably need to $apply() this when it returns.
// since it async.
$scope.$apply();
});
};
});
Если есть какие-либо ошибки в этом, дайте мне знать, и я просмотрю рабочий код, который у меня есть, и посмотрю, что я пропустил. Но это должно быть об этом.
Ответ 2
2015 EDIT!
Это старый ответ. Я предлагаю вам проверить, как популярные angular -модули на github делают это или просто используют их:
Старый ответ
Из-за проблем с вызовами в начале приложения я использую следующий подход, который загружает приложение только после загрузки SDK:
window.fbAsyncInit = function () {
FB.init({
appId: window.fbConfig.appID,
channelUrl: '//' + window.location.hostname + window.location.pathname + 'channel.php',
status: window.fbConfig.oInitOptions.bStatus || true,
cookie: window.fbConfig.oInitOptions.bCookie || true,
xfbml: window.fbConfig.oInitOptions.bXfbml || true
});
// Get Login Status once at init
window.FB.getLoginStatus(function (oResponse) {
if (oResponse && oResponse.status) {
window.fbConfig.sAuthStatus = oResponse.status;
}
// Bootstrap app here only after the sdk has been loaded
angular.bootstrap(document.body, ['fbAngularApp']);
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = '//connect.facebook.net/' + window.fbConfig.lng + '/all.js';
ref.parentNode.insertBefore(js, ref);
}(document));
Ответ 3
Я написал эту услугу angularjs-facebook.
Сначала вы включите его в свой конфигурационный метод вашего приложения, чтобы инициализировать свой идентификатор приложения facebook и другие настройки.
Тогда вам просто нравится называть службу Facebook у контроллеров и вызывать методы Facebook асинхронно, как обычно.
https://github.com/ciul/angularjs-facebook
Ответ 4
Единственным способом, который работает, является включение sdk в вашу индексную страницу по-старому.
Поскольку я реализовал одно и то же решение из @blesh или расширенной версии из @elviejo, у обоих из них есть проблема, если у нас есть функция, вызываемая при вызове контроллера, вероятность того, что FB
не инициализирована, очень высокий, и это вызовет вызов при вызове функции из undefined
:)
Надеюсь, это поможет другим избежать головной боли с этим.
Ответ 5
Я был в тупике на некоторое время, я решил его с часами $
//setup watch for FB API to be ready
//note that since you use $window, you need to inject it into your controller
//angular.module('myApp').controller('appController', function ($scope, $window, ...) {
$scope.FBListener = $scope.$watch(function () {
return $window.FB;
}, function (newVal, oldVal) {
// FB API loaded, make calls
console.log("FB is ready");
//functions that do FB API calls
$scope.getFBEvents();
$scope.getFBPosts();
});
когда FB загружен, вы можете очистить $watch (что, вероятно, лучше всего сделать для производительности), вызывая $scope.FBListener();