আমি কিভাবে $ সুযোগ ব্যবহার করব। $ ঘড়ি এবং $ সুযোগ। $ 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 কারণ এনজি-ক্লিক কোন ঘড়ি তৈরি করে না।

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

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

আবেদন $ ()

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

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

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

• AngularJS - ঘড়ি বুঝতে, $ ঘড়ি, $ watchroup, $ watchCollection, ng- পরিবর্তন

• AngularJS - ডাইজেস্ট চক্র বুঝতে (ডাইজেস্ট ফেজ বা ডাইজেস্ট প্রক্রিয়া বা ডাইজেস্ট লুপ)

• AngularJS টিউটোরিয়াল - $ প্রয়োগ প্রযোজ্য এবং $ ডাইজেস্ট (গভীরতার মধ্যে)

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

উপরের ছবিতে, "$ 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 ।