17

私は AnuglarJS を初めて使用し、すでに小さな Web アプリを構築しています。Facebook JavaScript SDK を使用したいと考えていますが、ベスト プラクティス (コントローラーへの依存性注入、アプリの構造とテスト容易性を維持するため) を使用します。

私はこれを見つけましたhttps://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ しかし、このフレームワークに慣れていない人にとっては非常に混乱します (モジュール、サービス、工場はよく説明されていません)。

では、AngularJS アプリ内で Facebook SDK を使用する適切な方法は何ですか?

4

5 に答える 5

5

私は実際にこれをしなければなりませんでした...私はコードを持っていません.とにかくそれはおそらく独自のものです...しかし、それは本質的に次のようでした:

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

エラーがある場合はお知らせください。私が持っている作業コードを調べて、見逃しているものを確認します。しかし、それはそれについてのはずです。

于 2012-12-10T16:26:39.963 に答える
5

2015編集！

これは古い答えです。github で人気のある angular-modules がどのようにそれを行うか、単にそれらを使用するかを確認することをお勧めします。

古い回答

アプリの開始時の呼び出しに問題があるため、次のアプローチを使用します。これは、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));
于 2013-09-21T04:43:01.120 に答える
1

この angularjs-facebook サービスを作成しました。まず、アプリ モジュールの構成メソッドでそれを初期化して、Facebook アプリ ID とその他の設定を初期化します。

次に、コントローラから Facebook サービスを呼び出し、Facebook メソッドを通常どおり非同期で呼び出します。

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

于 2013-08-18T17:11:34.767 に答える
0

機能する唯一の方法は、古い方法でインデックス ページに sdk を含めることです。

@blesh の同じソリューションまたは @elviejo の拡張バージョンを実装したため、コントローラーが呼び出されたときに呼び出される関数がある場合、どちらにも問題があり、FB初期化されていない可能性が非常に高く、これによりからの関数の呼び出し中に呼び出しが失敗しましたundefined:)

これが他の人がこれで頭痛を避けるのに役立つことを願っています.

于 2013-05-06T13:57:24.583 に答える
0

私はしばらくこれに困惑していましたが、 $watch で解決しました

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

于 2016-10-07T13:32:14.650 に答える