একটি কৌনিক জেএস নির্দেশ কী?

Question

আমি AngularJS ডকুমেন্টেশন এবং বেশ কয়েকটি টিউটোরিয়ালের মাধ্যমে পড়তে বেশ সময় ব্যয় করেছি এবং ডকুমেন্টেশনটি কতটা অগ্রহণযোগ্য তা নিয়ে আমি বেশ অবাক হয়েছি।

আমার কাছে একটি সাধারণ, উত্তরযোগ্য প্রশ্ন রয়েছে যা AngularJS বাছাই করার জন্য অন্যদের জন্যও কার্যকর হতে পারে:

একটি কৌনিক জেএস নির্দেশ কী?

কোথাও কোনও নির্দেশকের একটি সাধারণ, সুনির্দিষ্ট সংজ্ঞা থাকতে হবে, তবে অ্যাঙ্গুলারজেএস ওয়েবসাইটটি এই আশ্চর্যরূপে অকেজো সংজ্ঞা দেয়:

হোম পেজে :

দিকনির্দেশগুলি অ্যাঙ্গুলারজেএস-এ উপলব্ধ একটি অনন্য এবং শক্তিশালী বৈশিষ্ট্য। নির্দেশিকাগুলি আপনাকে আপনার অ্যাপ্লিকেশনের জন্য নির্দিষ্ট নতুন এইচটিএমএল সিনট্যাক্স আবিষ্কার করতে দেয়।

ইন ডেভেলপার ডকুমেন্টেশন :

নির্দেশাবলী হ'ল এইচটিএমএল নতুন কৌশল শেখানোর একটি উপায়। ডিওএম সংকলনের সময় দিকনির্দেশনাগুলি এইচটিএমএলের বিরুদ্ধে মিলে যায় এবং কার্যকর হয়। এটি নির্দেশকে আচরণ নিবন্ধন করতে বা DOM রুপান্তর করতে অনুমতি দেয়।

এবং নির্দেশনা সম্পর্কে একাধিক আলোচনার বিষয় রয়েছে যা বিদ্রূপাত্মকভাবে মনে হয় যে শ্রোতা তারা ইতিমধ্যে বুঝতে পেরেছে।

সুস্পষ্ট রেফারেন্সের জন্য, যে কোনও নির্দেশিকা কী তা ব্যাখ্যা করে তার একটি সংক্ষিপ্ত সংজ্ঞা দেওয়ার জন্য, কেউ কি প্রস্তাব দিতে সক্ষম হবে:

1. এটি কী ( উদাহরণ হিসাবে jQuery এর স্পষ্ট সংজ্ঞা দেখুন )
2. এটি কোন বাস্তব সমস্যা এবং পরিস্থিতি সমাধানের উদ্দেশ্যে
3. এটি কী নকশার প্যাটার্নটি মূর্ত করে, বা বিকল্পভাবে, এটি কীভাবে অ্যাঙ্গুলারজেএস-এর এমওসি / এমভিডাব্লু মিশনে ফিট করে ।

Comments

আপনি আমাকে এখানে পেয়েছিলেন ... উদাহরণ হিসাবে jQuery এর স্পষ্ট সংজ্ঞা দেখুন।

— জোশুমাবিনা

এটি স্ট্যাক ওভারফ্লোতে 2012 এ কেমন ছিল তা নিশ্চিত নয়, তবে আমি কেবল এই প্রশ্নটি সংশোধন করে "কৌণিক-নির্দেশিকা" ট্যাগ যুক্ত করেছি। এর ট্যাগ তথ্য আসলে বেশ পরিষ্কার সংজ্ঞা দেয়। এছাড়াও, আমি লক্ষ্য করেছি যে আমি বিকাশকারী দস্তাবেজগুলিতে দ্বিতীয় উদ্ধৃতিটি খুঁজে পাচ্ছি না ...

— user4642212

Answer 1

এটি কী (উদাহরণ হিসাবে jQuery এর স্পষ্ট সংজ্ঞা দেখুন)?

দিকনির্দেশনাটি মূলত একটি ফাংশন ^exec যা কৌনিক সংকলকটি ডিওএম-এ খুঁজে পাওয়ার সাথে সাথে সম্পাদন করে। ফাংশন (গুলি) প্রায় যা কিছু করতে পারে, সে কারণেই আমি মনে করি যে নির্দেশনা কী তা ব্যাখ্যা করা বরং কঠিন difficult প্রতিটি নির্দেশকের একটি নাম রয়েছে (যেমন এনজি-রিপিট, ট্যাবগুলি, মেক-আপ আপনার নিজের) এবং প্রতিটি নির্দেশ নির্ধারণ করে যে এটি কোথায় ব্যবহার করা যেতে পারে: একটি মন্তব্যে উপাদান, গুণ, শ্রেণি।

^† একটি নির্দেশিকা সাধারণত একটি (পোস্ট) লিঙ্ক ফাংশন থাকে। জটিল নির্দেশের একটি সংকলন ফাংশন, একটি প্রাক-লিঙ্ক ফাংশন এবং পোস্ট-লিঙ্ক ফাংশন থাকতে পারে।

কোন ব্যবহারিক সমস্যা এবং পরিস্থিতি সমাধানের উদ্দেশ্যে এটি করা হয়েছে?

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

দিকনির্দেশকরা এইচটিএমএল - কিছু পুনরায় ব্যবহারযোগ্য উপাদানগুলিতে এইচটিএমএলকে গুছিয়ে তুলতে পারেন। যদি আপনি নিজেকে অনেকগুলি এইচটিএমএল টানতে এনজি-অন্তর্ভুক্ত ব্যবহার করে দেখেন তবে সম্ভবত সময়টি রিফেক্টরকে নির্দেশের দিকে নিয়ে যাওয়ার।

এটি কী নকশার প্যাটার্নটি মূর্ত করে, বা বিকল্পভাবে, এটি কীভাবে কৌণিক সংক্রান্ত এমভিসি / এমভিডাব্লু মিশনে ফিট করে?

দিকনির্দেশকাগুলি হ'ল আপনি যেখানে ডিওএমকে পরিচালনা করেন এবং ডিওএম ইভেন্টগুলি ধরেন। এই কারণেই নির্দেশকের সংকলন এবং লিঙ্ক ফাংশন উভয়ই "উপাদান "টিকে একটি আর্গুমেন্ট হিসাবে গ্রহণ করে। আপনি পারেন

• নির্দেশকে প্রতিস্থাপন করতে একগুচ্ছ এইচটিএমএল (অর্থাত্ একটি টেম্পলেট) সংজ্ঞায়িত করুন
• ইভেন্টগুলিকে এই উপাদানটিকে (বা এর শিশুদের সাথে) আবদ্ধ করুন
• একটি ক্লাস যুক্ত / সরান
• () মানটি পরিবর্তন করুন
• একই উপাদানটিতে সংজ্ঞায়িত বৈশিষ্ট্যের পরিবর্তনের জন্য নজর রাখুন (আসলে এটি দেখা যায় এমন গুণাবলীর মান - এগুলি স্কোপ বৈশিষ্ট্য, তাই নির্দেশক পরিবর্তনের জন্য "মডেল" দেখেন)
• প্রভৃতি

---

HTML এ আমরা ভালো জিনিস আছে <a href="...">, <img src="...">, <br>, <table><tr><th>। একটি, href, img, src, br, টেবিল, tr, এবং কী কী আপনি বর্ণনা করবেন? এটিই একটি নির্দেশনা dire

Comments

চিহ্ন, ধন্যবাদ। আমি মনে করি এটি পরিষ্কার এবং সম্ভবত একটি সঠিক উত্তরের নিকটতম। আমি মনে করি নির্দেশাবলী সর্বদা এইচটিএমএল ট্যাগের সাথে আবদ্ধ থাকে? সুতরাং সম্ভবত এটি আরও সঠিকভাবে বলা যায় যে নির্দেশিকা একটি ফাংশন যা কোনও এইচটিএমএল ট্যাগের সাথে আবদ্ধ। যেমনটি এটি HTML ভাষাকে ঘোষণামূলকভাবে প্রসারিত করতে দেয়।

— টহস্টার

ঠিক আছে, একটি নির্দেশনায় একটি মন্তব্যে ব্যবহার করা যেতে পারে, সুতরাং সমস্ত নির্দেশকে এইচটিএমএল ট্যাগের সাথে আবদ্ধ হতে হবে না। উদাহরণস্বরূপ,<!-- directive: my-directive exp -->

— শে

চিহ্নিত করুন, এটি কোনও নির্দেশের অপ্রচলিত ব্যবহার হবে? অর্থাত্ নির্দেশাবলী প্রচলিতভাবে ব্যবহৃত হয় এবং এইচটিএমএল প্রসারিত করার উদ্দেশ্যে purp

— টহস্টার

ঠিক আছে আমি এখন আরও ভাল বোঝার আছে। এটি সম্পর্কে চিন্তাভাবনার এক উপায়: ১. ডিএসএল সাধারণত সিনট্যাক্স গাছের প্রতিনিধিত্ব করে ২. এইচটিএমএল ডিওএম একটি ডিএসএল সিনট্যাক্স ট্রি তবে এটি একটি অনমনীয়: ট্যাগগুলি বেশিরভাগ দৃ rig়ভাবে নকশাকৃত এবং উদ্দেশ্যযুক্ত, এবং এক্সটেনসিবল নয়। ৩. অ্যাঙ্গুলারজেএস এবং বিশেষত দিকনির্দেশক প্রক্রিয়া, বিকাশকারীদের কাস্টম ট্রি নোডগুলি তৈরি করার অনুমতি দিয়ে এইচটিএমএল ডিওএমকে আরও নমনীয় করে তোলে। এই নোডগুলি নতুন আচরণগুলি বা বিদ্যমান আচরণগুলির (

— সম

@ মারকরাজাকক আপনার শেষ অনুচ্ছেদে আমি লড়াই করছি। সরল <div></div>কি একটি নির্দেশনা? আপনি হ্যাঁ বলেছেন। কিন্তু আছে কোন প্রসাধন এখানে .People এখানে বলছে যে এই হয় (উপাদান, বর্গ, মন্তব্য অ্যাট্রিবিউট এর মাধ্যমে) একটি এইচটিএমএল করে DOM জন্য চিহ্নিতকারী পুনরায় । আপনি কি স্পষ্ট করতে পারেন? (আমি সেই কারণের বিষয়ে কথা বলছি না যেখানে আপনি যেমন সরল উপাদানগুলির জন্য নির্দেশিকা তৈরি করতে পারেন <div>)

— রই নমির

Answer 2

কৌণিক নির্দেশের জন্য সম্ভবত একটি সহজ এবং প্রাথমিক সংজ্ঞা হতে পারে

অ্যাঙ্গুলারজেএস নির্দেশাবলী (এনজি-ডিরেক্টরি) হ'ল এইচটিএমএল প্রসারিত করতে এনগুলার দ্বারা ব্যবহৃত একটি এনজি প্রিফিক্স (এনজি-মডেল, এনজি-অ্যাপ, এনজি-রিপিট, এনজি-বাইন্ড) সহ এইচটিএমএল বৈশিষ্ট্য। ( থেকে: ডাব্লু 3 স্কুলস কৌণিক টিউটোরিয়াল )

এর কয়েকটি উদাহরণ হবে

NG-অ্যাপ নির্দেশ একটি AngularJS আবেদন সংজ্ঞায়িত করে।

NG মডেল নির্দেশ আবেদন ডেটাতে এইচটিএমএল নিয়ন্ত্রণ (ইনপুট, নির্বাচন পাঠ্য এলাকা) এর মান binds।

NG-বেঁধে এইচটিএমএল ভিউতে নির্দেশ বেঁধে অ্যাপ্লিকেশন ডেটা।

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

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

Answer 3

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

সেখানে নির্দেশিকা রয়েছে যাতে আপনি সঠিক শব্দার্থক ব্যবহার করে আরও জটিল উপাদান (উইজেট) তৈরি করতে পারেন। নির্দেশাবলীর Angularjs উদাহরণটি একবার দেখুন - তারা ট্যাব ফলকে সংজ্ঞায়িত করছে (যা নিয়মিত এইচটিএমএলে অবশ্যই বৈধ নয়)। এটি কাঠামো তৈরি করতে ডিভ-এস বা স্প্যানের মতো ব্যবহারের চেয়ে আরও স্বজ্ঞাত যা পরে ট্যাব ফলকের মতো দেখতে স্টাইলযুক্ত ।

Comments

আমি যুক্ত করেছি যা আমি মনে করি প্রযুক্তিগত ব্যাখ্যা কিছুটা কম less

— raam86

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

— টহস্টার

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

— WTK

Answer 4

অ্যাঙ্গুলারজেএস-এর নির্দেশাবলী হ'ল এইচটিএমএল ডিওএম উপাদানগুলির জন্য এইচটিএমএল পুনরায় চিহ্নিতকারী যেমন একটি অ্যাট্রিবিউট (সীমাবদ্ধ- এ), উপাদানটির নাম (সীমাবদ্ধ- ই), মন্তব্য (সীমাবদ্ধ- এম) বা সিএসএস শ্রেণি (সীমাবদ্ধ - সি) যা AngularJS এর ​​এইচটিএমএল সংকলক ($ সংকলন করুন) সেই ডিওএম উপাদানটিতে একটি নির্দিষ্ট আচরণ করতে বা এমনকি ডিওএম উপাদান এবং এর শিশুদের রূপান্তর করতে। কিছু উদাহরণ এনজি-বাইন্ড, এনজি-হাইড / শো ইত্যাদি are

Answer 5

হোমপেজটি এ সম্পর্কে খুব স্পষ্ট: আপনি যখন শেষ বিভাগে ট্যাবগুলি নিয়ে যান:

আমরা একটি কাস্টম tabs উপাদান সহ এইচটিএমএল এর শব্দভাণ্ডার প্রসারিত করেছি । tabsজটিল এইচটিএমএল গঠন ও আচরণ ট্যাবগুলির রেন্ডারিং জন্য প্রয়োজনীয় বিমূর্ত। ফলাফলটি আরও পঠনযোগ্য দর্শন এবং খুব সহজেই পুনরায় ব্যবহারযোগ্য সিন্ট্যাক্স ""

তারপরে পরবর্তী ট্যাবে:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

সুতরাং আপনি এইচটিএমএল উপাদানগুলি আবিষ্কার করতে পারেন tabsএবং কৌণিকগুলি সেই উপাদানগুলির রেন্ডারিং হ্যান্ডেল করতে দিন।

Comments

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

— টহস্টার

হ্যাঁ! তারা তৈরি করা এই ঝাঁকুনিটি পরীক্ষা করতে পারেন। প্রকৃত এইচটিএমএল এইচটিএমএল ফলকে ভিন্ন।

— raam86