অ্যাঙ্গুলারজেএসে ডেটা বাইন্ডিং কীভাবে কাজ করে?

Question

কীভাবে ডেটা বাঁধাই AngularJSকাঠামোয় কাজ করে ?

আমি তাদের সাইটে প্রযুক্তিগত বিবরণ পাইনি । যখন ভিউ থেকে মডেল পর্যন্ত ডেটা প্রচার করা হয় তখন এটি কীভাবে কাজ করে তা কমবেশি স্পষ্ট। তবে অ্যাঙ্গুলারজেএস কীভাবে সেটার এবং গেটারগুলি ছাড়াই মডেলের বৈশিষ্ট্যগুলির পরিবর্তনগুলি ট্র্যাক করে?

আমি দেখেছি যে জাভাস্ক্রিপ্ট প্রহরীরা এই কাজটি করতে পারে। তবে তারা ইন্টারনেট এক্সপ্লোরার 6 এবং ইন্টারনেট এক্সপ্লোরার 7 এ সমর্থিত নয় । সুতরাং AngularJS কীভাবে জানতে পারে যে আমি উদাহরণের জন্য নীচে পরিবর্তন করেছি এবং একটি দৃশ্যে এই পরিবর্তনটি প্রতিবিম্বিত করেছি?

myobject.myproperty="new value";

Comments

সচেতন থাকুন যে কৌণিক 1.0.0rc1 থেকে আপনার মোডারটি তাত্ক্ষণিকভাবে আপডেট করার জন্য আপনাকে এনজি-মডেল-তাত্ক্ষণিক ( ডক্স - এনেক্সট. angularjs.org/api/… ) নির্দিষ্ট করতে হবে। অন্যথায় এটি অস্পষ্ট ইভেন্টে আপডেট করা হবে।

— সোটোমাজোর

মার্সেলো লিঙ্ক দৃশ্যত নষ্ট হয়ে গেছে, তাই এখানে এটা আবার হল: github.com/mhevery/angular.js/blob/master/docs/content/guide/...

— ইতর

ওরিয়ান, সেই লিঙ্কটি খারাপ। আপডেট হয়েছে (আমি ধরে নিই) একই - ডকস.আঙ্গুলারজেএস.আর

— কেভিন মেরিডিথ

যারা এখনও এই প্রশ্নটি পড়ছেন তাদের জন্য দয়া করে নোট করুন যে কৌনিক 1.x থেকে ওয়েব উপাদানগুলির সাথে কাজ করার জন্য এবং নীচের উত্তরে বেশ কয়েকটি সমস্যা সমাধানের জন্য অ্যাঙ্গুলার ১.x থেকে তারা কীভাবে ডেটাবাইন্ডিংয়ের বিষয়ে অগ্রণী হন তা উল্লেখ করুন Ang

— আগস্ট

Answer 1

AngularJS মানটি মনে করে এবং এটি পূর্বের মানের সাথে তুলনা করে। এটি বেসিক নোংরা চেকিং। যদি মানটিতে কোনও পরিবর্তন হয় তবে তা পরিবর্তন ইভেন্টটিকে আগুন ধরিয়ে দেয়।

$apply()আপনি যখন অ-কৌণিক জেএস বিশ্ব থেকে একটি কৌণিক জে জগতে রূপান্তর করতে চলেছেন তখন সেই পদ্ধতিটি কল করে $digest()। একটি ডাইজেস্ট কেবল সাধারণ পুরানো নোংরা-চেকিং। এটি সমস্ত ব্রাউজারে কাজ করে এবং সম্পূর্ণ অনুমানযোগ্য।

বিপরীতে মলিন-পরীক্ষণের (AngularJS) বনাম পরিবর্তন শ্রোতাকে ( KnockoutJS এবং Backbone.js ): মলিন-পরীক্ষণ, সহজ মনে হতে পারে এবং এমনকি অদক্ষ (আমি পরে যে ঠিকানা হবে), এটা দেখা যাচ্ছে যে এটা সব সময় শব্দার্থগতভাবে সঠিক, পরিবর্তিত শ্রোতাদের কাছে প্রচুর অদ্ভুত কোণার কেস রয়েছে এবং এটিকে আরও শব্দার্থকভাবে সঠিক করার জন্য নির্ভরতা ট্র্যাকিংয়ের মতো জিনিস প্রয়োজন। নকআউটজেএস নির্ভরতা ট্র্যাকিং এমন একটি সমস্যার জন্য একটি চতুর বৈশিষ্ট্য যা অ্যাংুলারজেএস নেই।

পরিবর্তন শ্রোতাদের সাথে সমস্যাগুলি:

• সিনট্যাক্সটি নৃশংস, কারণ ব্রাউজারগুলি এটিকে স্থানীয়ভাবে সমর্থন করে না। হ্যাঁ, প্রক্সি রয়েছে তবে সেগুলি সকল ক্ষেত্রেই শব্দার্থগতভাবে সঠিক নয় এবং অবশ্যই পুরানো ব্রাউজারগুলিতে কোনও প্রক্সি নেই। মূল কথাটি হ'ল নোংরা চেকিং আপনাকে পজো করতে দেয় , যেখানে নকআউটজেএস এবং ব্যাকবোন.জেগুলি আপনাকে তাদের শ্রেণি থেকে উত্তরাধিকারী হতে বাধ্য করে এবং অ্যাক্সেসরের মাধ্যমে আপনার ডেটা অ্যাক্সেস করে।
• একাত্মতা পরিবর্তন করুন। মনে করুন আপনার কাছে আইটেমগুলির একটি অ্যারে রয়েছে। বলুন যে আপনি অ্যারেতে আইটেম যুক্ত করতে চান আপনি যেমন যোগ করতে চলেছেন ঠিক ততবার আপনি যুক্ত করার সময় পরিবর্তনের সময়ে ইভেন্ট গুলি চালাচ্ছেন যা ইউআই রেন্ডার করছে। পারফরম্যান্সের জন্য এটি খুব খারাপ। আপনি যা চান তা হ'ল একবারে একবারে ইউআই আপডেট করা। পরিবর্তনের ইভেন্টগুলি খুব সূক্ষ্ম।
• একটি শ্রোতার সাথে সাথেই শ্রোতাদের আগুনের পরিবর্তন করুন, এটি একটি সমস্যা, যেহেতু পরিবর্তন শ্রোতা আরও ডেটা পরিবর্তন করতে পারে, যা আরও পরিবর্তিত ইভেন্টগুলিকে আগুন দেয়। এটি খারাপ কারণ আপনার স্ট্যাকের উপরে আপনার একবারে একাধিক পরিবর্তন ঘটনা ঘটতে পারে। ধরুন আপনার কাছে দুটি অ্যারে রয়েছে যা কোনও কারণে সিঙ্কে রাখা দরকার। আপনি কেবল একটি বা অন্যটিতে যুক্ত করতে পারেন, তবে প্রতিবার আপনি কোনও পরিবর্তন ইভেন্টের আগুন জ্বালান, যা এখন বিশ্বের একটি অসামঞ্জস্যপূর্ণ দর্শন। থ্রেড লক করার ক্ষেত্রে এটি খুব অনুরূপ সমস্যা, যা প্রতিটি কলব্যাক একচেটিয়াভাবে এবং সম্পূর্ণ হওয়ার জন্য জাভাস্ক্রিপ্ট এড়ানো হয়। পরিবর্তিত ইভেন্টগুলি এটিকে ভেঙে দেয় কারণ সেটটারগুলির সুদূরপ্রসারী পরিণতি হতে পারে যা উদ্দিষ্ট নয় এবং সুস্পষ্ট নয়, যা থ্রেড সমস্যাটি আবারও তৈরি করে। দেখা যাচ্ছে যে আপনি যা করতে চান তা হ'ল শ্রোতার মৃত্যুদন্ড কার্যকর করা এবং গ্যারান্টি,

অভিনয় সম্পর্কে কি?

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

মানুষ হ'ল:

• ধীর - 50 মাইলেরও বেশি দ্রুত যেকোনো কিছুই মানুষের কাছে দুর্ভেদ্য এবং তাই "তাত্ক্ষণিক" হিসাবে বিবেচিত হতে পারে।

• সীমাবদ্ধ - আপনি সত্যই কোনও এক পৃষ্ঠায় একজন মানুষের কাছে প্রায় 2000 টির বেশি তথ্য প্রদর্শন করতে পারবেন না। এর চেয়ে বেশি যে কোনও কিছুই সত্যই খারাপ ইউআই, এবং মানুষ যেকোনভাবে এটি প্রক্রিয়া করতে পারে না।

সুতরাং আসল প্রশ্নটি হ'ল: 50 এমএসে আপনি কতগুলি তুলনা ব্রাউজারে করতে পারেন? যেহেতু অনেকগুলি উপাদান কার্যকর হয় সেটির জবাব দেওয়া এটি একটি কঠিন প্রশ্ন, তবে এখানে একটি পরীক্ষার মামলা রয়েছে: http://jsperf.com/angularjs-digest/6 যা 10,000 নজরদারি তৈরি করে। একটি আধুনিক ব্রাউজারে এটি কেবল 6 এমএসের নিচে লাগে। উপর ইন্টারনেট এক্সপ্লোরার 8 এটি 40 MS সম্পর্কে লাগে। আপনি দেখতে পাচ্ছেন, আজকাল ধীর ব্রাউজারগুলিতে এটি কোনও সমস্যা নয়। একটি সতর্কতা রয়েছে: সময়সীমার মধ্যে উপযুক্ত করার জন্য তুলনাগুলি সহজ হওয়া দরকার ... দুর্ভাগ্যক্রমে অ্যাঙ্গুলারজেএস-তে একটি ধীর তুলনা যুক্ত করা সহজ, সুতরাং যখন আপনি কী জানেন না তখন ধীর অ্যাপ্লিকেশনগুলি তৈরি করা সহজ করছে. তবে আমরা কোনও যন্ত্রের মডিউল সরবরাহ করে একটি উত্তর পেয়েছি আশা করি, যা আপনাকে দেখায় যে ধীর তুলনা।

দেখা যাচ্ছে যে ভিডিও গেমস এবং জিপিইউগুলি নোংরা-চেক করার পদ্ধতির ব্যবহার করে, বিশেষত কারণ এটি ধারাবাহিক। যতক্ষণ না তারা মনিটরের রিফ্রেশ রেট (সাধারণত 50-60 হার্জ, বা প্রতি 16.6-20 এমএস) অর্জন করে, তার উপর যে কোনও কার্যকারিতা নষ্ট হয়, তাই আপনি এফপিএস বেশি পাওয়ার চেয়ে আরও বেশি জিনিস আঁকতে ভাল।

Comments

@ মার্ক - হ্যাঁ, কেওতে আপনি কেবলমাত্র এক্সটেন্ড ({থ্রোটল: 500}) যুক্ত করুন যাতে এটিতে অভিনয়ের আগে শেষ পরিবর্তন ইভেন্টের পরে 500 মিলিসেকেন্ড অপেক্ষা করতে হবে।

— ড্যানিয়েল আর্উইকার

এই সম্পূর্ণ উত্তরটি দুর্দান্ত অন্য "দুর্দান্ত যতক্ষণ না তারা 50 ফিপি লাভ করবে ততক্ষণ যে কোনও পারফরম্যান্স নষ্ট হবে, যেহেতু মানুষের চোখ এটি প্রশংসা করতে পারে না, তাই আপনি এফপিএস উচ্চতর হওয়ার চেয়ে আরও বেশি জিনিস আঁকতে ভাল better" আপনার আবেদনের উপর নির্ভর করে উক্ত বিবৃতিটি সম্পূর্ণ ভুল। চোখ অবশ্যই 50 টিরও বেশি পিপিএসের প্রশংসা করতে পারে, এবং ভিআর শোতে বিভিন্ন সমস্যা হিসাবে (জন কারম্যাক বা মাইকেল আবরাশ, বিশেষত পরবর্তীকালের জিডিসি 2013 ভিআর টক থেকে সর্বশেষের কোনও পড়ুন), 50 এফপিএস আসলে বেশ ধীর গতিযুক্ত। তা ছাড়া আপনার উত্তরটি দুর্দান্ত। আমি কেবল ভুল তথ্য ছড়াতে চাই না।

— নাট বান্দি

@ ডেভিডাইভার্স আমাদের ঠিক ঠিক 1ors = 0.000001s এর মতো

— থার্জির

বিবৃতিটি বিপরীতে সহজেই বলা যেতে পারে কারণ "ডার্টি চেকিং কোনও সমস্যার জন্য একটি চৌকস বৈশিষ্ট্য যা নকআউট হয় না"। ES6 পর্যবেক্ষণযোগ্য ব্যবহার করছে এবং কৌণিক নোংরা চেকিং থেকে মুক্তি পাচ্ছে। বাস্তব জগত এই উত্তরটি ধরা পড়ে এবং এটিকে মিথ্যা বলে প্রমাণিত করে।

— শঙ্কু

"50 মাইলের চেয়ে দ্রুত যে কোনও কিছু মানুষের কাছে দুর্ভেদ্য নয়" সত্য নয়। পরীক্ষায় আমরা দেখতে পেয়েছি যে আমাদের গ্রাহকরা সহজেই 50 মিমি আপডেট লেটেন্সি (20fps) এবং 16.6ms আপডেট লেটেন্সি (60fps) এর মধ্যে পার্থক্য করতে পারে। প্রাক্তন গতিতে চলমান দৃশ্যগুলি ধারাবাহিকভাবে দরিদ্র সামগ্রিকভাবে "এটি কীভাবে অনুভূত হয়" রেটিং পান এমনকি লোকেরা সচেতনভাবে ফ্রেমরেটটি নিবন্ধন না করলেও।

— ক্রাশ ওয়ার্কস

Answer 2

মিসকো ইতিমধ্যে ডেটা বাইন্ডিংগুলি কীভাবে কাজ করে তার একটি দুর্দান্ত বিবরণ দিয়েছিল, তবে আমি ডাটা বাইন্ডিংয়ের সাথে পারফরম্যান্স ইস্যুতে আমার দৃষ্টিভঙ্গি যুক্ত করতে চাই।

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

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

অথবা কর্পোরেট ওয়েব অ্যাপ্লিকেশনটিতে ডেটা-গ্রিড বিবেচনা করুন। প্রতি পৃষ্ঠায় 50 টি সারি অযৌক্তিক নয়, যার প্রত্যেকটিতে 10-20 কলাম থাকতে পারে। আপনি যদি এনজি-পুনরাবৃত্তি দিয়ে এটি তৈরি করেন, এবং / অথবা কিছু কিছু কোষে তথ্য রয়েছে যা কিছু বাইন্ডিং ব্যবহার করে তবে আপনি কেবল এই গ্রিডের সাথে 2000 বাইন্ডিংগুলির কাছে পৌঁছতে পারেন।

অ্যাংুলারজেএস-এর সাথে কাজ করার সময় আমি এটি একটি বিশাল সমস্যা বলে মনে করি এবং আমি এখন পর্যন্ত যে একমাত্র সমাধানটি খুঁজে পেতে পেরেছি তা হ'ল এনজিওনস ব্যবহার, দর্শনার্থী এবং অনুরূপ কৌশলগুলি নিবন্ধের পরিবর্তে দ্বি-মুখী বাঁধাই ব্যবহার করে উইজেট তৈরি করা বা নির্মাণ করা নির্দেশাবলী যা jQuery এবং DOM ম্যানিপুলেশন দিয়ে ডোম তৈরি করে। আমি অনুভব করি যে এটি প্রথম স্থানে অ্যাংুলার ব্যবহারের উদ্দেশ্যকে পরাস্ত করে।

আমি এটি পরিচালনা করার জন্য অন্যান্য উপায়ে পরামর্শ শুনতে পছন্দ করব তবে তারপরে আমার নিজের প্রশ্নটি লিখতে হবে। আমি এটিকে একটি মন্তব্যে রাখতে চেয়েছিলাম, তবে এটি তার পক্ষে খুব দীর্ঘ ...

TL; DR
ডেটা বাইন্ডিং জটিল পৃষ্ঠাগুলিতে পারফরম্যান্সের সমস্যা সৃষ্টি করতে পারে।

Comments

হ্যাঁ আমি এই দ্বিতীয়। আমাদের অ্যাপ্লিকেশনটির প্রাথমিক দায়িত্ব হ'ল বিভিন্ন সত্তার মধ্যে সংযোগ প্রদর্শন করা। প্রদত্ত পৃষ্ঠায় 10 টি বিভাগ থাকতে পারে। প্রতিটি বিভাগে একটি টেবিল রয়েছে। প্রতিটি টেবিলের 2-5 টাইপহেড ফিল্টার রয়েছে। প্রতিটি টেবিলের 2-5 কলাম রয়েছে, প্রতিটি 10 ​​টি সারি রয়েছে। খুব দ্রুত আমরা পারফেক্ট ইস্যুগুলিতে চলে যাই এবং "অনুরূপ কৌশলগুলি" বিকল্পগুলি দিয়ে চলেছি।

— স্কট সিলভি

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

— জেসন বয়ড

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

— গাউট লোকেন

@MW। সত্যিই আমি মনে করি বাঁধাই একবার মূল ছিল। তবে দেখা যাচ্ছে এটি তা নয়। এটি আপনার নিজের নির্দেশনা লেখার সময় কিছু করতে পারে, মূলত স্টাফগুলি না দেখে লিঙ্ক করে। তবে এর জন্য একটি ইউএক্স

— গাউট লোকেন

: এই পড়া কেউ জন্য ভবিষ্যতে থেকে একটি পেজে: এক সময় বাঁধাই এখন কৌণিক v1.3 একটি কোর বৈশিষ্ট্য, আরো এখানে পড়তে docs.angularjs.org/guide/expression

— Nobita

Answer 3

নোংরা $scopeবস্তু যাচাই করে

কৌণিক বস্তুগুলিতে একটি সাধারণ arrayপর্যবেক্ষক বজায় রাখে $scope। যদি আপনি কোন পরিদর্শন তাহলে $scopeআপনি দেখবেন যে এটি একটি রয়েছে arrayনামক $$watchers।

প্রতিটি প্রহরী এমন একটি objectযা অন্যান্য জিনিসের সাথে থাকে

1. এমন একটি অভিব্যক্তি যা পর্যবেক্ষক নিরীক্ষণ করছেন। এটি কেবল একটি attributeনাম বা আরও জটিল কিছু হতে পারে ।
2. এক্সপ্রেশনটির একটি সর্বশেষ জ্ঞাত মান। এটি এক্সপ্রেশনটির বর্তমান গণিত মানের বিপরীতে চেক করা যায়। যদি মানগুলি পৃথক হয় তবে পর্যবেক্ষকটি ফাংশনটি ট্রিগার করবে এবং $scopeমলিন হিসাবে চিহ্নিত করবে ।
3. এমন একটি ফাংশন যা পর্যবেক্ষক মলিন হলে কার্যকর করা হবে।

পর্যবেক্ষকরা কীভাবে সংজ্ঞায়িত হয়

অ্যাঙ্গুলারজেএস-এ কোনও প্রহরীকে সংজ্ঞায়িত করার বিভিন্ন উপায় রয়েছে।

• আপনি স্পষ্টভাবে $watchএকটি attributeচালু করতে পারেন $scope।

  $scope.$watch('person.username', validateUnique);

• আপনি {{}}আপনার টেম্পলেটটিতে একটি বিভাজন রাখতে পারেন (বর্তমানের জন্য আপনার জন্য একজন প্রহরী তৈরি করা হবে $scope)।

  <p>username: {{person.username}}</p>

• আপনি কোনও নির্দেশিকা যেমন ng-modelআপনার জন্য প্রহরীকে সংজ্ঞায়িত করতে চাইতে পারেন ।

  <input ng-model="person.username" />

$digestচক্র তাদের শেষ মান বিরুদ্ধে সব প্রহরী পরীক্ষা

যখন আমরা সাধারণ চ্যানেলগুলির (এনজি-মডেল, এনজি-রিপিট, ইত্যাদি) মাধ্যমে অ্যাংুলারজেএসের সাথে যোগাযোগ করি তখন একটি ডাইজেস্ট চক্র নির্দেশের মাধ্যমে ট্রিগার করা হবে।

একটি ডাইজেস্ট চক্র এবং তার সমস্ত শিশুদের গভীরতার প্রথম ট্র্যাভারসাল$scope । প্রত্যেকের জন্য $scope object, আমরা এর উপর পুনরাবৃত্তি করি $$watchers arrayএবং সমস্ত এক্সপ্রেশন মূল্যায়ন করি। যদি নতুন এক্সপ্রেশন মানটি সর্বশেষ জ্ঞাত মান থেকে পৃথক হয়, তবে পর্যবেক্ষকের ফাংশনটি বলা হয়। এই ফাংশনটি ডমটির কিছু অংশ পুনরায় সংকলন করতে পারে, একটি মান পুনর্নির্মাণ করতে পারে $scope, ট্রিগার AJAX requestকরতে পারে, আপনার যা কিছু করার প্রয়োজন তা হচ্ছে।

প্রতিটি ক্ষেত্র অতিক্রম করা হয় এবং প্রতিটি ঘড়ির অভিব্যক্তি মূল্যায়িত হয় এবং শেষ মানেরটির বিপরীতে পরীক্ষিত হয়।

যদি কোনও নজরদারি ট্রিগার করা হয় তবে $scopeতা নোংরা

যদি কোনও প্রহরীকে ট্রিগার করা হয় তবে অ্যাপটি জানে যে কিছু পরিবর্তন হয়েছে এবং $scopeএটিকে নোংরা হিসাবে চিহ্নিত করা হয়েছে।

প্রহরী ফাংশনগুলি $scopeপিতামাতার উপর বা তার অন্যান্য বৈশিষ্ট্যগুলিকে পরিবর্তন করতে পারে $scope। যদি একটি $watcherফাংশন ট্রিগার করা হয়ে থাকে তবে আমরা গ্যারান্টি দিতে পারি না যে আমাদের অন্যান্য $scopeগুলি এখনও পরিষ্কার আছে এবং তাই আমরা পুরো ডাইজেস্ট চক্রটি আবার কার্যকর করি।

এটি কারণ AngularJS এর ​​দ্বিমুখী বাইন্ডিং রয়েছে তাই $scopeগাছটিকে ব্যাক আপ করে ডেটা পাঠানো যেতে পারে । আমরা $scopeইতিমধ্যে হজম হয়ে গেছে এমন একটি উচ্চতার কোনও মান পরিবর্তন করতে পারি । সম্ভবত আমরা একটি মান পরিবর্তন $rootScope।

যদি $digestনোংরা হয়, আমরা $digestআবার পুরো চক্রটি কার্যকর করি

$digestডাইজেস্ট চক্রটি পরিষ্কার না হওয়া পর্যন্ত আমরা ক্রমাগতভাবে চক্রটি লুপ করি (সমস্ত $watchএক্সপ্রেশনগুলি পূর্ববর্তী চক্রের মতো একই মানের থাকে), বা আমরা ডাইজেস্ট সীমাতে পৌঁছে যাই। ডিফল্টরূপে, এই সীমাটি 10 ​​এ সেট করা আছে।

আমরা যদি ডাইজেস্ট সীমাতে পৌঁছে যাই তবে AngularJS কনসোলে একটি ত্রুটি বাড়িয়ে তুলবে:

10 $digest() iterations reached. Aborting!

ডাইজেস্ট মেশিনে শক্ত তবে বিকাশকারীদের পক্ষে সহজ

যেমন আপনি দেখতে পাচ্ছেন, প্রতিবারই একটি কৌণিক জেএস অ্যাপ্লিকেশনে কিছু পরিবর্তন হওয়ার সাথে সাথে অ্যাঙ্গুলারজেএস $scopeকীভাবে প্রতিক্রিয়া জানাবে তা দেখতে শ্রেণিবদ্ধের প্রতিটি পর্যবেক্ষককে পরীক্ষা করবে । একজন বিকাশকারীর জন্য এটি একটি বিশাল উত্পাদনশীলতার वरदान, এখন আপনার প্রায় কোনও ওয়্যারিং কোড লেখার দরকার নেই, অ্যাঙ্গুলারজেএস কেবল মানটি পরিবর্তিত হয়েছে কিনা তা লক্ষ্য করবে এবং অ্যাপটির বাকী অংশটি পরিবর্তনের সাথে সামঞ্জস্য করবে।

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

উদাহরণস্বরূপ আপনি যদি ng-repeatবৃহত্তর বেশি হন তবে এই সীমাটি পৌঁছানো সহজ JSON array। আপনি প্রহরী তৈরি না করে কোনও টেমপ্লেট সংকলন করতে ওয়ান-টাইম বাইন্ডিংয়ের মতো বৈশিষ্ট্যগুলি ব্যবহার করে এর বিরুদ্ধে প্রশমিত করতে পারেন।

কীভাবে খুব বেশি পর্যবেক্ষক তৈরি করা এড়ানো যায়

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

যদি আপনার কাছে এমন ডেটা থাকে যা খুব কমই পরিবর্তিত হয়, আপনি কেবল :: সিনট্যাক্স ব্যবহার করে একবার এটি আবদ্ধ করতে পারেন, এর মতো:

<p>{{::person.username}}</p>

অথবা

<p ng-bind="::person.username"></p>

অন্তর্ভুক্ত টেমপ্লেটটি যখন রেন্ডার করা হয় এবং ডেটা লোড করা হয় তখনই বাইন্ডিংটি ট্রিগার করা হবে $scope।

এটি বিশেষত গুরুত্বপূর্ণ যখন আপনার ng-repeatঅনেকগুলি আইটেম থাকে।

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

Comments

ধন্যবাদ @ ব্যবহারকারী ২৪6477৪০ - যদিও এটাই ঠিক যে মিসকোয়ের উত্তর শীর্ষে হওয়া উচিত। তিনি কাঠামোটি কারও চেয়ে ভাল জানেন, এবং এটি দুর্দান্ত শীতল যে তিনি স্ট্যাক ওভারফ্লোতে জড়িত ..

— অতিপরিচয়তা

আমি একমত নই যে এই উত্তরটি শীর্ষে থাকা উচিত; কিছু জানতে এবং নির্দিষ্ট প্রশ্নের জন্য একটি প্রাসঙ্গিক / বিস্তারিত উত্তর লেখার মধ্যে পার্থক্য রয়েছে। প্রশংসা পাওয়ার আরও ভাল উপায় আছে। যাইহোক ..

— ব্যবহারকারী 2864740

আমি সন্দেহ করি না যে এটি সত্য, তবে প্রশ্নোত্তর এবং উত্তরগুলি উত্তর দিন :)

— ব্যবহারকারীর 2864740

নোংরা-চেকটি কী আচরণ করে এবং এর প্রকৃত মূল্যায়ন কী করে তা জুড়ে দেওয়ার উত্তম উত্তর, মিসকো উত্তরের একটি বিষয় খুব পরিষ্কার ছিল না।

— স্ট্রাইডার

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

— মঙ্গু সিং রাজপুরোহিত

Answer 4

এটি আমার প্রাথমিক বোঝাপড়া। এটা ভাল হতে পারে!

1. আইটেমগুলি কোনও ফাংশন (দেখার মতো জিনিসটি ফিরিয়ে দেওয়া) পাস করার মাধ্যমে দেখা হয় $watch।
2. $applyপদ্ধতিতে মোড়ানো কোডের ব্লকের মধ্যে অবশ্যই দেখা আইটেমগুলিতে পরিবর্তনগুলি করা উচিত ।
3. শেষে পদ্ধতি প্রার্থনা করছে যা তারা যদি শেষ সময় থেকে পরিবর্তিত দেখতে ঘড়ি ও চেক প্রতিটি মাধ্যমে যায় দৌড়ে।$apply$digest$digest
4. যদি কোনও পরিবর্তন পাওয়া যায় তবে সমস্ত পরিবর্তন স্থির না হওয়া অবধি ডাইজেস্টকে আবার অনুরোধ করা হয়।

স্বাভাবিক বিকাশে, এইচটিএমএল-তে ডেটা-বাঁধাই সিনট্যাক্স অ্যাঙ্গুলারজেএস সংকলককে আপনার জন্য ঘড়ি তৈরি করতে বলে এবং নিয়ামক পদ্ধতি $applyইতিমধ্যে ইতিমধ্যে চালানো হয় । সুতরাং অ্যাপ্লিকেশন বিকাশকারী এটি সমস্ত স্বচ্ছ।

Comments

প্রয়োগ পদ্ধতিটি কখন ট্রিগার হয়?

— নুমান সালাতী

@ এলিজিউমনার ডাইজেস্ট লুপটি কোনও ইভেন্ট বা কল করার জন্য প্রয়োগ হয় $ প্রয়োগ (), এটি টাইমার ভিত্তিক পর্যায়ক্রমে বলা হয় না called দেখুন AngularJS এর ​​$ ঘড়ির কাজটি কীভাবে কাজ করে? এবং অ্যাংুলারজেজেজে কীভাবে বাঁধাই এবং হজম কাজ করে?

— এডল

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

— এলিসিউ মনার ডস সান্টোস 4:51

আমি যে ডাইজেস্ট দশ বার সর্বোচ্চ চালানো হবে পড়েছি sitepoint.com/understanding-angulars-apply-digest

— user137717

Answer 5

আমি নিজেই কিছুক্ষণ এই জন্য অবাক হয়েছি। সেটার ব্যতীত কীভাবে AngularJSবিজ্ঞপ্তিটি $scopeঅবজেক্টে পরিবর্তিত হয় ? এটি তাদের পোল না?

এটি আসলে যা করে তা হ'ল: আপনি মডেলটি সংশোধন করেন এমন কোনও "সাধারণ" স্থানটির সাহস থেকে ইতিমধ্যে ডেকে আনা হয়েছিল AngularJS, সুতরাং এটি $applyআপনার কোড চলার পরে স্বয়ংক্রিয়ভাবে আপনাকে কল করে । বলুন যে আপনার নিয়ামকের এমন একটি পদ্ধতি রয়েছে যা ng-clickকিছু উপাদানকে আঁকিয়ে রাখে। কারণ AngularJSআপনার জন্য একসাথে সেই পদ্ধতির কলিং তারগুলি $apply, উপযুক্ত স্থানে এটি করার সুযোগ রয়েছে । তেমনিভাবে, মতামতগুলিতে ঠিক উপস্থিত হওয়া মত প্রকাশের জন্য, সেগুলি দ্বারা কার্যকর করা হয় AngularJSএটি এটি করে $apply।

ডকুমেন্টেশনের বাইরে$apply কোডের জন্য ম্যানুয়ালি কল করার কথা বলা হয়, তখন এটি কোডের কথা বলছে যা কল চলাকালীন নিজের থেকে সরে না ।AngularJSAngularJS

Answer 6

ছবি দিয়ে ব্যাখ্যা:

ডেটা-বাইন্ডিংয়ের একটি ম্যাপিং দরকার

সুযোগের রেফারেন্সটি টেমপ্লেটে ঠিক রেফারেন্স নয়। আপনি যখন দুটি বস্তুকে ডেটা বেঁধে রাখেন তখন আপনার তৃতীয় একটি দরকার যা প্রথমে শোন এবং অন্যটিকে সংশোধন করে।

এখানে, আপনি যখন সংশোধন করবেন <input>, আপনি ডেটা-রেফ 3 টিপুন । এবং ক্লাসিক ডেটা-বাইন্ড মেকানিজম ডেটা-রেফ 4 পরিবর্তন করবে । সুতরাং অন্যান্য {{data}}এক্সপ্রেশন কিভাবে সরানো হবে?

ইভেন্টগুলি $ হজমে যায় ()

কৌণিক একটি oldValueএবং newValueপ্রতিটি বাঁধাই রক্ষণাবেক্ষণ করে। এবং প্রতিটি কৌণিক ইভেন্টের পরে , বিখ্যাত $digest()লুপটি কিছু পরিবর্তন হয়েছে কিনা তা দেখার জন্য ওয়াচলিস্টটি পরীক্ষা করবে। এই কৌণিক ঘটনা হয় ng-click, ng-change, $httpসম্পন্ন ... $digest()যতদিন কোন হিসাবে ইচ্ছার লুপ oldValueথেকে পৃথক newValue।

পূর্ববর্তী ছবিতে এটি লক্ষ্য করবে যে ডেটা-রেফ 1 এবং ডেটা-রেফ 2 পরিবর্তন হয়েছে।

উপসংহার

এটি ডিম এবং চিকেনের মতো কিছুটা। আপনি কখনই জানেন না কে শুরু করেন তবে আশা করা যায় এটি বেশিরভাগ সময় প্রত্যাশার মতো কাজ করে।

অন্য বিষয়টি হ'ল আপনি মেমরি এবং সিপিইউতে একটি সাধারণ বাঁধাইয়ের গভীরতার প্রভাব সহজেই বুঝতে পারবেন। আশা করি ডেস্কটপগুলি এটিকে পরিচালনা করার জন্য যথেষ্ট পরিমাণে মোটা। মোবাইল ফোনগুলি তেমন শক্তিশালী নয়।

Answer 7

স্পষ্টতই এর Scopeসাথে যুক্ত বস্তুগুলিতে কোনও পরিবর্তন আছে কিনা তা পর্যায়ক্রমিকভাবে পরীক্ষা করা হয় না। সুযোগের সাথে যুক্ত সমস্ত বস্তু পর্যবেক্ষণ করা হয় না। স্কোপ প্রোটোটাইপিকভাবে একটি c প্রহরীদের রক্ষণাবেক্ষণ করে । যখন ডাকা হয় Scopeকেবল এটির মাধ্যমে পুনরাবৃত্তি হয় ।$$watchers$digest

কৌণিক এগুলির প্রত্যেকের জন্য $$ প্রহরীগুলিতে একটি প্রহরী যুক্ত করে

1. {{এক্সপ্রেশন}} - আপনার টেম্পলেটগুলিতে (এবং অন্য কোথাও যেখানে একটি অভিব্যক্তি আছে) বা যখন আমরা এনজি-মডেলটি সংজ্ঞায়িত করি।
   
2. $ সুযোগ। $ ঘড়ি ('এক্সপ্রেশন / ফাংশন') - আপনার জাভাস্ক্রিপ্টে আমরা কেবল কৌনিক দেখার জন্য একটি স্কোপ অবজেক্ট সংযুক্ত করতে পারি।

$ ঘড়ি ফাংশনটি তিনটি পরামিতি নেয়:

1. প্রথমটি হ'ল একটি প্রহরী ফাংশন যা কেবলমাত্র বস্তুটি দেয় বা আমরা কেবল একটি অভিব্যক্তি যুক্ত করতে পারি।
   

2. দ্বিতীয়টি হ'ল একটি শ্রোতার ফাংশন যা যখন বস্তুর পরিবর্তন হবে তখন ডাকা হবে। DOM পরিবর্তনের মতো সমস্ত জিনিস এই ফাংশনে প্রয়োগ করা হবে।
   

3. তৃতীয়টি হ'ল optionচ্ছিক পরামিতি যা বুলিয়ান গ্রহণ করে। যদি এটির সত্য, কৌণিক গভীর বস্তুটিকে পর্যবেক্ষণ করে এবং যদি এর মিথ্যা কৌণিকটি কেবলমাত্র বস্তুর উপর নজর রাখে reference $ ঘড়ির কাঁটা বাস্তবায়ন দেখে মনে হচ্ছে

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

অ্যাঙ্গুলারে একটি আকর্ষণীয় জিনিস রয়েছে যার নাম ডাইজেস্ট সাইকেল। $ ডাইজেস্ট চক্রটি $ সুযোগ $ ডাইজেস্ট () এ কল করার ফলে শুরু হয়। ধরে নিন যে আপনি এনজি-ক্লিক নির্দেশিকার মাধ্যমে একটি হ্যান্ডলার ফাংশনে একটি $ স্কোপ মডেল পরিবর্তন করেছেন। সেক্ষেত্রে অ্যাঙ্গুলারজেএস স্বয়ংক্রিয়ভাবে $ ডাইজেস্ট () কল করে একটি ডাইজেস্ট চক্রকে ট্রিগার করে n এবং স্বয়ংক্রিয়ভাবে একটি gest ডাইজেস্ট চক্রকে ট্রিগার করে। $ ডাইজেস্টের মোটামুটি বাস্তবায়ন দেখে মনে হচ্ছে।

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

যদি স্কোপ মডেলটি আপডেট করার জন্য আমরা জাভাস্ক্রিপ্টের সেটটাইমআউট () ফাংশনটি ব্যবহার করি তবে অ্যাঙ্গুলার আপনার কী পরিবর্তন করতে পারে তা জানার কোনও উপায় নেই। এক্ষেত্রে আমাদের ually প্রয়োগ () ম্যানুয়ালি কল করা আমাদের দায়িত্ব, যা একটি ডাইজেস্ট চক্রকে ট্রিগার করে। একইভাবে, আপনার যদি কোনও নির্দেশিকা থাকে যা কোনও ডিওএম ইভেন্ট শ্রোতাদের সেট আপ করে এবং হ্যান্ডলার ফাংশনের অভ্যন্তরে কিছু মডেল পরিবর্তন করে, পরিবর্তনগুলি কার্যকর হওয়ার জন্য আপনাকে ensure প্রয়োগ () কল করতে হবে। $ প্রয়োগের বড় ধারণাটি হ'ল আমরা এমন কিছু কোড কার্যকর করতে পারি যা কৌনিক সম্পর্কে অবগত নয়, সেই কোডটি এখনও স্কোপে জিনিসগুলি পরিবর্তন করতে পারে। আমরা যদি সেই কোডটি $ প্রয়োগে আবদ্ধ করি, তবে এটি calling ডাইজেস্ট () কল করার বিষয়ে যত্ন নেবে। $ প্রয়োগ () এর রুক্ষ বাস্তবায়ন।

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

Answer 8

কৌণিক জেএস তিনটি শক্তিশালী ফাংশনের সাহায্যে ডেটা-বাঁধাইয়ের ব্যবস্থাটি পরিচালনা করে: $ ঘড়ি () , $ ডাইজেস্ট () এবং $ প্রয়োগ () । বেশিরভাগ সময় অ্যাংুলারজেএস $ স্কোপ $ ঘড়ি () এবং $ স্কোপ। ডাইজেস্ট () কল করবে তবে কিছু ক্ষেত্রে আপনাকে নতুন মানগুলি আপডেট করার জন্য এই ফাংশনগুলি ম্যানুয়ালি কল করতে হতে পারে।

$ ঘড়ি () : -

এই ফাংশনটি $ স্কোপে কোনও ভেরিয়েবলের পরিবর্তনগুলি পর্যবেক্ষণ করতে ব্যবহৃত হয়। এটি তিনটি পরামিতি গ্রহণ করে: এক্সপ্রেশন, শ্রোতা এবং সমতা বস্তু, যেখানে শ্রোতা এবং সমতা বস্তু optionচ্ছিক পরামিতি।

gest হজম () -

এই ফাংশনটি $ স্কোপ অবজেক্ট এবং তার শিশু-স্কোপ অবজেক্টের সমস্ত ঘড়ির মধ্য দিয়ে পুনরাবৃত্তি করে
(যদি এটি থাকে তবে)। যখন $ ডাইজেস্ট () ঘড়ির উপর দিয়ে পুনরাবৃত্তি করে, তখন এটি পরীক্ষা করে যে অভিব্যক্তির মান পরিবর্তন হয়েছে। মানটি পরিবর্তিত হলে, AngularJS শ্রোতাকে নতুন মান এবং পুরানো মান সহ কল ​​করে। যখনই AngularJS এটি প্রয়োজনীয় মনে করে ডাইজেস্ট () ফাংশনটি ডাকা হয়। উদাহরণস্বরূপ, একটি বোতাম ক্লিকের পরে, বা একটি এজেএক্স কল করার পরে। আপনার কিছু ক্ষেত্রে থাকতে পারে যেখানে AngularJS আপনার জন্য $ ডাইজেস্ট () ফাংশনটি কল করে না। সেক্ষেত্রে আপনাকে নিজের ফোন করতে হবে।

$ আবেদন () -

কৌণিক কেবল স্বয়ংক্রিয়ভাবে যাদুবিদ্যার সাথে সেই সমস্ত মডেল পরিবর্তনগুলি আপডেট করে যা কৌনিক জেএস প্রসঙ্গে থাকে। আপনি যখন কৌনিক প্রসঙ্গে (যেমন ব্রাউজার ডিওএম ইভেন্ট, সেটটাইমআউট, এক্সএইচআর বা তৃতীয় পক্ষের লাইব্রেরি) বাইরে কোনও মডেল পরিবর্তন করেন, তখন আপনাকে নিজেই $ প্রয়োগ () কল করে অ্যাঙ্গুলারকে পরিবর্তনগুলি অবহিত করতে হবে। যখন $ প্রয়োগ () ফাংশন কল অভ্যন্তরীণভাবে AngularJS কল $ ডাইজেস্ট () শেষ করে, তখন সমস্ত ডেটা বাইন্ডিং আপডেট হয়।

Answer 9

এটি ঘটেছিল যে আমার কোনও ফর্মের সাথে একজন ব্যক্তির ডেটা মডেলটি সংযুক্ত করার দরকার ছিল, আমি যা করেছি তা হ'ল ফর্মের সাথে ডেটাগুলির সরাসরি ম্যাপিং।

উদাহরণস্বরূপ, যদি মডেলটির মতো কিছু থাকে:

$scope.model.people.name

ফর্মটির নিয়ন্ত্রণ ইনপুট:

<input type="text" name="namePeople" model="model.people.name">

আপনি যদি অবজেক্ট কন্ট্রোলারের মান পরিবর্তন করেন তবে এই দৃশ্যটিতে স্বয়ংক্রিয়ভাবে প্রতিফলিত হবে।

সার্ভার ডেটা থেকে আমি যেখানে মডেলটি পাস করেছি তার একটি উদাহরণ হ'ল আপনি যখন লিখিত লোডের উপর ভিত্তি করে একটি জিপ কোড এবং জিপ কোডের জন্য সেই ভিউটির সাথে সম্পর্কিত উপনিবেশ এবং নগরগুলির একটি তালিকা জিজ্ঞাসা করেন এবং ডিফল্টরূপে ব্যবহারকারীর সাথে প্রথম মান সেট করে। এবং এটি আমি খুব ভালভাবে কাজ করেছি, যা ঘটে তা হ'ল angularJSকখনও কখনও মডেলটিকে রিফ্রেশ করতে কয়েক সেকেন্ড সময় লাগে, এটি করার জন্য আপনি ডেটা প্রদর্শন করার সময় কোনও স্পিনার রাখতে পারেন।

Comments

আমি এই উত্তরটি 5 বার পড়েছি এবং আমি এখানে কী বোঝাতে চাইছি তা এখনও বুঝতে পারি না।

— শেবেদুলিন

উত্তরটি আমার কাছে ধাঁধার মতো মনে হচ্ছে

— আমান

Answer 10

1. একমুখী ডেটা বাইন্ডিং এমন একটি পদ্ধতির যেখানে ডেটা মডেল থেকে কোনও মান নেওয়া হয় এবং এইচটিএমএল উপাদান intoোকানো হয়। ভিউ থেকে মডেল আপডেট করার কোনও উপায় নেই। এটি শাস্ত্রীয় টেম্পলেট সিস্টেমে ব্যবহৃত হয়। এই সিস্টেমগুলি কেবলমাত্র এক দিকে ডেটা বাঁধে।

2. কৌণিক অ্যাপ্লিকেশনগুলিতে ডেটা-বাইন্ডিং হ'ল মডেল এবং দেখার উপাদানগুলির মধ্যে ডেটা স্বয়ংক্রিয়ভাবে সিঙ্ক্রোনাইজেশন।

ডেটা বাইন্ডিং আপনাকে মডেলটিকে আপনার অ্যাপ্লিকেশনটির একক-উত্স-সত্য হিসাবে বিবেচনা করতে দেয়। দৃশ্যটি সর্বদা মডেলটির একটি অভিক্ষেপ। যদি মডেলটি পরিবর্তন করা হয় তবে দৃশ্য পরিবর্তনটি প্রতিবিম্বিত করে এবং বিপরীতে।

Answer 11

এখানে একটি ইনপুট ক্ষেত্র ব্যবহার করে AngularJS এর ​​সাথে ডেটা বাঁধাইয়ের একটি উদাহরণ is আমি পরে ব্যাখ্যা করব

এইচটিএমএল কোড

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

AngularJS কোড

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

উপরের উদাহরণে আপনি দেখতে পাচ্ছেন যে, AngularJSng-model এইচটিএমএল উপাদানগুলিতে, বিশেষত inputক্ষেত্রগুলিতে কী ঘটে তা শোনার জন্য এবং দেখার জন্য ব্যবহার করে । যখন কিছু ঘটে তখন কিছু করুন। আমাদের ক্ষেত্রে, ng-modelগোঁফ সংকেত ব্যবহার করে, আমাদের দৃষ্টিতে আবদ্ধ {{}}। ইনপুট ফিল্ডের ভিতরে যা কিছু টাইপ করা হয় তা তাত্ক্ষণিকভাবে স্ক্রিনে প্রদর্শিত হয়। এবং এটি হ'ল ডেটা বাইন্ডিংয়ের সৌন্দর্য, এর সাধারণ ফর্মটিতে অ্যাঙ্গুলারজেএস ব্যবহার করে।

আশাকরি এটা সাহায্য করবে.

কোডেপেনে এখানে একটি কাজের উদাহরণ দেখুন

Answer 12

AngularJs দ্বি-উপাত্তের ডেটা-বাইন্ডিং সমর্থন করে ।
এর অর্থ আপনি ডেটা অ্যাক্সেস করতে পারেন দেখুন -> নিয়ামক এবং নিয়ন্ত্রক -> দেখুন

প্রাক্তন জন্য

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O / পি

Peter

আপনি ng-modelলাইক এ ডেটা বাঁধতে পারেন : -
2)

<input ng-model="name" />

<div> {{ name }} </div>

এখানে উপরের উদাহরণে ইনপুট ব্যবহারকারী যা কিছু দেবেন তা এটি <div>ট্যাগে দৃশ্যমান হবে ।

যদি এইচটিএমএল থেকে নিয়ন্ত্রকের কাছে ইনপুট বাঁধতে চান: -
3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

এখানে আপনি যদি nameনিয়ামকটিতে ইনপুট ব্যবহার করতে চান তবে,

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng-modelআমাদের দৃষ্টিভঙ্গিকে বেঁধে রাখে এবং এটিকে প্রকাশের উদ্দেশ্যে রেন্ডার করে {{ }}।
ng-modelব্যবহারকারী যা দেখায় এবং সেই সাথে ব্যবহারকারী ইন্টারঅ্যাক্ট করে তা এমন ডেটা।
সুতরাং AngularJs এ ডেটা বাঁধাই সহজ।

Answer 13

Angular.js আমরা প্রতিটি মডেল দেখার জন্য নজর রাখি। যখনই কোনও মডেল পরিবর্তন করা হয়, তখন একটি "এনজি-নোংরা" শ্রেণিটি মডেলটিতে সংযুক্ত করা হয়, সুতরাং নজরদারি সমস্ত মডেলকে পর্যবেক্ষণ করবে যার "এনজি-নোংরা" শ্রেণি রয়েছে এবং নিয়ামক এবং তার বিপরীতে তাদের মানগুলি আপডেট করে।

Answer 14

ডেটা বাইন্ডিং:

ডেটা বাঁধাই কি?

যখনই ব্যবহারকারীর ভিউতে ডেটা পরিবর্তন হয়, স্কোপ মডেলের সেই পরিবর্তনের একটি আপডেট ঘটে এবং এর বিপরীতে দেখা যায়।

কিভাবে এটা সম্ভব?

সংক্ষিপ্ত উত্তর: ডাইজেস্ট চক্রের সাহায্যে।

বিবরণ: কৌণিক জেএস স্কোপ মডেলটিতে নজরদারি সেট করে, যা যদি মডেলটিতে কোনও পরিবর্তন হয় তবে শ্রোতাদের ফাংশনটি চালিত করে।

$scope.$watch('modelVar' , function(newValue,oldValue){

// নতুন মান সহ ডোম আপডেট কোড

});

সুতরাং কখন এবং কিভাবে প্রহরী ফাংশন বলা হয়?

ডাইজেস্ট চক্রের অংশ হিসাবে ওয়াচচার ফাংশন বলা হয়।

ডাইজেস্ট চক্রটিকে এনজি-মডেল, এনজি-বাইন্ড, $ টাইমআউট, এনজি-ক্লিক এবং অন্যদের মতো নির্দেশ / পরিষেবাদিতে নির্মিত কৌণিক জেসের অংশ হিসাবে স্বয়ংক্রিয়ভাবে ট্রিগারড বলা হয়। যা আপনাকে ডাইজেস্ট চক্রকে ট্রিগার করতে দেয়।

ডাইজেস্ট চক্র ফাংশন:

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

অর্থাত$rootScope.$apply()

দ্রষ্টব্য: $ প্রয়োগ () সমান। রুটস্কোপের সমান gest ডাইজেস্ট () এর অর্থ মূর্খ চেকিংটি মূল বা উপরে থেকে শুরু হয় বা কৌনিক জেএস অ্যাপ্লিকেশনটির সমস্ত বাচ্চার জন্য পিতামাতার স্কোপ থেকে শুরু হয়।

উপরোক্ত বৈশিষ্ট্যগুলি উল্লিখিত সংস্করণগুলির জন্য ব্রাউজারগুলিতে আইই কাজ করে ঠিক আপনার অ্যাপ্লিকেশনটি কৌনিক জেএস অ্যাপ্লিকেশন যার অর্থ আপনি স্ক্রিপ্ট ট্যাগে রেখাচিত কৌণিক ফ্রেম ফ্রেম স্ক্রিপ্ট ফাইলটি ব্যবহার করছেন making

ধন্যবাদ.