কৌনিক উপাদানগুলি কীভাবে তৈরি করা যায় এবং এগুলি সর্বত্র ব্যবহার করা যায়

কৌণিক হ'ল দ্বিতীয় বৃহত্তম বহুল ব্যবহৃত জাভাস্ক্রিপ্ট-ভিত্তিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক (যদি আমরা AngularJs এবং কৌণিক 2+ গণনা করি তবে প্রথম)। কৌণিক হ'ল গুগল সমর্থিত একটি কাঠামো। এটি ২০১০ সালে অ্যাঙ্গুলারজেগুলির বেশিরভাগ অ্যাঙ্গুলারজেগুলির পূর্ববর্তী সংস্করণে সম্পূর্ণরূপে নতুনভাবে নকশিত হওয়ার পরে এটি মুক্তি পেয়েছিল Ang সুতরাং কি কৌণিক আবেদনময় করে তোলে।

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

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

আসুন আমাদের প্রথম কোণ উপাদান তৈরি করুন।

আমাদের প্রকল্পটি তৈরি করতে আমাদের অ্যাংুলারসিএলআই ইনস্টল করতে হবে (এনপিএম ইনস্টল-জি @ কৌণিক / ক্লিপ) এবং তারপরে আমরা আমাদের নতুন প্রকল্পটি এর সাথে তৈরি করব:

এনজি নিউ

তৈরি প্রকল্পের মধ্যে রয়েছে:

  • প্রমিত কোণ প্রকল্প।
  • সমস্ত নির্ভরতা নোড মডিউল ফোল্ডারে ইনস্টল করা আছে
  • প্রতিটি উপাদান জন্য ফাইল পরীক্ষা করুন।

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

এখন যেহেতু আমাদের কৌণিক উপাদানটি চালু এবং চলছে, আমরা এটি কৌণিক উপাদানটি একটি ওয়েব উপাদান হিসাবে তৈরি করতে ব্যবহার করতে পারি। এই বৈশিষ্ট্যটি কৌনিক উপাদানগুলি কাস্টম আইটেম হিসাবে প্যাকেজ করতে দেয় যা কৌণিক 6 প্রকাশের সাথে প্রবর্তিত হয়েছিল।

এটি করার জন্য, আপনাকে প্রথমে কিছু নির্ভরতা ইনস্টল করতে হবে।

এনপিএম ইনস্টল করুন - @ কোণ / উপাদানগুলি সংরক্ষণ করুন
এনপিএম ইনস্টল করুন - @ ওয়েব কম্পোনেন্ট / ওয়েব কম্পোনেন্টসগুলি সংরক্ষণ করুন
এনপিএম ইনস্টল করুন - ডকুমেন্ট ট্যাব আইটেমটি সংরক্ষণ করুন

কৌণিক.জসন ফাইলে আপনাকে ডকুমেন্ট-রেজিস্টার-এলিমেন্ট.জেএস ফাইলটি আমদানি করতে হবে।

পরবর্তী পদক্ষেপটি হ'ল আমাদের অ্যাপমোডুল বুটস্ট্র্যাপগুলি যেভাবে চালায় সেগুলি পরিবর্তন করা। এটি করার জন্য, অ্যাপ্লিকেশনটিকে মডিউলটির সাহায্যে বুট করা থেকে বিরত রাখতে আমাদের বুটস্ট্র্যাপ অ্যারের নাম পরিবর্তন করে এন্ট্রি কম্পোনেন্টে রাখতে হবে।

@ কোণ / কোর থেকে কাস্টম উপাদান আমদানি করতে ইনজেক্টরটি তৈরি করতে পরবর্তী ক্লিক করুন এবং @ কৌনিক / উপাদান থেকে কাস্টমএলেমেন্ট তৈরি করুন। এই ফাংশনটি একটি এনজিইলেমেন্ট কনস্ট্রাক্টর ক্লাস প্রদান করে যা আমরা একটি নির্দিষ্ট এইচটিএমএল ট্যাগের সাথে সংযুক্ত করি।

শেষ অবধি, বুটস্ট্র্যাপ ফাংশনটিকে ওভাররাইড করতে আমাদের এনজিডো বুটস্ট্র্যাপ যুক্ত করতে হবে।

ইনজেক্টরটি মডিউলটির প্রসঙ্গে একটি রেফারেন্স। এইভাবে, একই অ্যাপ্লিকেশনটিতে তৈরি সমস্ত উপাদান একই প্রসঙ্গে ভাগ করতে পারে এবং একটি একক কৌণিক অ্যাপ্লিকেশন গঠন করতে পারে। তারা একে অপরের সাথে যোগাযোগ করতে পারে, রাউটারটি ভাগ করতে এবং একই এনএনআরএক্স স্টোরেজ ব্যবহার করতে পারে।

আপনি আমার গিথুব সংগ্রহস্থলের পুরো উদাহরণটি খুঁজে পেতে পারেন

কোনও ভ্যুজেএস উপাদানগুলিতে আপনার কাস্টম কোণ উপাদানটি ব্যবহার করুন:

কোনও ভ্যুজেএস উপাদানগুলিতে আপনার কাস্টম কৌণিক উপাদানটি ব্যবহার করতে, আপনাকে আপনার তৈরি জেএস ফাইলগুলি এবং পাবলিক ফোল্ডারে ইনডেক্স html ফাইলে স্টাইলস সিএসএস ফাইল আমদানি করতে হবে।

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

পলিমারে আপনার কৌণিক কাস্টম উপাদানটি ব্যবহার করুন:

পলিমার উপাদানটিতে কৌণিক কাস্টম উপাদানটি ব্যবহার করতে, আপনাকে তৈরি জাভাস্ক্রিপ্ট ফাইলগুলি আমদানি করতে হবে। প্রধান, রানটাইম, পলিফিলস এবং রানটাইম এবং উপাদানটির HTML টেমপ্লেটে ট্যাগটি .োকান।

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

টার্গেট-প্রোপ = "{{হোস্টপ্রপ :: টার্গেট-চেঞ্জ-ইভেন্ট}}"

"প্রতিক্রিয়া" উপাদানটিতে আপনার তৈরি কাস্টম কোণ উপাদানটি ব্যবহার করুন

কৌণিক কাস্টম উপাদান ব্যবহার করতে আপনাকে তৈরি জাভাস্ক্রিপ্ট ফাইলগুলি আমদানি করতে হবে এবং তারপরে আপনি এগুলি আপনার উপাদানগুলিতে সাধারণ উপাদান হিসাবে ব্যবহার করতে পারেন।

আপনি দেখতে পাচ্ছেন, আমরা কাস্টম ইভেন্টগুলির মাধ্যমে হোস্ট এবং শিশু উপাদানটির মধ্যে যোগাযোগ করি।

সাধারণ জাভাস্ক্রিপ্ট সহ কৌনিক কাস্টম উপাদান ব্যবহার করুন

আপনার তৈরি কাস্টম কৌণিক উপাদানটি ব্যবহার করতে অন্য যে কোনও জাভাস্ক্রিপ্ট কোডের মতো, আপনাকে কেবল এটি একটি এইচটিএমএল ফাইলের মধ্যে আমদানি করতে হবে এবং পলিফিলস, রানটাইম এবং স্ক্রিপ্ট ফাইলগুলি আমদানি করতে হবে।

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

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

আপনার যদি কোনও প্রতিক্রিয়া থাকে বা এই নিবন্ধটিতে কিছু যুক্ত করতে চান, তবে এখানে একটি মন্তব্য যোগ দিতে নির্দ্বিধায়।

এছাড়াও আপনি টুইটারে আমাকে অনুসরণ করতে পারেন.