AngularJS नियंत्रकों को फेसबुक जावास्क्रिप्ट एसडीके को सही तरीके से इंजेक्ट कैसे करें?

Question

मैं AnuglarJS के लिए नया हूं और इसके साथ पहले से ही एक छोटा सा वेब ऐप बनाया है, मैं इसके साथ फेसबुक जावास्क्रिप्ट एसडीके का उपयोग करना चाहता हूं, लेकिन सर्वोत्तम प्रथाओं (नियंत्रकों को इंजेक्शन करने पर निर्भरता, ऐप संरचना और टेस्टेबिलिटी को बनाए रखने के लिए) का उपयोग करना चाहता हूं।

मुझे यह https://groups.google.com/forum/#!msg/angular/bAVx58yJyLE/Kz56Rw-cQREJ मिला लेकिन इस ढांचे के लिए नए व्यक्ति के लिए यह बहुत भ्रमित है (मॉड्यूल, सेवाओं और कारखानों को अच्छी तरह से आईएमएचओ समझाया नहीं गया है)।

तो, AngularJS ऐप के अंदर फेसबुक एसडीके का उपयोग करने का सही तरीका क्या है?

Answer 1

मैं वास्तव में पड़ा है यह करने के लिए ... मैं मेरे साथ कोड नहीं है, और यह शायद किसी भी तरह मालिकाना है ... लेकिन यह इस तरह अनिवार्य रूप से किया गया था:

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

किसी भी देखते हैं, तो उसमें त्रुटियां मुझे बताएं, और मैं अपने पास काम करने वाले कोड को देखूंगा और देख सकता हूं कि मैंने क्या चूक लिया है। लेकिन यह इसके बारे में होना चाहिए।

Answer 2

काम करने का एकमात्र तरीका पुराने तरीके से आपके इंडेक्स पेज में एसडीके समेत है।

क्योंकि मैंने @blesh से एक ही समाधान लागू किया है या @ एल्विजो से विस्तारित संस्करण लागू किया है, तो उनमें से दोनों को एक समस्या है यदि हमारे पास एक ऐसा फ़ंक्शन है जिसे नियंत्रक के रूप में बुलाया जाता है, तो FB प्रारंभ नहीं किया गया है उच्च और यह undefined से फ़ंक्शन को कॉल करते समय कॉल विफल हो जाएगा :)

आशा है कि इससे दूसरों को सिरदर्द से परहेज करने में मदद मिलेगी।

Answer 3

मैंने इस कोणीय-फेसबुक सेवा को लिखा है। सबसे पहले आप इसे अपने ऐप मॉड्यूल कॉन्फ़िगरेशन विधि पर अपने फेसबुक ऐप आईडी और अन्य सेटिंग्स को प्रारंभ करने के लिए इनिट करते हैं।

फिर आप केवल फेसबुक सेवा को नियंत्रकों से कॉल करने का आनंद लेते हैं और सामान्य रूप से फेसबुक विधियों को अतुल्यकालिक कहते हैं।

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

Answer 4

2015 संपादित करें!

यह एक पुराना उत्तर है।

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

ओल्ड उत्तर

: मैं आप कैसे GitHub पर लोकप्रिय कोणीय मॉड्यूल यह कर बाहर की जाँच या बस उन्हें इस्तेमाल का सुझाव देंगे

ऐप की शुरुआत में कॉल के साथ समस्याओं की वजह से मैं निम्नलिखित दृष्टिकोण का उपयोग करता हूं, जो लोड करता है एप्लिकेशन के बाद ही एसडीके लोड किया गया है:

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

मैं थोड़ी देर के लिए इस पर स्टम्प्ड था, मैं इसे एक $ घड़ी के साथ

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

जब अमेरिकन प्लान लोड किया गया है, तो आप साफ कर सकते हैं हल $scope.FBListener();