angularjs में प्रारंभिक डेटा लोडिंग

Question

जब कोई वेब ऐप बनाते हैं जहां प्रत्येक पृष्ठ कई डेटा स्रोतों पर निर्भर करता है, तो डेटा के शुरुआती बिट्स लाने का सबसे अच्छा तरीका क्या है? जब मैं ट्विटर पर देखता हूं, तो मुझे लगता है कि पेज लोड पर दिखाई देने वाली ट्वीट्स HTML स्रोत में हैं, और जब आप स्क्रॉल करते हैं तो AJAX का उपयोग करने में अधिक ट्वीट लोड हो जाते हैं। लेकिन मॉडल में डालने के लिए पहले से ही डीओएम में डेटा प्राप्त करने का कोई सुविधाजनक तरीका नहीं है।

पृष्ठ लोड सीम बेवकूफ के तुरंत बाद प्रारंभिक डेटा के लिए अनुरोध करना, क्योंकि आपने सीएसएस, एचटीएमएल और जावास्क्रिप्ट लाने के लिए सर्वर पर बहुत सारे राउंडट्रिप्स बनाए हैं। क्या पृष्ठ पर किसी जावास्क्रिप्ट टैग में डेटा डालने का बुरा विचार होगा, इसलिए जावास्क्रिप्ट फ़ंक्शन प्रारंभिक डेटा जोड़ सकता है?

मैं विशेष रूप से कोणीय के लिए पूछ रहा हूं, लेकिन यदि कोई सामान्य तकनीक है, तो कृपया मुझे भी बताएं।

Answer 1

आप पेज लोड पर वैसे भी अपने नियंत्रक का संदर्भ लेंगे, इसलिए आपको इनलाइन स्क्रिप्ट टैग नहीं रखना होगा।

आप एक डिफ़ॉल्ट मॉडल सेट कर सकते हैं या तो आप आरंभिक लोड पर विशेषता ng-bind उपयोग करें, या वापस डेटा पास करने के एक समारोह कहते हैं।

कोणीय में लोड पर डेटा लाने के लिए यह काफी विशिष्ट है।

Answer 2

this question पर जवाब के अनुसार, पृष्ठ पर एक स्क्रिप्ट टैग में एक JSON ऑब्जेक्ट जाने का रास्ता हो रहा है। अगर कोई बेहतर विचार के साथ आता है, तो मैं आपका जवाब स्वीकार करूंगा।

Answer 3

यह Zend_Http_Client तरह बैकएंड में एक HTTP क्लाइंट के साथ जोड़ी AngularJS के लिए सबसे अच्छा है या सर्वर डेटा लाने जाने के लिए Guzzle चाहेंगे। फिर, जेसन को रेंडर करने पर जावास्क्रिप्ट के रूप में डेटा पास करें।

मुझे पता है Angularjs एकल पृष्ठ अनुप्रयोगों के लिए डिज़ाइन किया गया है। यही कारण है कि यह समझ में आता है कि यह आलसी डेटा लोड करता है।

हालांकि, अगर हम उस दृष्टिकोण पर जाने जा रहे हैं जहां हम अभी भी पृष्ठ को गतिशील रूप से प्रस्तुत करते हैं और फिर भी सामग्री को Angularjs में व्यवस्थित करने का कार्य सौंपते हैं। AngularJS विचारों को शामिल करने के लिए कौन सा ढांचा उपयुक्त होगा। अभी, कोणीय-बीज की तरह परियोजना टेम्पलेट्स सभी स्थैतिक हैं ..

है, विचार सर्वर एम्बेडेड json वस्तु के साथ एक पृष्ठ कार्य करता है। फिर कोणीय, ग्राहक पक्ष में ले जाता है, जहां आवश्यक हो वहां अतिरिक्त सामग्री प्राप्त करना।

तो संपर्क के केवल एक पृष्ठ (उदा। Index.html) के बजाय, हमारे पास profiles.html, products.html जैसे कई पृष्ठ होंगे। बैकएंड की सहायता विशेष रूप से उपयोगी होगी क्योंकि आपके पास एक ऐसा अनुभाग है जो पृष्ठ के ऊपरी दाएं किनारे पर अक्सर आपके उपयोगकर्ता नाम की तरह नहीं बदलता है। मेरे लिए, मुझे लगता है कि यह पृष्ठ आपके पृष्ठ में प्रीलोड किए जाने के लिए बेहतर है और पेज लोड होने के बाद सर्वर से पूछना नहीं है।

जैसा कि बड़े पैमाने पर देखा गया है, ऐसा लगता है कि फेसबुक, जीमेल, ट्विटर जैसी साइटें ऐसा करती हैं। उनमें पृष्ठ लोड पर एम्बेडेड डेटा होता है। फिर, बाद में सेवाओं के माध्यम से अतिरिक्त सामग्री लोड करें।

विचार नीचे की तरह कुछ है:

Webservice <---------- Backend------------> Frontend 
    <------------------------------------------ 

बैकएंड प्रतिनिधियों वेब सेवा क्वेरी करने ग्राहक के लिए प्रदान की गई पेज में प्रारंभिक डेटा प्रदान करने का कार्य। फिर ग्राहक, अतिरिक्त सामग्री लाने के लिए सीधे webservice से कनेक्ट कर सकते हैं।

उपर्युक्त सेटअप का उपयोग करना .. आदर्श विकास ढेर क्या है?

Answer 4

ऐसा करने का एक तरीका यह है कि बाध्यकारी होने से पहले प्रारंभिकता को संभालने वाला एक निर्देश तैयार करना है। उदाहरण के लिए:

app.directive('initdata', function() { 
    return { 
     restrict: 'A', 
     link: function($scope, element, attrs) { 
      if (attrs.ngBind !== undefined) 
      { 
       $scope[attrs.ngBind] = attrs.initdata ? attrs.initdata : element.text(); 
      } 
     } 
    }; 
}); 

यह निर्देश या तो बाध्य $ गुंजाइश संपत्ति के लिए प्रारंभिक मूल्य, या तत्व के रूप में textvalue विशेषता मान लेता है।

उदाहरण उपयोग: पर http://jsfiddle.net/6PNG8/

इस पर विस्तृत करने के कई तरीका है

<div initdata="Foo Bar" ng-bind="test1"></div> 
<div initdata ng-bind="test2">Lorem Ipsem</div> 

कार्य उदाहरण; उदाहरण के लिए initdata को जेसन के रूप में पार्स करना और इसे दायरे से विलय करना, और इसे $root.someprop जैसे जटिल जटिल बाइंडों के लिए काम करना। लेकिन आधार उल्लेखनीय रूप से सरल है।