এনজি-সিআরসি বনাম এসসিআর এর ব্যবহার

Question 1

এই টিউটোরিয়ালটি এরngSrc পরিবর্তে নির্দেশের ব্যবহার প্রদর্শন করে src:

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

তারা জিজ্ঞাসা:

Ng-src নির্দেশকে একটি সরল পুরানো src বৈশিষ্ট্যের সাথে প্রতিস্থাপন করুন।
ফায়ারব্যাগ, বা ক্রোমের ওয়েব ইন্সপেক্টর হিসাবে সরঞ্জাম ব্যবহার করা বা ওয়েব সার্ভার অ্যাক্সেস লগগুলি পরিদর্শন করে নিশ্চিত করুন যে অ্যাপ্লিকেশনটি সত্যই /app/ %7B%7B iPhone.imageUrl%7D%7D (বা / অ্যাপ্লিকেশন / {{ফোনে একটি বাহ্যিক অনুরোধ করছে .imageUll}} )।

আমি এটি করেছি এবং এটি আমাকে সঠিক ফলাফল দিয়েছে:

<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, এখন এসসিআর অ্যাট্রিবিউট পরিবর্তন হয় http://www.gravatar.com/avatar/logo.pngএবং চিত্রটি সঠিকভাবে লোড হয়। সমস্যাটি হ'ল এখানে দুটি অনুরোধ চলছে এবং প্রথমটি ব্যর্থ।

এটি সমাধান করার জন্য আমাদের ব্যবহার করা উচিত ng-srcযা একটি কৌণিক নির্দেশিকা এবং কৌণিকটি কৌণিক বুটস্ট্র্যাপিং এবং কন্ট্রোলার সম্পূর্ণরূপে লোড হওয়ার পরেইng-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% বোধ করে কারণ এইচটিএমএল ক্রমান্বয়ে প্রক্রিয়াজাত হয় এবং যখন এই এইচটিএমএল পৃষ্ঠাটি লাইন দ্বারা প্রক্রিয়ায় প্রসেস করা হয়, যখন এই চিত্রটিতে লাইনটি আসে এবং চিত্রটি প্রক্রিয়াকরণ করা হয়, phone.imageUrlতখনও আমাদের এখনও সংজ্ঞায়িত করা হয়নি।

এবং প্রকৃতপক্ষে, কৌণিক জেএস এখনও এইচটিএমএল-এর এই অংশটি প্রক্রিয়া করে নি, এবং এখনও এই স্থানধারীদের সন্ধান করে নি এবং মানগুলির সাথে এই অভিব্যক্তিগুলির বিকল্প তৈরি করে নি। সুতরাং যা ঘটতে চলেছে তা হ'ল ব্রাউজারটি এই লাইনটি পায় এবং এই URL টিতে এই চিত্রটি আনার চেষ্টা করে।

এবং অবশ্যই এটি একটি বোগাস ইউআরএল, যদি এখনও এর মধ্যে সেইগুলি গোঁফ এবং কোঁকড়ানো ধনুর্বন্ধনী থাকে এবং তাই এটি আপনাকে একটি 404 দেয় তবে অবশ্যই একবার কৌণিক এটি যত্ন নেয়, এটি সঠিক URL এর জন্য এই URL টি প্রতিস্থাপন করে এবং তারপরে আমরা এখনও চিত্রটি দেখতে পাই, তবে এখনও 404 ত্রুটি বার্তাটি আমাদের কনসোলে রয়ে গেছে।

সুতরাং, আমরা কীভাবে এটি যত্ন নিতে পারি? ঠিক আছে, আমরা নিয়মিত এইচটিএমএল কৌশল ব্যবহার করে এটি যত্ন নিতে পারি না। তবে, আমরা কৌণিক ব্যবহার করে এটি যত্ন নিতে পারি। আমাদের কোনওভাবে ব্রাউজারকে বলতে হবে যে এই URL টি আনার চেষ্টা করবেন না তবে একই সময়ে কেবল অ্যাংগুলার এই স্থানধারীদের ব্যাখ্যার জন্য প্রস্তুত হলে তা এনে আনুন।

ভাল, এটি করার একটি উপায় হ'ল মানক এইচটিএমএলটির পরিবর্তে এখানে একটি কৌণিক বৈশিষ্ট্য স্থাপন করা। এবং কৌণিক গুণাবলী ঠিক ng-src। সুতরাং যদি আমরা এখনই বলি, ফিরে যাও, আপনি দেখতে পাচ্ছেন যে কোনও ত্রুটি নেই কারণ চিত্রটি কেবল তখনই এঙ্গুলার এই এইচটিএমএল ধরে ফেলেছে এবং সমস্ত এক্সপ্রেশনকে তাদের মানগুলিতে অনুবাদ করেছে।