Wie man Facebook JavaScript SDK richtig in AngularJS Controller einspeist?

Question

Ich bin neu bei AnuglarJS und habe schon eine kleine Web-App damit gebaut, Ich möchte das Facebook JavaScript SDK dazu nutzen, aber mit Best Practices (Dependency Injection zu Controllern, um App Struktur und Testbarkeit zu erhalten).

Ich fand diese https://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ aber es ist sehr verwirrend für jemanden neu in diesem Framework (Module, Dienstleistungen und Fabriken sind nicht gut erklärt, IMHO).

Also, was ist der richtige Weg, um das Facebook SDK in einer AngularJS App zu verwenden?

Answer 1

Ich habe tatsächlich, dies zu tun ... Ich habe den Code nicht mit mir, und es ist wahrscheinlich sowieso proprietäre ... aber es war im Wesentlichen wie folgt aus:

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

Wenn es irgendwelche Fehler dabei lassen Sie mich wissen, und ich werde den Arbeitscode nachschlagen, den ich habe und sehen, was ich verpasst habe. Aber das sollte darüber sein.

Answer 2

Die einzige Möglichkeit, die funktioniert, ist die Aufnahme der SDK in Ihrer Indexseite auf die alte Art und Weise.

Da ich die gleiche Lösung von @blesh oder erweiterte Version von @elviejo implementiert haben, haben beide ein Problem, wenn wir eine Funktion haben, die aufgerufen wird, wenn der Controller aufgerufen wird, ist die Chance, dass FB nicht initialisiert wird hoch und dies wird den Aufruf fehlgeschlagen beim Aufruf einer Funktion von undefined :)

Hoffen, dass dies anderen Kopfschmerzen zu vermeiden mit diesem helfen wird.

Answer 3

Ich habe diesen angularjs-facebook Service geschrieben. Zuerst initialisieren Sie es in Ihrer App-Modul Config-Methode, um Ihre Facebook-App-ID und andere Einstellungen zu initialisieren.

Dann genießen Sie einfach den Facebook-Dienst von Controllern aufrufen und Facebook-Methoden asynchron wie normal aufrufen.

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

Answer 4

2015 EDIT!

Dies ist eine alte Antwort.Ich werde Sie überprüfen vorschlagen, wie die beliebten Winkel-Module auf GitHub es tun oder einfach nutzen sie:

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

Alte Antwort

Wegen Problemen mit Anrufen beim Start der App verwende ich den folgenden Ansatz, der lädt die App erst nach dem SDK geladen wurde:

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

Ich war auf diese für eine Weile ratlos, ich löste es mit einem $ Uhr

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

wenn FB geladen ist, können Sie deaktivieren Sie das $ watch (was ist wahrscheinlich am besten für die Leistung tun) durch den Aufruf $scope.FBListener();