কৌণিক জেএস: এনজি-বাইন্ড কেন কৌণিক} {} than এর চেয়ে ভাল?

Question

আমি একটি কৌনিক উপস্থাপনা ছিল এবং উল্লিখিত সভার একজন ব্যক্তি বাঁধাইয়ের ng-bindচেয়ে ভাল {{}}।

একটি কারণ, ng-bindপরিবর্তনশীলটিকে ওয়াচ তালিকায় রাখুন এবং কেবলমাত্র যখন কোনও মডেল পরিবর্তন হয় যখন ডেটা দেখার জন্য ধাক্কা পান, অন্যদিকে, {{}}প্রতিবার অভিব্যক্তিটি বিভক্ত হবে (আমার ধারণা এটি কৌণিক চক্র) এবং চাপটি চাপবে মান, এমনকি যদি মান পরিবর্তন হয় বা না হয়।

এছাড়াও বলা হয়ে থাকে যে, আপনার যদি পর্দায় খুব বেশি ডেটা না থাকে তবে আপনি ব্যবহার করতে পারেন {{}}এবং পারফরম্যান্সের সমস্যাটি দৃশ্যমান হবে না। কেউ কি আমার জন্য এই বিষয়ে কিছু আলোকপাত করতে পারে?

Comments

" অ্যাংুলার এটি সঙ্কলনের আগে কোনও টেমপ্লেটটি কাঁচা অবস্থায় ব্রাউজারের দ্বারা ক্ষণে ক্ষণে প্রদর্শিত হয় তার ngBindপরিবর্তে ব্যবহার করা ভাল {{ expression }}Since যেহেতু ngBindএকটি উপাদান বৈশিষ্ট্য তাই পৃষ্ঠাটি লোড হওয়ার সময় এটি বাইন্ডিংগুলি ব্যবহারকারীর কাছে অদৃশ্য করে তোলে।" - তবে পারফরম্যান্স সম্পর্কে কিছুই উল্লেখ করা হয়নি।

— ব্লেজমোনজার

আপনি কি দয়া করে পরীক্ষা করতে পারেন, যদি আমার উত্তরটি আরও ভাল হয়

— কনস্ট্যান্টিন ক্রাস

আমার মতে practical {} practical ব্যবহারিক নয়, ডেটা সম্পূর্ণ লোড হওয়ার আগে দর্শক আপনার ট্যাগটি দেখতে পাবে। আমি আশ্চর্য হই যে কৌণিক দল কখনই এই সমস্যাটি সমাধান করতে চলেছে।

— জেরি লিয়াং

@ ব্লাজমোনজার: টেমপ্লেটগুলি মুহুর্তে প্রদর্শিত হতে না পারে আপনি কেবল এনজি-ক্লোকার অ্যাট্রিবিউটকে অন্তর্ভুক্ত করতে পারবেন না?

— সুপারশনি

Answer 1

আপনি যদি ব্যবহার না করে থাকেন তবে ng-bindপরিবর্তে এর মতো কিছু:

<div>
  Hello, {{user.name}}
</div>

সমাধানের আগে আপনি Hello, {{user.name}}এক সেকেন্ডের আসলটি দেখতে পাবেন user.name(ডেটা লোড হওয়ার আগে)

আপনি এই মত কিছু করতে পারে

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

যদি এটি আপনার জন্য একটি সমস্যা

আরেকটি সমাধান ব্যবহার করা হয় ng-cloak।

Comments

আপনি যা বলছেন তার উপর ভিত্তি করে, আমরা যদি {{}} ব্যবহার করি তবে কোনও পারফরম্যান্স হিট হবে না? আমাকে বলা হয়েছিল, আপনি যদি প্রতিবার {{}} ব্যবহার করেন তবে এটি জড় হয়ে যাবে এবং মডেলটি পরিবর্তিত না হলেও ফলাফল তৈরি করবে।

— নাইয়ার

এবং আমি স্প্যান ট্যাগের মধ্যে ব্যবহারকারীর নামটি মোড়তে না চাইলে এনজি-বাইন্ড কীভাবে ব্যবহার করব? আমি যদি কোঁকড়া বন্ধনী ব্যবহার করি তবে আমি এইচটিএমএল ট্যাগ ছাড়াই পরিষ্কার নামটি পেয়ে যাব

— ভিক্টর

@ কেভিন ম্যারেডের সাথে এটি দেখা যায় যখন এইচটিএমএল লোড হয় তবে কৌণিকটি (এখনও) থাকে নি) মনে রাখবেন এটি ক্লায়েন্ট-সাইড টেম্প্লেট করছে যার বিষয়ে আমরা কথা বলছি। অ্যাপ্লিকেশন লোড করা সমস্ত ব্রাউজারে করতে হবে। সাধারণত কৌণিক লোড এটি লক্ষণীয় না হওয়ার জন্য দ্রুত পর্যাপ্ত লোড হয় তবে কিছু ক্ষেত্রে এটি একটি সমস্যা হয়ে দাঁড়ায়। সুতরাং, ng-cloakএই সমস্যাটি সংশোধন করার জন্য আবিষ্কার করা হয়েছিল।

— হলোগ্রাফিক-নীতি

আমার জন্য, এটি প্রশ্নের উত্তর নয়, এনজিবিন্ড কেন ভাল। Just {ot} টীকা পরিবর্তে এনজিবিন্ড কীভাবে ব্যবহার করা যায় এবং এনজি ক্লোকের একটি রেফারেন্স।

— কনস্ট্যান্টিন ক্রাস

@ ভিক্টর এছাড়াও রয়েছে ng-bind-templateযেখানে আপনি উভয় পদ্ধতির একত্রিত করতে পারেন: ng-bind-template="Hello, {{user.name}}"এখানে বাঁধাই এখনও কর্মক্ষমতা বৃদ্ধির প্রস্তাব দেয় এবং আরও কোনও বাসা

— বাঁধতে

Answer 2

দৃশ্যমানতা:

আপনার কৌণিকগুলি বুটস্ট্র্যাপিং করার সময়, ব্যবহারকারী এইচটিএমএলে আপনার স্থাপন করা বন্ধনীগুলি দেখতে পাবেন। এটি দিয়ে পরিচালনা করা যায় ng-cloak। তবে আমার জন্য এটি একটি কার্যনির্বাহী, যা আমি ব্যবহার করার দরকার নেই ng-bind।

---

কর্মক্ষমতা:

{{}}হয় অনেক ধীর ।

এটি ng-bindএকটি নির্দেশিকা এবং উত্তীর্ণ ভেরিয়েবলের উপর নজর রাখবে। সুতরাং ng-bindকেবলমাত্র তখনই প্রযোজ্য হবে যখন উত্তীর্ণিত মানটি পরিবর্তিত হয় ।

অন্যদিকে বন্ধনী হবে মলিন চেক করা এবং রিফ্রেশ মধ্যে যে $digest , এমনকি যদি এটা প্রয়োজনীয় নয় ।

---

আমি বর্তমানে একটি বড় একক পৃষ্ঠার অ্যাপ তৈরি করছি (প্রতি ভিউতে 500 ডলার বাইন্ডিং)। Strict {} from থেকে কঠোরভাবে পরিবর্তন করা ng-bindআমাদের প্রতিটি ক্ষেত্রে প্রায় 20% বাঁচিয়েছিল scope.$digest।

---

পরামর্শ :

আপনি যদি কৌণিক-অনুবাদ হিসাবে কোনও অনুবাদ মডিউল ব্যবহার করেন তবে বন্ধনী টীকা দেওয়ার আগে সর্বদা নির্দেশ পছন্দ করুন ।

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

আপনার যদি একটি ফিল্টার ফাংশন প্রয়োজন হয় তবে আরও ভালভাবে কোনও নির্দেশিকার জন্য যান যা আসলে আপনার কাস্টম ফিল্টারটি ব্যবহার করে। $ ফিল্টার পরিষেবার জন্য ডকুমেন্টেশন

---

আপডেট 28.11.2014 (তবে সম্ভবত বিষয় বন্ধ):

কৌণিক 1.3x মধ্যে bindonceকার্যকারিতা চালু হয়েছিল। অতএব আপনি একবারে একটি অভিব্যক্তি / বৈশিষ্ট্যের মান আবদ্ধ করতে পারেন (যখন আবদ্ধ হবে! = 'অপরিবর্তিত')।

আপনি যখন আপনার বাঁধাইয়ের পরিবর্তনের প্রত্যাশা করবেন না তখন এটি কার্যকর।

ব্যবহার: ::আপনার বাধ্যবাধকতার আগে রাখুন :

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

উদাহরণ:

ng-repeatসারি প্রতি একাধিক বাইন্ডিং সহ টেবিলের কিছু তথ্য আউটপুট করতে। অনুবাদ-বাইন্ডিং, ফিল্টার আউটপুট, যা প্রতিটি স্কোপ ডাইজেস্টে কার্যকর হয়।

Comments

এটি আরও উত্তম উত্তর

— নিমচিম্পস্কি

উত্স থেকে আমি যা বলতে পারি (2014-11-24 হিসাবে), কোঁকড়ানো প্রবৃদ্ধি ঠিক একটি নির্দেশকের মতো পরিচালনা করা হয় (এনজি / সংকলন.জেএসে অ্যাডটেক্সট্যান্টরপোলেটডাইরেক্টিভ () দেখুন)। এটি $ ঘড়িও ব্যবহার করে যাতে পাঠ্যটি পরিবর্তন না হলে DOM স্পর্শ না করে, এটি আপনার দাবি অনুসারে হজম করে every হজম করে না। প্রতি $ হজমে কী করা হয় তা হ'ল আন্তঃবিবাহিত ফলাফলের স্ট্রিং গণনা করা হয়। এটি পরিবর্তন না হলে এটি কেবল পাঠ্য নোডকে বরাদ্দ করা হয়নি।

— ম্যাটি ভির্ককুনেন

আমি অভ্যন্তরীণ মূল্যায়নের জন্য একটি পারফরম্যান্স পরীক্ষা লিখেছি। এটি একটি এনজি পুনরাবৃত্তিতে 2000 এন্ট্রি করেছে এবং বস্তুটিতে 2 টি বৈশিষ্ট্য প্রদর্শন করেছে, তাই 2000x2 বাইন্ডিংস। বাইন্ডিংগুলির মধ্যে পৃথক পৃথক: প্রথম বাইন্ডিংটি কেবল একটি স্প্যানের মধ্যে আবদ্ধ হয়। সেকেন্ডে এটিতে একটি বাধ্যতামূলক এবং কিছু সরল এইচটিএমএল ছিল। ফলাফল: এনজি-বাইন্ড প্রতি স্কোপ প্রয়োগের জন্য প্রায় 20% দ্রুত ছিল। কোডটি যাচাই না করে দেখে মনে হয়, এইচটিএমএল উপাদানটিতে কোঁকড়ানো অভিব্যক্তিযুক্ত অতিরিক্ত সরল এইচটিএমএল আরও বেশি সময় নেয়।

— কনস্ট্যান্টিন ক্রাস

এখানে পরীক্ষাগুলি অনুসারে কেবল তা উল্লেখ করতে চাই: jsperf.com/angular-bind-vs- ব্র্যাকেটগুলি মনে হচ্ছে বন্ধনী বাঁধার চেয়ে দ্রুত FA (দ্রষ্টব্য: বারগুলি প্রতি সেকেন্ডে অপ্স হয়, সুতরাং আরও ভাল হয়)। এবং পূর্ববর্তী মন্তব্যগুলি ইঙ্গিত হিসাবে, তাদের দেখার পদ্ধতিগুলি শেষ পর্যন্ত অভিন্ন।

— ওয়ারেন

যেহেতু আপনি কোনও উত্স সরবরাহ করছেন না, আমি আপনাকে একটিটি দিচ্ছি : ng-perf.com/2014/10/30/… "এনজি- বাইন্ডটি দ্রুততর কারণ এটি সহজ inter মান এবং আরও অনেক কিছু that এটি এটিকে কিছুটা ধীর করে তোলে ""

— কনস্ট্যান্টিন ক্রাস

Answer 3

ng-bind বেশী ভালো {{...}}

উদাহরণস্বরূপ, আপনি এটি করতে পারেন:

<div>
  Hello, {{variable}}
</div>

এর অর্থ এটি Hello, {{variable}}দ্বারা আবদ্ধ পুরো পাঠ্যটি <div>অনুলিপি করে মেমরিতে সংরক্ষণ করা হবে।

পরিবর্তে আপনি যদি এই জাতীয় কিছু করেন:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

কেবলমাত্র মানটির মান মেমোরিতে সংরক্ষণ করা হবে এবং কৌণিক একটি প্রহরীকে (নিরীক্ষণের অভিব্যক্তি) নিবন্ধন করবে যা কেবলমাত্র ভেরিয়েবল নিয়ে গঠিত।

Comments

অন্যদিকে, আপনার ডিওএম আরও গভীর। আপনি কী করছেন তার উপর নির্ভর করে বড় দস্তাবেজগুলিতে এটি রেন্ডারিংয়ের কার্যকারিতাকে প্রভাবিত করতে পারে।

— স্টেপব্যান্ড

হ্যাঁ, আমি মনে করি @ স্টিফব্যান্ডটি একইভাবে করে। যদি আপনি কেবল নাম এবং পদবি প্রদর্শন করতে চান, উদাহরণস্বরূপ। কেন শুধু বিরক্তি না? এটি একইভাবে সঞ্চালন করবে কারণ এটি 1 ডাইজেস্টে একই ঘড়ি চালাবে। পছন্দ: <ডিআইভি> {{প্রথম নাম}} {{শেষ নাম}} </div> == <div> <স্প্যান্ট এনজি-বাইন্ড = "প্রথম নাম"> </span> <স্প্যান এনজি-বাইন্ড = "লাস্টনাম"> </ স্প্যান> </div> .. এবং প্রথমটি আরও ভাল দেখাচ্ছে। আমি মনে করি এটি আপনি যা চান তার উপর অনেক নির্ভর করে তবে শেষ পর্যন্ত তাদের উভয়ই সুবিধা এবং অসুবিধা রয়েছে।

— pgarciacamou

<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>{{}} এর বিকল্প এবং এনজি-

— বাইন্ডের

এটি আপেলগুলিতে আপেল নয় - আপনি একটিতে স্প্যান উপাদান চালু করছেন, অন্যটিতে নয়। এর সাথে উদাহরণটি ng-bindআরও তুলনাযোগ্য হবে <div>Hello, <span>{{variable}}</span></div>।

— আইকনোক্লাস্ট

Answer 4

মূলত ডাবল-কোঁকড়া বাক্য গঠন আরও প্রাকৃতিকভাবে পঠনযোগ্য এবং কম টাইপিংয়ের প্রয়োজন।

উভয় ক্ষেত্রেই একই আউটপুট উত্পাদিত হয় তবে .. আপনি যদি {{}}সেখানে যেতে চান {{}}তবে আপনার টেম্পলেটটি কৌণিক দ্বারা রেন্ডার করার আগে ব্যবহারকারী কিছু মিলিসেকেন্ডের জন্য দেখতে পাবে chance আপনি যদি কোন খেয়াল করেন {{}}তবে ব্যবহার করা ভাল ng-bind।

এছাড়াও খুব গুরুত্বপূর্ণ এটি হ'ল কেবলমাত্র আপনার কৌণিক অ্যাপ্লিকেশনের সূচক html এ আপনি আন-রেন্ডার করতে পারেন {{}}। আপনি যদি নির্দেশাবলী ব্যবহার করেন তবে টেমপ্লেটগুলি, এটি দেখার কোনও সুযোগ নেই কারণ কৌনিক প্রথমে টেম্পলেটটি রেন্ডার করে এবং পরে এটি ডিওএম এ যুক্ত করে।

Comments

আকর্ষণীয় যথেষ্ট, এটি এক নয়। আমি এনজি-বাইন্ড = "আনআরেভিয়াফ্যাক্টরি" বনাম {{anArrayViaFactory} no এ কোনও আউটপুট পাই না get জেকিল প্রোটাইপটিতে জসন প্রতিক্রিয়া আউটপুট দেওয়ার চেষ্টা করার সময় আমি এই সমস্যাটি দেখতে পেয়েছি তবে অনুরূপ টেম্প্লেটিং-এর সাথে দ্বন্দ্বের কারণে আমাকে এনজি-বাইন্ড ব্যবহার করতে বাধ্য করা হয়েছিল। একটি এনজি-রিপিট ব্লকের অভ্যন্তরে একটি এনজি-বাইন্ড (আনআরআইভিএফ্যাক্টরিতে আইটেম) আউটপুট মানগুলি দেবে।

— এডিওয়াসে

Answer 5

{{...}}দ্বিমুখী ডেটা বাঁধাইয়ের অর্থ। তবে, এনজি-বাইন্ড আসলে ওয়ান-ওয়ে ডেটা বাঁধার জন্য বোঝানো হয়।

এনজি-বাইন্ড ব্যবহার করা আপনার পৃষ্ঠায় নজরদারিদের সংখ্যা হ্রাস করবে। অতএব এনজি-বাইন্ডের চেয়ে দ্রুততর হবে {{...}}। সুতরাং, আপনি যদি কেবল কোনও মান এবং এর আপডেটগুলি প্রদর্শন করতে চান এবং ইউআই থেকে পরিবর্তনটি আবার নিয়ামকের কাছে প্রতিফলিত করতে না চান তবে এনজি-বাইন্ডে যান । এটি পৃষ্ঠার কার্যকারিতা বৃদ্ধি করবে এবং পৃষ্ঠা লোডের সময় হ্রাস করবে।

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Answer 6

এটি কারণ {{}}কৌণিক সংকলকটি পাঠ্য নোড এবং এর পিতামাতা উভয়কেই বিবেচনা করে কারণ 2 টি {{}}নোড মার্জ হওয়ার সম্ভাবনা রয়েছে । সুতরাং লোড সময় যুক্ত করে যে অতিরিক্ত লিঙ্কার আছে to অবশ্যই এইরকম কয়েকটি ঘটনার জন্য পার্থক্যটি অবিরাম is

Answer 7

এনজি-বাইন্ড কেন আরও ভাল কারণ,

যখন আপনার পৃষ্ঠাটি লোড করা হয়নি বা যখন আপনার ইন্টারনেট ধীর গতির হয় বা যখন আপনার ওয়েবসাইটটি অর্ধেক লোড হয়, তখন আপনি এই ধরণের সমস্যাগুলি দেখতে পান (পঠন চিহ্ন সহ স্ক্রিন শটটি পরীক্ষা করুন) যা সম্পূর্ণরূপে অদ্ভুত। এড়াতে আমাদের এনজি-বাইন্ড ব্যবহার করা উচিত

Answer 8

এনজি- বাইন্ডেরও সমস্যা রয়েছে you আপনি যখন কৌনিক ফিল্টার , সীমা বা অন্য কিছু ব্যবহার করার চেষ্টা করেন , আপনি এনজি-বাইন্ড ব্যবহার করলে আপনার সমস্যা হতে পারে । কিন্তু অন্যান্য ক্ষেত্রে, NG-বেঁধে মধ্যে উত্তম ইউএক্স side.when ব্যবহারকারী খোলে একটি পৃষ্ঠায়, তিনি / সে (10ms-100 মিঃসে) মুদ্রণ প্রতীক (যে দেখতে হবে {{...}} ), যে NG-বেঁধে কেন উত্তম ।

Answer 9

{{} In তে কিছু ঝাঁকুনির সমস্যা রয়েছে যেমন আপনি যখন পৃষ্ঠাটি রিফ্রেশ করেন তখন সময়ের স্বল্প সংক্ষেপে স্প্রে দেখা যায় o সুতরাং আমাদের ডেটার চিত্রের জন্য এক্সপ্রেশনের পরিবর্তে এনজি-বাইন্ড ব্যবহার করা উচিত।

Answer 10

ng-bindএটি আরও সুরক্ষিত কারণ এটি htmlএকটি স্ট্রিং হিসাবে প্রতিনিধিত্ব করে ।

সুতরাং উদাহরণস্বরূপ, '<script on*=maliciousCode()></script>'একটি স্ট্রিং হিসাবে প্রদর্শিত হবে এবং কার্যকর করা হবে না।

Answer 11

কৌণিক ডকের মতে:
যেহেতু এনজিবাইন্ড একটি উপাদান বৈশিষ্ট্য, পৃষ্ঠাটি লোড করার সময় এটি বাইন্ডিংগুলি ব্যবহারকারীর কাছে অদৃশ্য করে তোলে ... এটিই মূল পার্থক্য ...

মূলত যতক্ষণ না প্রতিটি ডোম উপাদান লোড হয় না, ততক্ষণ আমরা সেগুলি দেখতে পাই না এবং যেহেতু এনজিবাইন্ড উপাদানটির বৈশিষ্ট্যযুক্ত, এটি ডোমগুলি খেলার আগ পর্যন্ত অপেক্ষা করে ... আরও তথ্য নীচে

ngBind
- মডিউল ng মধ্যে ডিরেক্টিভের ngBind অ্যাট্রিবিউট বলে AngularJS একটি প্রদত্ত মত প্রকাশের মান নির্দিষ্ট এইচটিএমএল উপাদান পাঠ্য সামগ্রীকে প্রতিস্থাপন এবং পাঠ্য বিষয়বস্তু আপডেট করার জন্য যখন যে অভিব্যক্তি পরিবর্তনের মান।

সাধারণত, আপনি সরাসরি এনজিবিন্ড ব্যবহার করেন না , তবে পরিবর্তে আপনি ডাবল কোঁকড়ানো মার্কআপ ব্যবহার করেন যেমন like {এক্সপ্রেশন} similar যা অনুরূপ তবে কম ভার্বোস।

অ্যাঙ্গুলারজেএস সংকলনের আগে যদি কোনও টেমপ্লেটটি কাঁচা অবস্থায় ব্রাউজারের দ্বারা ক্ষণে ক্ষণে প্রদর্শিত হয় তবে g {এক্সপ্রেশন of of এর পরিবর্তে এনজিবিন্ড ব্যবহার করা ভাল। যেহেতু এনজিবাইন্ড একটি উপাদান বৈশিষ্ট্য তাই পৃষ্ঠাটি লোড করার সময় এটি বাইন্ডিংগুলি ব্যবহারকারীর কাছে অদৃশ্য করে তোলে।

একটি বিকল্প সমাধান এই সমস্যার ব্যবহার হবে ngCloak নির্দেশ। এখানে যান

এনজিবিন্ড সম্পর্কে আরও তথ্যের জন্য এই পৃষ্ঠাটি দেখুন: https://docs.angularjs.org/api/ng/directive/ngBind

আপনি এনট্রিবিউট, এনজি-বাইন্ড হিসাবে এর মতো কিছু করতে পারেন :

<div ng-bind="my.name"></div>

বা নীচের মতো দ্রবীভূত করুন:

<div>{{my.name}}</div>

বা AngularJs এ এনজি-ক্লোকার বৈশিষ্ট্য সহ এইভাবে:

<div id="my-name" ng-cloak>{{my.name}}</div>

এনজি-ক্লোম ডোমে ফ্ল্যাশিং এড়ানো এবং সমস্ত প্রস্তুত হওয়া পর্যন্ত অপেক্ষা করুন! এটি এনজি-বাইন্ড বৈশিষ্ট্যের সমান ...

Answer 12

আপনি এই সাইটের উল্লেখ করতে পারেন এটি আপনাকে একটি ব্যাখ্যা দেবে যা আমি জানি know one}} এটি এনজি-বাইন্ডের চেয়ে ধীর।

http://corpus.hubwiz.com/2/angularjs/16125872.html এই সাইটটি উল্লেখ করুন।