Angular-এ কম্পোনেন্ট তৈরি করা একটি গুরুত্বপূর্ণ কাজ। Angular CLI (Command Line Interface) ব্যবহার করে খুব সহজেই নতুন কম্পোনেন্ট তৈরি করা যায়। CLI ডেভেলপারদের কমান্ড লাইন ইন্টারফেসের মাধ্যমে অটোমেটেড প্রক্রিয়ায় কোড জেনারেট করতে সাহায্য করে, যা উন্নয়ন প্রক্রিয়া দ্রুত এবং কার্যকরী করে তোলে।
Angular-এ কম্পোনেন্ট হলো মূল কাঠামো বা ব্লক যা UI তৈরি করে এবং অ্যাপ্লিকেশনের ভিউ নির্ধারণ করে। প্রতিটি কম্পোনেন্টে থাকে:
@Component ডেকোরেটর যা Angular কে জানিয়ে দেয় যে এটি একটি কম্পোনেন্ট।Angular CLI দিয়ে কম্পোনেন্ট তৈরি করতে হলে নিচের স্টেপগুলো অনুসরণ করতে হবে:
প্রথমে, যদি আপনি Angular CLI ইনস্টল না করে থাকেন, তাহলে নিচের কমান্ড দিয়ে এটি ইনস্টল করতে হবে:
npm install -g @angular/cli
এখন, যদি আপনার অ্যাপ্লিকেশন না থাকে, তাহলে একটি নতুন Angular প্রজেক্ট তৈরি করতে হবে:
ng new my-angular-app
এখানে my-angular-app আপনার অ্যাপ্লিকেশনের নাম।
এখন, CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা যাবে। নিম্নলিখিত কমান্ডটি ব্যবহার করুন:
ng generate component component-name
অথবা শর্টকাট কমান্ড:
ng g c component-name
এখানে, component-name হলো আপনার তৈরি করতে চান এমন কম্পোনেন্টের নাম। উদাহরণস্বরূপ, যদি আপনি একটি user-profile নামক কম্পোনেন্ট তৈরি করতে চান, তাহলে কমান্ড হবে:
ng g c user-profile
এই কমান্ডটি কম্পোনেন্টটি তৈরি করবে এবং নিম্নলিখিত ফাইলগুলো স্বয়ংক্রিয়ভাবে তৈরি করবে:
user-profile.component.ts (TypeScript ফাইল)user-profile.component.html (HTML টেম্পলেট)user-profile.component.css (CSS স্টাইল)user-profile.component.spec.ts (টেস্ট ফাইল)এছাড়া, Angular CLI আপনার AppModule ফাইলে কম্পোনেন্টটিকে অটোমেটিকভাবে যোগ করে দেবে।
নতুন কম্পোনেন্ট তৈরি করার পর, আপনি একটি সাধারণ স্ট্রাকচার পাবেন:
এটি কম্পোনেন্টের TypeScript ফাইল, যেখানে কম্পোনেন্টের লজিক এবং মেটাডেটা থাকবে।
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
এটি কম্পোনেন্টের HTML টেম্পলেট, যা UI উপস্থাপন করে।
<div class="user-profile">
<h1>User Profile</h1>
<p>Welcome to the user profile page!</p>
</div>
এটি কম্পোনেন্টের স্টাইল ফাইল, যা টেম্পলেটের স্টাইল নির্ধারণ করে।
.user-profile {
text-align: center;
font-size: 20px;
}
নতুন তৈরি করা কম্পোনেন্টটি ব্যবহার করার জন্য, আপনাকে AppComponent বা অন্য কোনো কম্পোনেন্টের HTML টেম্পলেটে <app-user-profile></app-user-profile> এই ট্যাগটি ব্যবহার করতে হবে।
<!-- app.component.html -->
<div style="text-align:center">
<h1>Welcome to Angular!</h1>
<app-user-profile></app-user-profile>
</div>
এখানে, <app-user-profile></app-user-profile> হলো আপনার তৈরি করা UserProfileComponent এর সিলেক্টর, যা UI তে সেই কম্পোনেন্ট প্রদর্শন করবে।
CLI কম্পোনেন্ট তৈরি করার সময় কিছু অতিরিক্ত ফ্ল্যাগ ব্যবহার করা যেতে পারে:
যদি আপনি HTML টেম্পলেটটি কম্পোনেন্টের TypeScript ফাইলে রাখতে চান, তাহলে এটি ব্যবহার করা যায়:
ng g c user-profile --inline-template
যদি আপনি CSS কোডটি কম্পোনেন্টের TypeScript ফাইলে রাখতে চান, তাহলে এটি ব্যবহার করা যায়:
ng g c user-profile --inline-style
এই ফ্ল্যাগটি দিয়ে আপনি কম্পোনেন্টটি কোন মডিউলে যোগ করবেন তা নির্দিষ্ট করতে পারবেন:
ng g c user-profile --module=app
এটি user-profile কম্পোনেন্টটিকে app.module.ts মডিউলে যোগ করবে।
Angular CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা একটি সহজ এবং কার্যকর পদ্ধতি, যা ডেভেলপমেন্ট প্রক্রিয়া দ্রুত এবং সঠিকভাবে সম্পন্ন করতে সাহায্য করে। এই পদ্ধতিতে নতুন কম্পোনেন্ট তৈরি করা, কোড অটোমেটেডভাবে জেনারেট করা, এবং মডিউল ও কম্পোনেন্টের মধ্যে ডিপেন্ডেন্সি ম্যানেজ করা অনেক সহজ হয়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
