অ্যাঙ্গুলার 7 কম্পোনেন্ট তৈরি ও ব্যবহার করবেন কীভাবে?
আমরা লেগো টুকরাগুলির মতো অ্যাংগুলার কম্পোনেন্টগুলির কথা ভাবতে পারি। আমরা একবারে একটি কম্পোনেন্ট তৈরি করি তবে সেগুলি আমাদের ওয়েবসাইটের বিভিন্ন অংশে একাধিকবার ব্যবহার করতে পারি।
একটি অ্যাংগুলার অ্যাপ্লিকেশন একটি গাছের কাঠামো যা আমরা তৈরি সেই সমস্ত কম্পোনেন্টগুলিকে নিয়ে গঠিত, যেমন আমরা কীভাবে ছোট লেগো টুকরো থেকে লেগো স্ট্রাকচার তৈরি করি।
কম্পোনেন্ট গুলিএকটি অ্যাংগুলার অ্যাপ্লিকেশনটির সর্বাধিক প্রাথমিক ইউআই(UI) বিল্ডিং ব্লক। একটি অ্যাংগুলার অ্যাপ্লিকেশনটিতে অ্যাংগুলার কম্পোনেন্টগুলির একটি গাছ থাকে — অ্যাংগুলার অফিসিয়াল ডক্স
সুতরাং এটি মূলত একটি অ্যাংগুলার কম্পোনেন্ট যা, কিন্তু এটি সমস্ত নয়। এই আর্টিকেলে, আপনি নিম্নলিখিত প্রশ্নের উত্তর পাবেন:
- একটি কম্পোনেন্টের কাজগুলি কী কী?
- একটি কম্পোনেন্টের ভিতরে কি?
- কোন কম্পোনেন্ট কীভাবে কাজ করে?
- এনজিওনিট (ngOnInit?) কী?
একটি কম্পোনেন্টের কাজগুলি
কোন কম্পোনেন্টের প্রধান কাজগুলি হ’ল:
- ইন্টারপোলেশন (Interpolation), দিকনির্দেশক(Directives) এবং পাইপের(Pipes) সহায়তায় একটি নির্দিষ্ট পেজ / বিভাগ এবং এর ডেটা প্রদর্শন করা হচ্ছে
- মডেল এবং ভিউগুলির মধ্যে বাইন্ডিং ডেটা
একটি কম্পোনেন্টের ভিতরে কি?
একটি কম্পোনেন্টে রয়েছে (বেশিরভাগ) 3 টি অংশ:
- টেমপ্লেট ফাইল- এইচটিএমএল ভিউ
- টাইপস্ক্রিপ্ট ফাইল – মডেল
- স্টাইল ফাইল – সিএসএস
ফোল্ডার (অ্যাপ) হ’ল আমাদের কম্পোনেন্ট ফোল্ডার, এতে এইচটিএমএল, সিএসএস এবং টিএস ফাইল রয়েছে। spec.ts পরীক্ষার জন্য এবং আপনি আপাতত module.ts উপেক্ষা করতে পারবেন।
সুতরাং প্রতিটি কম্পোনেন্টর নিজস্ব HTML কাঠামো, স্টাইল (সিএসএস) এবং ফাঙ্কশনালিটি (TS) আছে। কিন্তু কোন কম্পোনেন্ট আসলে কীভাবে কাজ করে?
একটি অ্যাংগুলার অ্যাপ তৈরি করার সময় আমাদের ফোল্ডারগুলির সাবধানতার সাথে নাম দেওয়া উচিত, অন্যথায়, আমরা একটি বড় প্রজেক্টর ভিতরে হারিয়ে যাব।
কোন কম্পোনেন্ট কীভাবে কাজ করে?
ঠিক আছে, উত্তরটি app.componal.ts এর ভিতরে রয়েছে:
আমাদের এখানে একটি সাধারণ টাইপস্ক্রিপ্ট ক্লাস রয়েছে। তবে এটি একটি কম্পোনেন্ট হিসাবে ব্যবহার করার জন্য:
প্রথমত, আমরা @angular/core লাইব্রেরি থেকে কম্পোনেন্টটি ইম্পোর্ট করি, যাতে আমরা একটি অ্যাংগুলার কম্পোনেন্ট তৈরি করতে পারি
@Component decorator টিএস ক্লাসটিকে একটি কম্পোনেন্ট হিসাবে চিহ্নিত করে এবং আমাদের নীচের মেটাডেটা যুক্ত করতে দেয়
selector হ’ল এইচটিএমএল ট্যাগ হিসাবে প্রজেক্টর অন্যান্য এইচটিএমএল ফাইলের অভ্যন্তরটিকে কল করার জন্য: <app-root> </app-root>
TemplateUrl যেখানে কম্পোনেন্টটির এইচটিএমএল ভিউ রয়েছে।
style URLs (1 টির বেশি হতে পারে) যেখানে কম্পোনেন্টটির স্টাইল সিএসএস থাকে।
অবশেষে, আমরা ক্লাসটি (কম্পোনেন্ট) এক্সপোর্ট করি যাতে আমরা এটিকে app.module অ্যাপ্লিকেশনটির মধ্যে কল করতে পারি অথবা প্রোজেক্টর অন্য কোন জাইগাতে ব্যবহার করতে পারি ।
সুতরাং এই পদক্ষেপগুলি একটি অ্যাংগুলার কম্পোনেন্ট তৈরি করে। এখন দেখা যাক কীভাবে এটি ব্যবহার করবেন…
উপাদান তৈরি করার পরে, আমাদের অবশ্যই এটি declarations এর অধীনে App Module মধ্যে সংরক্ষণ করতে হবে:
অবশেষে, আমরা কম্পোনেন্টটির selector name কল করতে পারি এবং তারপরে আমাদের ওয়েবপেজে এটি দেখতে সক্ষম হওয়া উচিত:
যেহেতু অ্যাঙ্গুলার একটি মডিউলার ফ্রেমওয়ার্ক, তাই প্রতিটি কম্পোনেন্ট, সার্ভিস এবং অন্যান্য অ্যাঙ্গুলারের বৈশিষ্ট্যগুলি অ্যাপ মডিউল (App Module) (বা একটি কাস্টম মডিউল) এর মধ্যে সংরক্ষণ করতে হবে, তাই আমরা এগুলি প্রজেক্টর যে কোনও জায়গায় ব্যবহার করতে পারি।
একটু কম্পোনেন্ট জন্য এত প্রচেষ্টা?
চিন্তা করবেন না, এই সমস্ত পদক্ষেপগুলি অ্যাংগুলার সিএলআই (CLI) দ্বারা স্বয়ংক্রিয়ভাবে করা যেতে পারে, তবে প্রয়োজন হলে আপনি নিজেই এগুলি সম্পাদনা করতে পারেন।
এনজিওনিট কী?
ঠিক আছে, এখন আপনি কীভাবে একটি কম্পোনেন্ট তৈরি করবেন তা শিখলেন। আপনি যখন একটি নতুন কম্পোনেন্ট তৈরি করবেন, আপনি বুঝতে পারবেন যে এনজিওএনইনিট () নামের একটি পদ্ধতি কন্সট্রাক্টরের নীচে উপস্থিত হবে:
প্রতিটি কম্পোনেন্টর একটি লাইফ সাইকেল আছে। ngOnInit() মেথডটি অ্যাঙ্গুলার কম্পোনেন্ট ইমমেডিয়েটলি শেষ করার সাথে সাথে ডাকা হয়। অন্য কথায়, অ্যাঙ্গুলার আমাদের বলছে যে “কম্পোনেন্ট প্রস্তুত”।
আমরা ngOnInit () মেথডটির অভ্যন্তরে কী করতে পারি তা হ’ল কিছু ক্রিয়াকলাপ যেমন ডেটা আনার মতো, বা অন পেজ লোডে আমরা তত্ক্ষণাত দেখতে চাই। কনস্ট্রাক্টরের ভিতরে এই ধরণের ক্রিয়াকলাপ করার পরামর্শ দেওয়া হয় না, সুতরাং এর পরিবর্তে আমাদের এনজিওএনট ( ngOnInit()) রয়েছে ।
অ্যাঙ্গুলারের ক্ষেত্রে, কনস্ট্রাক্টর কেবল ডিপেন্ডেন্সি ইনজেকশনের জন্য দায়ী হওয়া উচিত।
অ্যাঙ্গুলার অফিসিয়াল নথি অনুসারে, আমাদের জন্য ngOnInit() মেথডটি প্রয়োজন:
- To perform complex initializations shortly after construction.
- To set up the component after Angular sets the input properties.
কোনও ngOnInit() কোনও কম্পোনেন্টটির প্রাথমিক ডেটা আনার জন্য একটি ভাল জায়গা। – অ্যাঙ্গুলার অফিসিয়াল ডক্স
আরও তথ্যের জন্য আপনি এখানে এবং এখানেও দেখতে করতে পারেন।
অ্যাঙ্গুলার শেখার একটি বড় পদক্ষেপ হ’ল কম্পোনেন্ট কীভাবে তৈরি করতে হয় এবং দক্ষতার সাথে সেগুলি ব্যবহার করতে হয় তা জেনে রাখা। আপনার যদি কোনও প্রশ্ন থাকে তবে মন্তব্য বিভাগে জিজ্ঞাসা করতে দ্বিধা করবেন না।
আপনার সময় এবং সহায়তার জন্য আপনাকে ধন্যবাদ!