আমি কিভাবে $ সুযোগ ব্যবহার করব। $ ঘড়ি এবং $ সুযোগ। $ AngularJS এ প্রয়োগ?

angularjs-scope (5)

$scope.$watch ব্যবহার করতে আমি বুঝতে পারছি না $scope.$watch এবং $scope.$apply । অফিসিয়াল ডকুমেন্টেশন সহায়ক নয়।

আমি বিশেষভাবে বুঝতে পারছি না কি:

তারা কি ডোমে সংযুক্ত?
আমি কিভাবে মডেলের DOM পরিবর্তনগুলি আপডেট করতে পারি?
তাদের মধ্যে সংযোগ বিন্দু কি?

আমি এই টিউটোরিয়ালটি চেষ্টা করেছি, তবে এটি $watch বোঝা এবং $apply মঞ্জুর জন্য আবেদন করে।

কি $apply এবং $watch কি করবেন, এবং কিভাবে আমি যথাযথভাবে তাদের ব্যবহার করবেন?

AngularJS এ, আমরা আমাদের মডেলগুলি আপডেট করি এবং আমাদের মতামত / টেমপ্লেটগুলি "স্বয়ংক্রিয়ভাবে" (বিল্ট-ইন বা কাস্টম নির্দেশাবলী অনুসারে) DOM আপডেট করে।

$ প্রযোজ্য এবং $ ঘড়ি উভয় স্কোপ পদ্ধতি, DOM সম্পর্কিত নয়।

Concepts পৃষ্ঠা (বিভাগ "রানটাইম") $ ডাইজেস্ট লুপ, $ প্রয়োগ, $ evalAsync সারি এবং $ ঘড়ি তালিকা একটি চমত্কার ভাল ব্যাখ্যা আছে। এখানে পাঠ্য সহ যে ছবিটি রয়েছে:

কোনও কোডটি কোন সুযোগে অ্যাক্সেস করতে পারে - সাধারণত কন্ট্রোলার এবং নির্দেশাবলী (তাদের লিঙ্ক ফাংশন এবং / অথবা তাদের কন্ট্রোলার) - একটি " watchExpression " সেট আপ করতে পারে যা AngularJS সেই সুযোগের বিরুদ্ধে মূল্যায়ন করবে। যখনই AngularJS তার $ ডাইজেস্ট লুপ প্রবেশ করে তখন এই মূল্যায়ন ঘটে (বিশেষত, "$ ঘড়ি তালিকা" লুপ)। আপনি পৃথক সুযোগ বৈশিষ্ট্য দেখতে পারেন, আপনি একসাথে দুটি বৈশিষ্ট্য দেখতে একটি ফাংশন সংজ্ঞায়িত করতে পারেন, আপনি একটি অ্যারের দৈর্ঘ্য, ইত্যাদি দেখতে পারেন।

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

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

AngularJS এই ইভেন্ট-লুপ প্রসারিত করে, AngularJS context নামে কিছু তৈরি AngularJS context ।

$ ঘড়ি ()

প্রতিবার আপনি UI এ কিছু বদ্ধ করলে আপনি $watch তালিকায় $watch ঢোকান।

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

এখানে আমাদের $scope.user , যা প্রথম ইনপুটের সাথে আবদ্ধ, এবং আমাদের $scope.pass , যা দ্বিতীয়টির সাথে আবদ্ধ। এই কাজ আমরা $watch তালিকায় দুই $watch এস যোগ করুন।

যখন আমাদের টেমপ্লেটটি লোড হয়, লিঙ্কিং ফেজে AKA, কম্পাইলার প্রতিটি নির্দেশিকা সন্ধান করবে এবং প্রয়োজনীয় সমস্ত $watch এস তৈরি করবে।

AngularJS $watch , $watchcollection এবং $watch(true) । নীচের গভীরতার মধ্যে watchers থেকে নেওয়া তিনটি ব্যাখ্যা একটি সুগন্ধি চিত্র নীচে।

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });

  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });

  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);

  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();

     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}

http://jsfiddle.net/2Lyn0Lkb/

`$digest` লুপ

যখন ব্রাউজারটি এমন একটি ইভেন্ট পায় যা AngularJS প্রেক্ষাপটে পরিচালিত হতে পারে $digest লুপটি বহিস্কার করা হবে। এই লুপ দুটি ছোট loops থেকে তৈরি করা হয়। এক $evalAsync সারি প্রক্রিয়া করে, এবং অন্য এক $watch list প্রক্রিয়া করে। $digest আমাদের কাছে $watch তালিকা অনুসারে লুপ করবে

app.controller('MainCtrl', function() {
  $scope.name = "vinoth";

  $scope.changeFoo = function() {
      $scope.name = "Thalaivar";
  }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

এখানে আমাদের কেবলমাত্র এক $watch কারণ এনজি-ক্লিক কোন ঘড়ি তৈরি করে না।

আমরা বাটন চাপুন।

ব্রাউজারটি এমন একটি ইভেন্ট পায় যা AngularJS প্রেক্ষাপটে প্রবেশ করবে
$digest লুপ চালানো হবে এবং পরিবর্তনের জন্য প্রতি $ ঘড়ি জিজ্ঞাসা করবে।
$ Scope.name এর পরিবর্তনের জন্য যে $watch দেখছিল তা $watch পরিবর্তন থেকে একটি পরিবর্তন প্রতিবেদন করে, এটি অন্য $digest লুপকে জোর দেবে।
নতুন লুপ কিছুই রিপোর্ট।
ব্রাউজারটি নিয়ন্ত্রণ ফিরে পায় এবং এটি $ scope.name এর নতুন মান প্রতিফলিত করে DOM আপডেট করবে
এখানে গুরুত্বপূর্ণ বিষয় যে AngularJS প্রেক্ষাপটে প্রবেশ করে প্রতিটি ইভেন্ট একটি $digest লুপ চালানো হবে। এর মানে হল যে প্রতিবার যখন আমরা একটি ইনপুট একটি চিঠি লিখি, লুপ এই পৃষ্ঠায় প্রতি $watch চেক চালানো হবে।

আবেদন $ ()

কোনও ইভেন্টটি চালানো হলে আপনি $apply কল করতে কল করেন তবে এটি কৌণিক-প্রসঙ্গের মধ্য দিয়ে যাবে, কিন্তু যদি আপনি এটি কল না করেন তবে এটি বাইরে চলবে। এটা ঐটার মতই সহজ. $apply $digest() লুপটিকে অভ্যন্তরীণভাবে কল করবে এবং এটি সমস্ত ঘড়ির উপরে পুনরাবৃত্তি করবে যা DOM আপডেট করা মানের সাথে আপডেট করা হয়েছে তা নিশ্চিত করতে।

$apply() পদ্ধতিটি দর্শকরা সমগ্র $scope শৃঙ্খলে ট্রিগার করবে যখন $digest() পদ্ধতিটি কেবলমাত্র বর্তমান $scope এবং তার children দর্শকদের ট্রিগার করবে। যখন কোনও উচ্চ-স্তরের $scope বস্তুগুলির স্থানীয় পরিবর্তনগুলি সম্পর্কে জানতে হবে না, তখন আপনি $digest() ব্যবহার করতে পারেন।

আমি খুব গভীরে ভিডিও খুঁজে পেয়েছি যা $watch , $apply , $digest এবং ডাইজেস্ট চক্রগুলিতে:

নিম্নলিখিত ভিডিওগুলিতে ধারণাগুলি ব্যাখ্যা করার জন্য ব্যবহৃত কয়েকটি স্লাইড অনুসরণ করা হয়েছে (শুধুমাত্র উপরের ক্ষেত্রে যদি লিঙ্কগুলি সরিয়ে ফেলা হয় / কাজ না করে)।

উপরের ছবিতে, "$ scope.c" দেখার পরে এটি ডেটা বাইন্ডিংগুলিতে (মার্কআপে) ব্যবহার করা হয় না। অন্য দুটি ( $scope.a এবং $scope.b ) দেখা হবে।

উপরের চিত্র থেকে: সংশ্লিষ্ট ব্রাউজার ইভেন্টের উপর ভিত্তি করে, AngularJS ইভেন্টটি ধরে নেয়, ডাইজেস্ট চক্র সঞ্চালন করে (পরিবর্তনগুলির জন্য সমস্ত ঘড়ির মাধ্যমে যায়), ঘড়ির ফাংশনগুলি চালায় এবং DOM আপডেট করে। ব্রাউজারের ইভেন্ট না থাকলে, ডাইজেস্ট চক্রটি $apply বা $digest ব্যবহার করে নিজে ট্রিগার করা যেতে পারে।

আরো $apply এবং $digest :

শুধু উপরের সব পড়া, বিরক্তিকর এবং ঘুমন্ত (দুঃখিত কিন্তু সত্য)। অত্যন্ত প্রযুক্তিগত, গভীরভাবে, বিস্তারিত, এবং শুষ্ক। কেন আমি লিখছি? AngularJS বৃহদায়তন কারণ, আন্তঃ-সংযুক্ত ধারণাগুলি অনেককে বাদামে পরিণত করতে পারে। আমি প্রায়ই নিজেকে জিজ্ঞেস করলাম, আমি কি তাদের বুঝতে পারব না? না! কারণ খুব অল্প কয়েকটি টার্মিনোজির জন্য ডামি ভাষাতে প্রযুক্তিকে ব্যাখ্যা করতে পারে! ঠিক আছে, আমাকে চেষ্টা করুন:

1) তারা সব ইভেন্ট চালিত জিনিস। (আমি হাসি শুনতে, কিন্তু পড়া)

আপনি যদি ঘটনা চালিত না জানেন তবে আপনি পৃষ্ঠাটিতে একটি বোতাম স্থাপন করুন, "অন-ক্লিক" ব্যবহার করে এটি w / একটি ফাংশনটি হুক করুন, ব্যবহারকারীরা এটির উপর ক্লিক করার জন্য এটির উপর ক্লিক করার জন্য অপেক্ষা করুন ফাংশন। অথবা SQL সার্ভার / ওরাকলের "ট্রিগার" মনে করুন।

2) $ ঘড়ি "অন-ক্লিক" হয়।

এটি সম্পর্কে বিশেষ কি এটি পরামিতি হিসাবে 2 টি ফাংশন নেয়, প্রথমটি ইভেন্টটি থেকে মান দেয়, দ্বিতীয়টি মানটিকে বিবেচনায় নেয় ...

3) $ ডাইজেস্ট হ'ল যিনি বসের অস্তিত্বহীন , ব্লা-ব্লা-ব্লা, কিন্তু একটি ভাল বসের সন্ধান করেন।

4) $ প্রযোজ্য আপনি যখন এটি নিজে করতে চান তখন আপনাকে পথটি দেয় , যেমন একটি ব্যর্থ-প্রমাণ (যদি অন-ক্লিক ক্লিক না করে তবে আপনি এটি চালানোর জন্য বাধ্য হন।)

এখন, এর চাক্ষুষ করা যাক। এই ধারণাটি দখল করার জন্য এটি আরও সহজ করে তুলুন:

রেস্তোরা তে,

- দর্শকদের কাছ থেকে আদেশ নিতে অনুমিত হয়, এই হয়

$watch(
  function(){return orders;},
  function(){Kitchen make it;}
);

- ম্যানেজারগুলি সমস্ত ওয়েটার জাগ্রত, গ্রাহকদের কাছ থেকে পরিবর্তনগুলির কোনও সাইন প্রতিক্রিয়া জানানোর জন্য প্রায় চলমান। এটি $digest()

- অনুরোধের ভিত্তিতে প্রত্যেককে ড্রাইভ করার জন্য মালিকের সর্বোচ্চ শক্তি রয়েছে, এটি $apply()

$watchGroup এবং $watchCollection পাশাপাশি আছে। বিশেষত, $watchGroup সত্যিই সহায়ক, যদি আপনি কোনও বস্তুর আপডেট করতে কোনও ফাংশন কল করতে চান যার মধ্যে এমন বস্তুতে একাধিক বৈশিষ্ট্য রয়েছে যা ডোম বস্তু নয়, উদাহরণস্বরূপ ক্যানভাস, ওয়েব জিএল বা সার্ভার অনুরোধে অন্য দৃশ্য। এখানে, ডকুমেন্টেশন link ।

আমি কিভাবে $ সুযোগ ব্যবহার করব। $ ঘড়ি এবং $ সুযোগ। $ AngularJS এ প্রয়োগ?

angularjs-scope (5)

$digest লুপ

আবেদন $ ()

`$digest` লুপ