AngularJS - Asynchrone Aufruf zu Facebook-API

Ich bin versucht zu rufen, eine Facebook-API mit AngularJS.

Das problem ist, dass alle Anrufe von der FB-API ist die Asynchrone, also muss ich wissen, wenn meine Anfrage auf facebook ist verfügbar um den Einsatz in agularjs.

Für diese, ich nenne diese Methode in meinem controller:

Facebook.getLoginStatus();

was Facebook ist mein service, definiert als:

app.factory('Facebook', function() {

    getLoginStatus: function() {

        FB.getLoginStatus(function(stsResp) {
            console.log(stsResp);
            if(stsResp.authResponse) {
                //User is already logged in
                return true;
            } else {
                //User is not logged in.
                return false;
            }
        });
    }

}

Was ich will, in diesem Fall ist zu prüfen, ob der Benutzer angemeldet ist. Wenn das stimmt, werde ich zeigen einige Optionen, ansonsten werde ich den Login-button.

Habe ich auch schon probiert zu verwenden, $q.defer () - Funktionen verspricht, factorys zu beobachten response-Daten, alles. Aber alles funktioniert wie ich will. Ich habe einige Entwicklung-Beispiele aus Eierkopf.io Beispiele, aber ich denke, dass ich nicht vollständig verstehen, asynchrone Aufrufe in angularjs.

Vielen Dank im Voraus.

InformationsquelleAutor Deividi Cavarzan | 2013-04-20

angularjs javascript

8

Hier ist eine komplette basic-Beispiel für Verpackung der Facebook-API in ein Eckiges service:

http://plnkr.co/edit/0GRLdWPJOzGFY14irxLT?p=preview

Siehe auch meine Antwort auf diese Frage (die hat teilweise einige Beispiele für Angular-FB-integration):

AngularJS : Wo zu verwenden, was Sie verspricht?

Vielen Dank für Ihre Antwort, Es war sehr, sehr hilfreich mein Freund. Nur eine Sache: Haben Sie wissen, wie kann ich pflegen eine transiente variable, deuten auf eine gewisse Art ein lade-status? Ich sehe, dass Sie auf Pluncker der Vorname, aber ich werde nie bekommen Sie diese variable, wenn der Button eine Verbindung zu facebook wans nicht angezeigt. Ich will nicht zu zwingen, den login zu FB. Vielen Dank im Voraus.
Ich bin nicht sicher, ob ich die Frage verstehe, aber schauen Sie sich die aktualisierte Plunker. Ich habe eine 'connected' in der Flagge, die zunächst auf false gesetzt, und ist dann true, wenn sich jemand anmeldet. Bitte akzeptieren Sie die Antwort, wenn es die Frage beantwortet, danke.
Ja, das ist es, was ich meine. Hast du am gleichen pluncker? Ich sehe keine Aktualisierung auf code.
Versuchen Sie den link ein weiteres mal, sorry, vielleicht brauchte ich, um die änderungen zu speichern. Sie sollten sehen, dass die beiden HTML-Elemente sind conditionalized auf " Benutzer.verbunden' nun, und dieses flag initialisiert und aktualisiert in der Anwendung code.
Bekomme ich eine "Cannot set property "verbunden " null" error in meiner Konsole. ...

InformationsquelleAutor karlgold

wenn Sie wollen, haben alle fb-code in eine etwas mehr angularish Stil, in Betracht ziehen etwas wie Kapselung der FB-Klassen bei einem Anbieter. FB ist ein Seltenes Beispiel, wo der Anbieter Muster ist wirklich schön zu verwenden (setup Ihrer app-ID im config-Abschnitt).

hier ist ein Beispiel für ein Winkel-facebook-Anbieter mit basic-login-Funktionalität und Allgemeine Methode für die Herstellung von Graphen-api-Aufrufe:

app.provider('facebook', function() {
  var fbReady = false
  this.appID = 'Default';

  function fbInit(appID) {
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));  
    window.fbAsyncInit = function() {
     FB.init({
      appId      : appID,
      cookie     : true,  
      xfbml      : true,  
      version    : 'v2.0' 
    });
     fbReady = true;
   }   
 }

 this.setAppID = function(appID) {
  this.appID = appID;
};

this.$get = function() {
  var appID = this.appID;
  var self = this;
  fbInit(appID);

  return {
    graph : function(path, cb) {
      FB.api(path, function(response) {
        cb(response);
      });
    },
    getAuth: function() {
      return self.auth;
    },
    getLoginStatus: function(cb) {
      if (!fbReady) {
        setTimeout(function() { 
          self.$get()['getLoginStatus'](cb);
        } , 100);
        console.log('fb not ready');
        return;
      }
      FB.getLoginStatus(function(response) {
        cb(response);
      });
    },
    login: function(cb) {
      if (!fbReady) {
        self.$get()['login'](cb);
        console.log('fb not ready');
        return;
      }
      FB.login(function(response) {
        if (response.authResponse) {
          self.auth = response.authResponse;
          cb(self.auth);
        } else {
          console.log('Facebook login failed', response);
        }
      }, {"scope" : "manage_notifications"});

    },
    logout: function() {
      FB.logout(function(response) {
        if (response) {
          self.auth = null;
        } else {
          console.log('Facebook logout failed.', response);
        }

      });
    }
  }
}
});

später, wenn Sie es verwenden möchten, stellen Sie einfach Ihre app-ID in der config-section:

app.config(function(facebookProvider){
 facebookProvider.setAppID('<your_app_id>');
})

injizieren es zu einem controller:

.controller('MainCtrl', function ($scope, facebook) {

und führen Sie dann einige Anrufe in controller/ausführen Abschnitt:

facebook.graph('/me/notifications', onNotificationsGotten);

schöne Lösung. sollte sich auf github << senden Sie einen pull-request mit kleinen Ergänzungen.

InformationsquelleAutor orcaman

3

Schrieb ich dieses Modul angularjs-facebook als einen Anbieter, so dass Sie auf config konfigurieren Sie Ihre app-id und dann können Sie mit facebook asynchrone Aufrufe. Es gibt auch Methoden, zu hören auf dem Controller.

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

InformationsquelleAutor Ciul
1

Heres ein gutes Beispiel für das asynchrone http-Anfragen mit der iTunes-API. Es sollte Ihnen helfen, herauszufinden, wie es zu tun mit der Facebook-API.

Asynchrone HTTP-requests in Angular JS

InformationsquelleAutor James Morris

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.