2

Angular について聞いてドキュメントを読むと、Angular に夢中になりました。そこで、Angularjs の 11 ステップのチュートリアルについて読み、Facebook SDK を使用してアプリを構築しようとしています。私の主題はそれをすべて述べていますが、さらに説明します。

以下のコードは、htmlビュー/部分ビューにあります。そのコードのチャンクをサービスまたはファクトリ モジュールに移動したいと考えています。

  // Init the SDK upon load
   window.fbAsyncInit = function() {
     FB.init({
       appId      : 'APP_ID', // App ID
       channelUrl : 'channel.html', // Path to your Channel File
       status     : true, // check login status
       cookie     : true, // enable cookies to allow the server to access the session
       xfbml      : false  // parse XFBML
      });

     angular.bootstrap(document, ['myApp']);
   };

   // 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/en_US/all.js";
      ref.parentNode.insertBefore(js, ref);
    }(document));

私の現在のコードは機能していますが、可能であればビューに html コードのみを含めたいので、少しイライラしています。また、ベストプラクティスだと思います。:)。前もって感謝します。

4

2 に答える 2

2

SDK がロードされたときに解決される promise を返すファクトリを構築します。何かのようなもの：

(function (window) {
    "use strict";

    var angular = window.angular;
    angular.module('facebookService', []).factory('FacebookService', [
    '$q','$rootScope', function ($q, $rootScope) {
        function init() {
            $rootScope.$apply(function () {
                defer.resolve();
            });
         }
         var defer = $q.defer();
         defer.promise.then(function () {
             // FB.Init...
            window.FB = 'Facebook SDK loaded'; // Remove this line
         });

         window.fbAsyncInit = angular.bind(this, init);

         return defer;
    }]);
}(window));

これで、次を使用して pomise にサービスと追加メソッドを挿入できます。FacebookService.promise.then(...)

ここに例がありますhttp://jsfiddle.net/fredrik/f4tkA/

于 2013-08-07T08:06:10.897 に答える
-1

適切な構造化の実践については、Angular シード プロジェクトを参照する必要があります。

https://github.com/angular/angular-seed

サービスとして作成することも (上記)、アプリが一度読み込まれたときに実行することもできます。コードを再利用する必要がある場合は、サービスまたはディレクティブとしてビルドします。

angular.module('myApp',[])
       .run([ '$q','$rootScope', function ($q, $rootScope){
        }]);}

ここでフィドルを表示できますが、Facebook を機能させるには API キーを入力する必要があります。

于 2013-08-07T13:50:41.970 に答える