AngularJS ডিরেক্টিভ (AngularJS Directives in Bangla)

পরাজিত বিশ্বাস

 

AngularJs আপনাকে নতুন এট্রিবিউট Directives এর মাধ্যমে html কে ব্যাখ্যা করতে সাহায্য করবে ।

AngularJS এর এক সেট বিল্ট ইন Directives আছে, যা আপনার প্রত্যেকটি অ্যাপ্লিকেশনকে কার্যকরি করে তোলে।

AngularJs আপনাকে আপনার নিজস্ব Directive সংঙ্গায়িত করার সুযোগ দেয়।

 

AngularJS ডিরেক্টিভ (AngularJS Directives)

AngularJs আপনাকে ng- prefix এর সাথে html কে ব্যাখ্যা করতে সাহায্য করবে ।

ng-app directive একটি AngularJs অ্যাপ্লিকেশন শুরু করে

ng-init directive অ্যাপ্লিকেশন ডাটার সূচনা করে

ng-model directive HTML controls (input, select, textarea) এর মান অ্যাপ্লিকেশন ডাটাতে যুক্ত করে

 

AngularJS উদাহরনঃ


<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>


ফলাফল : AngularJS ডিরেক্টিভ

ng-app directive AngularJS কে বলে যে, <div> এলিমেন্ট হচ্ছে AngularJs অ্যাপ্লিকেশনের মালিক ।

 

Data Binding (ডাটা যুক্তকরণ)

উদাহরনে দেওয়া {{ firstName }} expression হচ্ছে একটি AngularJS data binding expression ।
AngularJS data binding AngularJS expressions কে AngularJS data এর সাথে synchronized(সিঙ্ক্রোনাইজ) করে ।
{{ firstName }} টি ng-model="firstName" এর সাথে synchronized(সিঙ্ক্রোনাইজ) ।
পরবর্তী উদাহরনে দুইটি text filed দুইটি ng-model directives এর সাথে synchronized(সিঙ্ক্রোনাইজ):
AngularJS উদাহরনঃ
<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>
* নিজে চেষ্টা করে দেখুন।

Repeating HTML Elements (HTML এর উপাদানসমূহ পুনরাবৃত্তি করা)
ng-repeat directive একটি HTML element কে repeat করেঃ
AngularJS উদাহরনঃ
Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
* নিজে চেষ্টা করে দেখুন।
ng-repeat directive ব্যবহৃত হয় একটি object এর array তেঃ
AngularJS উদাহরনঃ
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>
* নিজে চেষ্টা করে দেখুন।
database CRUD (Create Read Update Delete) application এর জন্য AngularJS যথাযথ।
ng-app Directive
AngularJs এর মূল উপাদান সঙ্গায়িত করার জন্য ng-app directive কাজ করে ।
যখন একটি ওয়েব পেজ load হবে , তখন ng-app directive স্বয়ংক্রিয়ভাবে আপ্লিকেশনটির auto-bootstrap করবে ।
ng-init Directive
ng-init directive একটি AngularJs আপ্লিকেশনের initial value প্রকাশ করতে ব্যবহৃত হয় ।
সাধারনত আপনি এটি ব্যবহার করবেন না, এর পরিবর্তে আপনি controller অথবা module ব্যবহার করুন ।
controller এবং module সম্পর্কে পরে আপনি বিস্তারিত জানবেন ।
ng-model Directive
ng-model directive HTML controls (input, select, textarea) এর মান অ্যাপ্লিকেশন ডাটাতে যুক্ত করে ।
ng-model directive আরও যা করতে পারেঃ
১. application data (number, email, required) এর জন্য type validation প্রদান করতে পারে ।
২. application data (invalid, dirty, touched, error) এর অবস্থান প্রদান করতে পারে ।
৩. HTML element এর জন্য CSS class প্রদান করতে পারে ।
৪. HTML element কে HTML forms এ যুক্ত করতে পারে ।
ng-repeat Directive
একটি collection এর প্রতিটি item এর জন্য ng-repeat directive , HTML element কে clone করে। ( একটি array এর মধ্যে )

 

AngularJS Home পেজে যাওয়ার জন্য এখানে ক্লিক করুন

Permanent link to this article: http://bangla.sitestree.com/angularjs-directives/