এনজি-অ্যাপ্লিকেশন বনাম ডেটা-এনজি-অ্যাপ, পার্থক্য কী?


230

আমি বর্তমানে দিকে তাকিয়ে আছি এই শুরু টিউটোরিয়াল ভিডিওটি জন্যangular.js

কিছু মুহুর্তে (12'40 "পরে) স্পিকার বলে যে বৈশিষ্ট্যগুলি ng-appএবং ট্যাগের data-ng-app=""মধ্যে কমবেশি সমতুল্য হয় <html>এবং তেমনি হয় ng-model="my_data_bindingএবং data-ng-model="my_data_binding"স্পিকার বলেন যে এইচটিএমএলটি বিভিন্ন বৈধকারীর মাধ্যমে বৈধ হবে, কোন বৈশিষ্ট্যটির উপর নির্ভর করে ব্যবহার করা হয়েছে।

ng-উপসর্গের বিপরীতে আপনি দুটি উপায়ে পার্থক্য ব্যাখ্যা করতে পারেন data-ng-?


উত্তর:


403

ভাল প্রশ্ন. পার্থক্যটি সহজ - এইচটিএমএল 5 বৈধকারকরা যেমন কোনও সম্পত্তিতে ত্রুটি ফেলবে তা ছাড়া দুজনের মধ্যে একেবারেই কোনও পার্থক্য নেই ng-app, তবে তারা পূর্বের data-মতো কোনও কিছুর জন্য ত্রুটি ফেলে না data-ng-app

সুতরাং আপনার প্রশ্নের উত্তর দেওয়ার জন্য, data-ng-appআপনি যদি নিজের HTML টি বৈধ করে তুলতে চান তবে কিছু সহজ করুন।

মজাদার ঘটনা: আপনি x-ng-appএকই প্রভাব ব্যবহার করতে পারেন ।


4
ডেটা উপসর্গটি কোনও এনজি অ্যাট্রিবিউটকে সঠিকভাবে কাজ করা থেকে বিরত করবে? (যেমন, "ডেটা-এনজি-রিপিট")?
টোনজ্যাক

3
মনে হচ্ছে সিপিইউ চক্রের এইরকম অপচয় যেমন ম্যানুয়ালি বন্ধ করে দেওয়া যায় data-এবং x-ng-স্টাফ গ্রহণ করতে এইচটিএমএল বৈধতা নিয়ম কেন পরিবর্তন করা যায় না ?
ডেভএলগার


1
@ ডেভএলগার: আপনি যেমন বলেছিলেন তেমন করা খারাপ ধারণা। যদি এখানে বিভিন্ন উপসর্গের সাথে অ্যাংগুলার হিসাবে প্রচুর বিখ্যাত সরঞ্জাম থাকে তবে আপনি চান যে এইচটিএমএল তাদের উপসর্গ যুক্ত করতে তাদের সমস্ত অনুসরণ করে?!?! ক্রুমিয়া যেমন বলেছেন যে এটি এইচটিএমএল প্রসারিত করার উপায়।
দাসি অরলেয়ান্দো

65

Angularjs ডকুমেন্টেশন থেকে

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

স্বাভাবিককরণ প্রক্রিয়াটি নিম্নরূপ:

স্ট্রিপ এক্স- এবং ডেটা- উপাদান / গুণাবলীর সামনে থেকে। :, -, বা _-সীমাবদ্ধ নামটি উট কেসে রূপান্তর করুন। এনজিবিন্ডের সাথে মেলে এমন কয়েকটি উপাদানের সমতুল্য উদাহরণ এখানে রয়েছে:

সমস্ত নীচের উপরের বিবৃতি উপর ভিত্তি করে বৈধ নির্দেশিকা

1. এনজি-বাইন্ড
2. এনজি: বাইন্ড
3. এনজি_বাইন্ড
4. ডেটা-এনজি-বাইন্ড
5. এক্স-এনজি-বাইন্ড


তবে এটি কেবল নির্দেশের নামের সাথে তুলনা করার জন্য এটি করে। এটি আসল বৈশিষ্ট্য পরিবর্তন করে না।
রেট্রো কোডার

3
- ,: এবং _ স্বরলিপি সম্পর্কে জানা ভাল
কোড হুইস্পেরার

29

আসলে পার্থক্য মিথ্যা কাস্টম data-*গুণের বৈধ HTML5 এর স্পেসিফিকেশন । সুতরাং আপনার যদি আপনার মার্কআপটি বৈধ হওয়ার জন্য প্রয়োজন হয় তবে আপনাকে ngগুণাবলীর চেয়ে এগুলি ব্যবহার করা উচিত ।


1
আমি স্পেসিফিকেশন থেকে বুঝতে পারি যে ডেটা- * এটি ঠিক এইচটিএমএলকে বৈধতার সাথে কাজ করবে। তবে কেন এক্স- * কাজ করবে? স্পেসিফিকেশন এগুলি সম্পর্কে তাদের কোনও বিবরণ নেই।
ভ্রামার

1
এক্স- * ব্রাউজারের ব্যবহারের জন্য সংরক্ষিত। আপনার WHW এক্স সম্পর্কিত প্রশ্ন সম্পর্কে, হয় কৌণিক হিসাবে কাজ করবে নির্দিষ্টভাবে এটি তাদের কাঠামোর মধ্যে কোড করে ডেটা / এক্স এর জন্য কাজ করে তা নিশ্চিত করে। আপনি যদি কৌণিকতার জন্য x কাজ করে তা জিজ্ঞাসা করছেন, তবে আরও একটি বিতর্ক শুরু হয়। উভয়ের জন্য ভাল যুক্তি আছে। এই উত্তরটি এসও তে দেখুন: stackoverflow.com/a/17902387/339803 পৃষ্ঠাটির অন্য উত্তরটি X XHML এর জন্য বলে মনে হচ্ছে, তবে আমি নিশ্চিত নই। এগুলি পড়ার পরে আপনি এটি কী তৈরি করতে পারেন তা দেখুন। এইচটিএমএল 5 স্পেসটি
redfox05

15

সংক্ষিপ্ত উত্তর:

ng-modelএবং data-ng-modelএকই এবং সমতুল্য!


কেন?

  1. কারণ: data- উপসর্গ
    HTML5 স্পেসিফিকেশন প্রত্যাশিত যে কোনও কাস্টম বৈশিষ্ট্য উপসর্গ করা হয়েছে data-

  2. কারণ: উভয় ng-modelএবং data-ng-modelএকই এবং সমতুল্য।

AngularJS ডকুমেন্ট - সাধারনকরণ

কৌণিক একটি উপাদানটির ট্যাগ এবং বৈশিষ্ট্যের নামটি নির্ধারণ করে কোন উপাদানগুলির সাথে কোন দিকনির্দেশনা মেলে তা নির্ধারণ করে। আমরা সাধারণত তাদের কেস-সংবেদনশীল উটকেস নর্মালাইজড নাম (উদাহরণস্বরূপ ngModel) দ্বারা নির্দেশগুলি উল্লেখ করি । তবে, যেহেতু এইচটিএমএল কেস-সংবেদনশীল, তাই আমরা সাধারণত ডিওএম উপাদানগুলিতে ড্যাশ-বিস্মৃত বৈশিষ্ট্যগুলি ব্যবহার করে (উদাহরণস্বরূপ ng-model) লোয়ার-কেস ফর্মগুলি দ্বারা ডোম-এর নির্দেশাবলী উল্লেখ করি ।

স্বাভাবিককরণ প্রক্রিয়াটি নিম্নরূপ:
1. স্ট্রিপ x-এবং data-উপাদান / গুণাবলীর সামনে থেকে।
2. রূপান্তর করুন :, -অথবা _করার -delimited নাম camelCase

উদাহরণ স্বরূপ
নিম্নলিখিত ফর্মগুলি সমস্ত সমতুল্য এবং এনজিবিন্ডের নির্দেশের সাথে মেলে:

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>

2

আপনি যদি নিজের পৃষ্ঠা HTML টি বৈধ করতে চান তবে আপনি এনজি- এর পরিবর্তে ডেটা-এনজি- ব্যবহার করতে পারেন।


2
ওপি বুঝতে পারে যে এগুলি পরস্পর পরিবর্তিতভাবে ব্যবহার করা যেতে পারে, তবে তারা যদি "একই" কাজ করে তবে দুটি কেন উপলব্ধ তা জানতে আগ্রহী। আমি বিশ্বাস করি যে এগুলিকে কী আলাদা করে তোলে তার একটি ব্যাখ্যা আরও মূল্যবান উত্তর হবে।
চার্লস ওয়াটসন

1

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

  1. এটি আপনার এইচটিএমএলকে বৈধ করে তোলে, এর অর্থ এটি ডোমডোকামেন্ট (পিএইচপি) বা অন্যদের মতো এইচটিএমএল (সার্ভার ভিত্তিক) পার্সার ব্যবহার করতে পারে। এই পার্সারগুলি প্রায়শই ভালভাবে গঠিত এইচটিএমএল এ ব্যর্থ হয়।
  2. কৌণিক বৈশিষ্ট্যটিকে স্বাভাবিক করে তোলে, তবে মনে রাখবেন যে এটি ক্লায়েন্টের উপর, সার্ভারে নয়।
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.