Facebook JavaScript SDK'sını AngularJS denetleyicilerine doğru şekilde nasıl enjekte edebilirsiniz?

Question

AnuglarJS için yeni ve zaten onunla küçük bir web uygulaması inşa, Onunla Facebook JavaScript SDK kullanmak istiyorum, ancak en iyi uygulamaları kullanarak (kontrolörler enjekte bağımlı, uygulama yapısını ve test edilebilirliğini korumak için).

https://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ buldum ama bu çerçeveye yeni biri için çok kafa karıştırıcı (modüller, hizmetler ve fabrikalar iyi IMHO açıklanmamaktadır).

Yani, AngularJS uygulamasında Facebook SDK'sını kullanmanın uygun yolu nedir?

Answer 1

Aslında vardı bunu yapmak için ... yanımda kodu yok ve nasıl olsa muhtemelen tescilli ... ama böyle esasen oldu:

// create a simple factory:  
app.factory('facebook', ['$window', function($window) { 

    //get FB from the global (window) variable. 
    var FB = $window.FB; 

    // gripe if it's 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's async. 
      $scope.$apply(); 
     }); 
    }; 
}); 

varsa herhangi Buradaki hatalar bana haber verir ve sahip olduğum çalışma kodunu arayacağım ve neyi özlediğimi göreceğim. Ama bununla ilgili olmalı.

Answer 2

Çalışmanın tek yolu, dizin sayfanızdaki sdk'yi eski şekilde dahil etmektir.

Aynı çözümü @blesh veya @elviejo'dan genişletilmiş sürümden uyguladığım için, her ikisi de denetleyici çağrıldığında çağrılan bir işleve sahip olmamız durumunda bir sorunla karşılaşırsa, FB'un başlatılma olasılığı çok yüksektir yüksek ve bu, undefined

'dan gelen bir işlevi çağırarak aramayı başarısız hale getirecektir. Bu, başkalarının baş ağrısından kaçınmasına yardımcı olacaktır.

Answer 3

Bu angularjs-facebook hizmetini yazdım. Öncelikle, facebook uygulama kimliğinizi ve diğer ayarlarınızı başlatmak için uygulama modülü yapılandırma yönteminde başlatırsınız.

Ardından, Facebook hizmetlerini Controllers'den çağırmanın ve Facebook yöntemlerini normal gibi normal olmayan bir şekilde arama özelliğinin keyfini çıkarırsınız.

https://github.com/ciul/angularjs-facebook

Answer 4

2015 DÜZENLEME!

Bu eski bir yanıttır.

• https://github.com/Ciul/angular-facebook
• https://github.com/pc035860/angular-easyfb
• https://github.com/GoDisco/ngFacebook

Eski Cevap

: Ben bunları kullanmak yeterlidir github üzerinde popüler açısal-modüller bunu nasıl kontrol veya öneride bulunuruz

Uygulama başlangıcındaki çağrılardan dolayı, aşağıdakileri kullanıyorum, hangi yükler SDK yüklendikten sonra app:

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)); 

Answer 5

Bir süre bu konuda şaşkına dönmüş, ben FB yüklendiğinde

//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(); 
}); 

, sen temizleyebilirsiniz bir $ saatin ile çözüldü $scope.FBListener();