एनजी- src बनाम src का उपयोग

Question 1

यह ट्यूटोरियलngSrc इसके बजाय निर्देश के उपयोग को प्रदर्शित करता है src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

वे पूछते हैं:

एक पुराने पुराने src विशेषता के साथ ng-src निर्देश बदलें।
फायरबग, या क्रोम के वेब इंस्पेक्टर जैसे उपकरणों का उपयोग करना, या वेबसर्वर एक्सेस लॉग का निरीक्षण करना, पुष्टि करें कि ऐप वास्तव में /app/%7B%7Bphone.imageUrl%7D%7D (या / / {फोन) के लिए एक अत्यधिक अनुरोध कर रहा है। .imageUrl}} ) पर जाएं।

मैंने ऐसा किया और इसने मुझे सही परिणाम दिया:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

क्या कोई कारण है?

Question 2

<img ng-src="{{phone.imageUrl}}">

यह आपको अपेक्षित परिणाम देता है, क्योंकि phone.imageUrlकोणीय लोड होने के बाद इसका मूल्यांकन और उसके मूल्य द्वारा प्रतिस्थापित किया जाता है।

<img src="{{phone.imageUrl}}">

लेकिन इसके साथ, ब्राउज़र नाम की एक छवि को लोड करने का प्रयास करता है {{phone.imageUrl}}, जिसके परिणामस्वरूप असफल अनुरोध होता है। आप इसे अपने ब्राउज़र के कंसोल में देख सकते हैं।

Question 3

कोणीय डॉक्स से

इसे लिखने का छोटा रास्ता:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

इसे लिखने का सही तरीका:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

क्यों? ऐसा इसलिए है क्योंकि पृष्ठ के लोड पर, कोणीय बूटस्ट्रैपिंग और नियंत्रकों के निर्माण से पहले, ब्राउज़र छवि को लोड करने का प्रयास करेगा http://www.gravatar.com/avatar/{{hash}}और यह विफल हो जाएगा। फिर एक बार कोणीय शुरू होने के बाद, यह समझता है कि इसे {{hash}}कहने के साथ बदलना होगा logo.png, अब src विशेषता में परिवर्तन होता है http://www.gravatar.com/avatar/logo.pngऔर सही ढंग से लोड होता है। समस्या यह है कि 2 अनुरोध चल रहे हैं और पहला विफल हो रहा है।

इसे हल करने के लिए हमें ng-srcएक कोणीय निर्देशन का उपयोग करना चाहिए और कोणीय ng-srcको src विशेषता में मूल्य को प्रतिस्थापित करने के बाद ही कोणीय बूटस्ट्रैपिंग और नियंत्रकों को पूरी तरह से लोड किया जाएगा, और उस समय {{hash}}पहले ही सही गुंजाइश मान के साथ बदल दिया गया होगा।

Question 4

src="{{phone.imageUrl}}"अनावश्यक है और ब्राउज़र द्वारा एक अतिरिक्त अनुरोध बनाता है। ब्राउज़र GETउस छवि को लोड करने के लिए कम से कम 2 अनुरोध करेगा :

अभिव्यक्ति का मूल्यांकन करने से पहले {{phone.imageUrl}}
अभिव्यक्ति का मूल्यांकन होने के बाद img/phones/motorola-xoom.0.jpg

ng-srcकोणीय भाव के साथ व्यवहार करते समय आपको हमेशा निर्देश का उपयोग करना चाहिए । <img ng-src="{{phone.imageUrl}}">आपको एक ही अनुरोध का अपेक्षित परिणाम देता है।

एक साइड नोट पर , यही बात लागू होती है, ng-hrefताकि पहले पचने के चक्र में टूट न जाए।

Question 5

वास्तव में यह 100% समझ में आता है क्योंकि HTML क्रमिक रूप से संसाधित हो जाता है और जब इस HTML पृष्ठ को लाइन द्वारा लाइन में संसाधित किया जा रहा है, तब तक यह इस छवि के लिए हो जाता है, रेखा और छवि को संसाधित करता है, हमारे phone.imageUrlअभी तक परिभाषित नहीं है।

और वास्तव में, कोणीय जेएस ने अभी तक HTML के इस भाग को संसाधित नहीं किया है, और अभी तक इन प्लेसहोल्डर्स की तलाश नहीं की है और इन भावों को मूल्यों के साथ प्रतिस्थापित किया है। तो क्या हो रहा है समाप्त होता है कि ब्राउज़र को यह लाइन मिलती है और इस URL पर इस छवि को लाने की कोशिश करता है।

और निश्चित रूप से यह एक फर्जी यूआरएल है, अगर इसमें अभी भी उन मूंछों और घुंघराले ब्रेसिज़ हैं, और इसलिए यह आपको एक 404 देता है, लेकिन एक बार कोणीय इस बात का ध्यान रखता है, यह इस URL को उचित के लिए प्रतिस्थापित करता है, और फिर हम अभी भी छवि देखते हैं, लेकिन फिर भी 404 त्रुटि संदेश हमारे कंसोल में रहता है।

तो, हम इस बात का ध्यान कैसे रख सकते हैं? खैर, हम नियमित HTML ट्रिक्स का उपयोग करके इसका ध्यान नहीं रख सकते हैं। लेकिन, हम एंगुलर के इस्तेमाल से इसकी देखभाल कर सकते हैं। हमें किसी तरह ब्राउज़र को यह बताने की कोशिश करनी चाहिए कि वह इस URL को लाने की कोशिश नहीं कर रहा है, लेकिन साथ ही इसे तभी लाएँ जब Angular इन प्लेसहोल्डर्स की व्याख्या के लिए तैयार हो।

ठीक है, यह करने का एक तरीका मानक HTML एक के बजाय यहाँ पर एक कोणीय विशेषता रखना है। और कोणीय विशेषता बस है ng-src। इसलिए यदि हम कहते हैं कि अब, वापस जाओ, तो आप देखेंगे कि अब कोई त्रुटि नहीं है क्योंकि छवि केवल एक बार प्राप्त हुई है जब कोणीय ने इस HTML की पकड़ हासिल की और सभी भावों को अपने मूल्यों में अनुवादित किया।