আমরা লেগো টুকরাগুলির মতো অ্যাংগুলার কম্পোনেন্টগুলির কথা ভাবতে পারি। আমরা একবারে একটি কম্পোনেন্ট তৈরি করি তবে সেগুলি আমাদের ওয়েবসাইটের বিভিন্ন অংশে একাধিকবার ব্যবহার করতে পারি।

একটি অ্যাংগুলার  অ্যাপ্লিকেশন একটি গাছের কাঠামো যা আমরা তৈরি সেই সমস্ত কম্পোনেন্টগুলিকে নিয়ে গঠিত, যেমন আমরা কীভাবে ছোট লেগো টুকরো থেকে লেগো স্ট্রাকচার তৈরি করি।

কম্পোনেন্ট গুলিএকটি অ্যাংগুলার অ্যাপ্লিকেশনটির সর্বাধিক প্রাথমিক ইউআই(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() মেথডটি প্রয়োজন:

1. To perform complex initializations shortly after construction.
2. To set up the component after Angular sets the input properties.

কোনও ngOnInit()  কোনও কম্পোনেন্টটির প্রাথমিক ডেটা আনার জন্য একটি ভাল জায়গা। – অ্যাঙ্গুলার  অফিসিয়াল ডক্স

আরও তথ্যের জন্য আপনি এখানে এবং এখানেও দেখতে করতে পারেন।

অ্যাঙ্গুলার শেখার একটি বড় পদক্ষেপ হ’ল কম্পোনেন্ট কীভাবে তৈরি করতে হয় এবং দক্ষতার সাথে সেগুলি ব্যবহার করতে হয় তা জেনে রাখা।  আপনার যদি কোনও প্রশ্ন থাকে তবে মন্তব্য বিভাগে জিজ্ঞাসা করতে দ্বিধা করবেন না।

আপনার সময় এবং সহায়তার জন্য আপনাকে ধন্যবাদ!

The post অ্যাঙ্গুলার 7 কম্পোনেন্ট তৈরি ও ব্যবহার করবেন কীভাবে? first appeared on Bipon's Diary.

অ্যাংগুলার  আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরির জন্য বিশ্বের অন্যতম জনপ্রিয় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। অ্যাংগুলার  গুগল তৈরি করেছে এবং ডেভেলপেড করেছে এবং এর পিছনে একটি বিশাল সম্প্রদায় সমর্থন রয়েছে। আপনি এখান থেকে অ্যাংগুলার অফিসিয়াল ওয়েবসাইট দেখতে পারেন।

অ্যাংগুলার  2+ দিয়ে শুরু করে একটি অ্যাংগুলার প্রজেক্টে বিভিন্ন কনফিগারেশন ফাইলের প্রয়োজন। একে একে ম্যানুয়ালি ইনস্টল করা সময়ের অপচয় এবং এটিও কঠিন।

অতএব, অ্যাংগুলার  সমস্ত কনফিগারেশনের সাথে ডিল করার জন্য একটি সমাধান নিয়ে আসে: অ্যাংগুলার সিএলআই। আমরা অ্যাংগুলার সিএলআই ব্যবহার করে কয়েক মিনিটের মধ্যে একটি অ্যাংগুলার প্রজেক্ট ডেভেলপিং শুরু করতে পারি।

এই পোস্টে, আমি অ্যাংগুলার সিএলআই(CLI) ব্যবহার করে আপনার কম্পিউটারে অ্যাঙ্গুলার ইনস্টল করার পদ্ধতিটি ব্যাখ্যা করব।

গুরুত্বপূর্ণ: অ্যাংগুলার অ্যাংগুলার জেএস নয়।

অ্যাংগুলার জেএস → অ্যাংগুলার সংস্করণ 1.x

অ্যাংগুলার → অ্যাংগুলার সংস্করণ 2+

অ্যাংগুলার সিএলআই কি?

সিএলআই(CLI) মানে কমান্ড লাইন ইন্টারফেস। অ্যাংগুলার সিএলআই(CLI) ম্যানুয়ালি না করে অ্যাংগুলার প্রজেক্ট গুলিতে স্বয়ংক্রিয় ক্রিয়াকলাপের জন্য ব্যবহৃত হচ্ছে। সিএলআই শুরু থেকে শেষ পর্যন্ত একটি অ্যাংগুলার প্রজেক্টে আমাদের ডেভেলপারদের সমর্থন করে।

উদাহরণস্বরূপ, অ্যাংগুলার সিএলআই(CLI) এর জন্য ব্যবহার করা যেতে পারে:

• কনফিগারেশন, এনভায়রনমেন্ট সেটআপ
• বিল্ডিং কম্পোনেন্টস, সার্ভিসেস, রাউটিং সিস্টেম
• প্রজেক্টটি শুরু করা, পরীক্ষা করা এবং ডেপ্লয়ইং করা হচ্ছে
• তৃতীয় পক্ষের লাইব্রেরি যেমন বুটস্ট্র্যাপ, সাস ইত্যাদি ইনস্টল করা (ওয়েবপ্যাক সহ)

এবং আরো অনেক কিছু

অ্যাংগুলার সিএলআই(CLI) ডেভেলপারদের সময় সেভ করে। আপনি নীচে এর অফিসিয়াল ওয়েবসাইট চেক করতে পারেন:

সিএলআই দিয়ে অ্যাঙ্গুলার কীভাবে ইনস্টল করবেন?

আপনি যদি উপরের অফিসিয়াল ওয়েবসাইটটিতে যান তবে দেখতে পাবেন যে কয়েকটি কমান্ড লিখিত আছে। এটি একটি অ্যাংগুলার প্রজেক্ট ইনস্টল করার 4 টি প্রধান পদক্ষেপ:

1. এনপিএম ইনস্টল করুন

অ্যাংগুলার এর জন্য আপনার সিস্টেমে নোড.জেএস প্রয়োজন (সংস্করণ 8.x বা 10.x)। আপনার যদি ইতিমধ্যে এটি থাকে তবে আপনি এই অংশটি এড়িয়ে যেতে পারেন।

নোডের নোড প্যাকেজ ম্যানেজার (এনপিএম) রয়েছে, যা আমাদের অ্যাংগুলার সিএলআই এবং অন্যান্য প্রোগ্রাম (প্যাকেজ) ইনস্টল করার প্রয়োজন। আপনি এখান থেকে এনপিএম ডাউনলোড করতে পারেন।

ইনস্টলেশন সমাপ্ত হওয়ার পরে, আপনার টার্মিনাল বা উইন্ডোজ কমান্ড প্রম্পটে যান এবং কোন সংস্করণ ইনস্টল করা আছে তা পরীক্ষা করতে node -v টাইপ করুন:

2. অ্যাংগুলার সিএলআই ইনস্টল করুন

আপনি এনপিএম ইনস্টল করার পরে, আপনি দ্বিতীয় পদক্ষেপ হিসাবে অ্যাংগুলার সিএলআই ইনস্টল করতে পারেন।

npm install -g @angular/cli

দ্রষ্টব্য: যদি আপনার ম্যাকটি ইনস্টলেশনটি সীমাবদ্ধ করে, আপনি sudo su কমান্ডের সাহায্যে সুপার ব্যবহারকারী হতে পারেন এবং আবার চেষ্টা করুন।

g এর অর্থ গ্লোবাল ইনস্টলেশন। আমরা এটি অন্তর্ভুক্ত করি যাতে আমরা পরে যেকোনও অ্যাংগুলার  প্রজেক্টে সিএলআই ব্যবহার করতে পারি। ইনস্টলেশন সমাপ্ত হওয়ার পরে, ইনস্টলেশনটি সফল কিনা তা যাচাই করতে ng v টাইপ করুন।

ng মানে অ্যাংগুলার এবং -v সংস্করণ।

৩. সিএলআই দিয়ে একটি কৌণিক অ্যাপ তৈরি করুন

আপনি এখন সিএলআইয়ের সাথে একটি অ্যাংগুলার অ্যাপ ইনস্টল করতে পারেন। আপনার টার্মিনাল থেকে আবার, আপনার সোর্স কোডটি কোথায় ইনস্টল করতে হবে তার জন্য প্রথমে একটি ফাইলের পথ পছন্দ করুন। আমি cd Desktop কমান্ড সহ আমার ডেস্কটপ হিসাবে একটি অবস্থান নির্বাচন করব, তারপরে আপনার প্রথম অ্যাংগুলার  প্রজেক্টটি ইনস্টল করতে নিম্নলিখিত কমান্ডটি টাইপ করুন:

ng new my-first-app

এই কমান্ডটি প্রয়োজনীয় সমস্ত কনফিগারেশন সহ অ্যাঙ্গুলার অ্যাপটি ইনস্টল করবে। আপনি অবশ্যই অন্য একটি নাম পছন্দ করতে পারেন।

৪. অ্যাপটি চালান

অ্যাংগুলার লাইভ সার্ভার সমর্থন করে, তাই আপনি পেজ রিফ্রেশিং না করে স্বয়ংক্রিয়ভাবে আপনার স্থানীয় ব্রাউজারে পরিবর্তনগুলি দেখতে পাবেন। আপনার অ্যাংগুলার  অ্যাপটি সফলভাবে শুরু হওয়ার পরে, আপনার অ্যাপের প্রজেক্ট ফোল্ডারে যান – cd name-of-your-app।

যদি এখন পর্যন্ত সবকিছু ঠিকঠাক হয় তবে আপনি নিম্নলিখিত কমান্ড দিয়ে অ্যাংগুলার অ্যাপটি চালাতে পারেন:

ng serve –open

এই কম্যান্ডটি আপনার অ্যাংগুলার অ্যাপ্লিকেশনটি serve (start) এবং open কমান্ডটি এটি আপনার ওয়েব ব্রাউজারে স্বয়ংক্রিয়ভাবে রান হবে :

আপনি এই বার্তাটি দেখার পরে, একটি ব্রাউজারে পেজ খুলবে এবং অভিনন্দন! আপনার প্রথম অ্যাঙ্গুলার অ্যাপটি আপনার লোকালহোস্টে চলমান আছে 🙂

সুতরাং একবার আপনি আপনার মেশিনে নোড.জেএস (এনপিএম) এবং অ্যাঙ্গুলার সিএলআই ইনস্টল করার পরে, একটি অ্যাঙ্গুলার প্রজেক্ট ইনস্টল ও পরিচালনা করতে কয়েক মিনিট সময় লাগে। আমি আশা করি আপনি এই আর্টিকেল দরকারী বলে মনে করি।

আপনার সময় এবং সহায়তার জন্য আপনাকে ধন্যবাদ !

The post কয়েক মিনিটের মধ্যে অ্যাংগুলার-সিএলআই ব্যবহার করে অ্যাংগুলার নতুন প্রোজেক্ট করা first appeared on Bipon's Diary.

সিনটেক্স 

[Property]=”expression”

প্রপার্টি বাইন্ডিং [ ] বন্ধনী ব্যবহার করে। বাইন্ডিং টার্গেট বর্গাকার বন্ধনীগুলির ভিতরে স্থাপন করা হয়। বাইন্ডিং সোর্স ডাবল কোট এর মধ্যে আবদ্ধ।

আপনি এই কোডগুলি app.componant.html এ যুক্ত করতে পারেন এবং ফলাফলটি দেখতে পারেন

<p [innerText]=”title”></p>

<p [innerText]=”getTitle()”></p>

<p [innerText]=”‘Hello & Welcome to ‘+ ‘ Angular Data binding ‘”></p>

<p [innerText]=”100*80″></p>

<p [style.color]=”color”>This is red</p>

আপনি এই কোডগুলি app.componant.ts এ যুক্ত করতে পারেন এবং ফলাফলটি দেখতে পারেন

  getTitle(): string {

    return this.title;

  }

  title = ‘hello’;

  color= ‘red’;

প্রপার্টি বাইন্ডিং সংক্রান্ত নোটসমূহ

১। প্রপার্টি বাইন্ডিং অন ওয়ে কম্পোনেন্ট টু ভিউ

২। বাইন্ডিং সোর্স একটি টেম্পলেট এক্সপ্রেশন

৩। নন-স্ট্রিং রিটার্ন মানগুলি অনুমোদিত

The post দিন ৪ – প্রপার্টি বাইন্ডিং first appeared on Bipon's Diary.

ইউজার টেমপ্লেট (template) এ ডাটা বাইন্ড করতে পারে ক্লাস (Class) থেকে –  

1. বাইন্ড ডাটা ডাবল কারলি ব্রাকেট ব্যবহার করে 

{{property_name}} → ডাবল কারলি ব্রাকেট এর মধ্যে ক্লাস প্রপার্টি নাম থাকবে । তাহলে ডাইনামিক ভ্যালু দেখাবে । 

2. ইউজিং সিনটেক্স

<h2>{{2+2}}</h2>  → output: 4 

3. স্ট্রিং কংক্যাটেনশন + প্রপার্টি নাম  

concatenation: <p>{{“welcome ” + name}}</p>

<p>{{name.length}}</p>

<p>{{name.toUpperCase()}}</p>

4. ইউজিং মেথড 

<p>{{greetUser()}}</p>

কম্পোনেন্ট ফাইল

greetUser(){

Return “Hello ” + this.name; 

}

5.অন্য ভাবে

public siteUrl = window.location.href;

<p>{{siteUrl}}</p>

Not possible: 

<p>{{a = 2+2}}</p> ভ্যারিয়েবল এ এক্সপ্রেশন এসাইন করা যাবে না । ব্রাউজার এর কনসোলে দেখাবে – Template parse error. 

<p>{{window.location.href}}</p> টেমপ্লেট  জাভাস্ক্রিপ্ট গ্লোবাল ভ্যারিয়েবল বুঝে না । ব্রাউজার এর কনসোলে দেখাবে – location of undefined. 

possible:

#<p>{{siteUrl}}</p> (public siteUrl = window.location.href)

The post দিন ৩– ইন্টারপোলেশন first appeared on Bipon's Diary.

#কম্পোনেন্ট এর ৩ টা পার্ট । টেমপ্লেট (template), ক্লাস (Class), মেটাডাটা (Metadata)

টেমপ্লেট (Template) – রিপ্রেসেন্ট ভিউ – HTML ব্যবহার করে । 

ক্লাস (Class) – কন্ট্রোল লজিক অ্যান্ড ভিউ

মেটাডাটা (MetaData) – এটা হচ্ছে তথ্য (Information ) আঙ্গুলার এর সিদ্ধান্ত নেওয়ার ক্ষেত্রে কাজ করে 

Decorator:এটা Typescript  এর একটা ফিচার । Decorator হচ্ছে ফাংশন প্রভাইডার যেটা ক্লাস  এর সাথে সংযুক্ত হয়ে কাজ করে ।কম্পোনেন্ট ।কম্পোনেন্ট Decorator ব্যবহার করে । 

• @কম্পোনেন্ট Decorator মূলত একটা ফাংশন যেটা ক্লাস  এর সাথে সংযুক্ত 
• Decorator আঙ্গুলার কে বলে যে আমি কোন প্লাইন ক্লাস না । আমি কম্পোনেন্ট । 

@কম্পোনেন্ট Decorator 

• মেটাডাটা (Metadata) ধারন করে 
• টেমপ্লেট  (TemplateUrl) – রিপ্রেসেন্ট ভিউ – HTML ব্যবহার করে
• styleUrl – পয়েন্ট টু সিএসএস(css) ফাইল 
• Have selector for style
• সিলেক্টর(Selector): কম্পোনেন্ট এর জন্য কাস্টম html ট্যাগ সিলেক্ট করে । 

এইটা হচ্ছে কম্পোনেন্ট স্ট্রাকচার। 

CLI ব্যবহার করে নতুন কম্পোনেন্ট করা 

• Ng g c componet_name (ng g c test)
• কমান্ড এর পর এটা app.module.ts ফাইল এ প্রাথমিক অবস্তাই ইনিশিয়াল হবে । 

কম্পোনেন্ট সিলেক্টর(Selector) প্যাটার্ন 

• কাস্টম html ট্যাগ ব্যবহার করতে হবে প্যারেন্ট html ফাইল এ যেমন – <app-test></app-test>
• কাস্টম ক্লাস (Class) ব্যবহার করতে হবে কম্পোনেন্ট  ফাইল এ (test.component.ts) যেমন – selector: “.app-test” । html ফাইল এ ।  প্যারেন্ট html ফাইল অথবা অন্য যে কোন ফাইল এ যেমন – <div class=”app-test”></div>
• কাস্টম html  attribute ব্যবহার করতে হবে কম্পোনেন্ট ফাইল এ (test.component.ts) যেমন – selector: ‘[app-test]’ ।  html ফাইল এ । প্যারেন্ট html ফাইল অথবা অন্য যে কোন ফাইল এ যেমন – <div app-test></div>

Template: ‘<div>Inline Template</div>’

styles: [‘

div{

color: red;

}

’]

Note: using backticks (“) for multiple line

The post দিন ২ – কম্পোনেন্ট ব্যাসিক first appeared on Bipon's Diary.

পূর্বশর্ত – Angular শেখার আগে কিছু বিষয় জানা দরকার

• HTML, CSS, JS
• Typescript এর উপর স্বল্প ধারনা

ডেভেলপমেন্ট এনভায়রনমেন্ট:

এই বিষয় গুলো কিছু ধারনা থাকলে চলবে এই যেমন ধরেন এনপিএম(NPM) কি ?

• Node 
• NPM
• Angular CLI
• Text Editor like VS Editor

 নতুন প্রোজেক্ট করার শর্টকাটঃ 

• ওপেন উইন্ডোজ কমান্ড প্রম্পট ইন্টারফেস । সেখানে লিখুন –  ng new hello-world

মডিউল (Module) 

• Angular অ্যাপ্লিকেশান আলাদা মডিউল এর সমষ্টি । 
• Angular এ অবশ্যই একটা রুট মডিউল (Root Module) থাকবে । যেমন – AppComponent 

কম্পোনেন্ট (Component)

• Angular এ অবশ্যই একটা রুট  কম্পোনেন্ট থাকবে । যেমন – AppComponent 

সার্ভিস(Service) 

• মডিউল (Module) 
  • সার্ভিস মডিউল এর ভিতরে থাকে 
  • সার্ভিস (Service) যেখানে অ্যাপ্লিকেশান এর বিজনেস লজিক লেখা হই। 

আর্কিটেকচার সামারি (Architecture Summary)

• Angular অ্যাপ্লিকেশান – এক অথবা অনেক মডিউল এর সমষ্টি 
• মডিউল (Module) – এক অথবা অনেক কম্পোনেন্ট (Component) এবং সার্ভিস (Service) এর সমষ্টি
• কম্পোনেন্ট (Component) – HTML (html template ধারন করে) + ক্লাস( Class) (ক্লাস নির্দিষ্ট কিছু ভিউ এর লজিক কন্ট্রোল করে) 
• সার্ভিস(Service) – যেখানে অ্যাপ্লিকেশান এর বিজনেস লজিক লেখা হই । 
• মডিউল (Module) – ইন্টারেক্ট এবং আল্টিমেটলি রেন্দার (render ) ভিউ করে ব্রাউজার এ। 

Package.json

• এই ফাইল Angular অ্যাপ্লিকেশান এর ডেভেলপমেন্ট এর প্রয়োজনীয় ফাইল ধারন করে। 
• প্রোজেক্ট রান – ng serve or npm start (npm start মানে হচ্ছে ইন্টারনালি কল ng serve)

Main.ts 

• এই ফাইল হচ্ছে অ্যাপ্লিকেশান  এর এন্ট্রি পয়েন্ট । 

• যদি প্রোজেক্ট রান করা হই তখন  অ্যাপ্লিকেশান main.ts ফাইল এ আসে তারপর bootstrap এবং kickstart appModule
• আর এই appModule এ থাকে app.component.html ফাইল। সুতরাং app.component.html ফাইল যে HTML কোড লেখা হোক না কেন ভিউ হবে। 
• আর css এর জন্য app.component.css ফাইল। 
• এরপর app.component.html রেন্দার (render) HTML ফাইল ।  
• ইনিশিয়ালি Title প্রপার্টি সিঙ্ক/বাউন্ড থাকে কম্পোনেন্ট html বাই ইন্টারপোলেশন (interpolation)

App.module.tsঅ্যাপ্লিকেশান  এর রুট (root) মডিউল (Module) হচ্ছে app.module.ts ফাইল

The post দিন-১ – ব্যাসিক ধারনা first appeared on Bipon's Diary.