AngularJS ডিরেক্টিভ

AngularJS ডিরেক্টিভ(Directive) হলো এক ধরনের এট্রিবিউট(attribute) যা ব্যবহার করে আপনি এইচটিএমএল পেজকে খুব সহজেই সম্প্রসারণ করতে পারবেন।

AngularJS এ পূর্বনির্ধারিত কিছু নিজস্ব ডিরেক্টিভ রয়েছে যা আপনার এপ্লিকেশনে বিভিন্ন কার্য সম্পাদনে সহায়তা করবে।

এছাড়া AngularJS আপনাকে আপনার প্রয়োজন অনুসারে বিভিন্ন ডিরেক্টিভ তৈরির সুযোগও দিয়ে থাকে।

AngularJS ডিরেক্টিভ

AngularJS ডিরেক্টিভ(Directive) হলো ng- প্রিফিক্স(prefix) বিশিষ্ট সম্প্রসারিত এইচটিএমএল এট্রিবিউট।

ng-app ডিরেক্টিভ AngularJS এর পতাকা বহন করে। অর্থাৎ এখান থেকে AngularJS এপ্লিকেশন(application) শুরু হয়।

ng-init ডিরেক্টিভ এপ্লিকেশনের ডাটা ভ্যালু সেট করে।

ng-model ডিরেক্টিভ(directive) এইচটিএমএল কন্ট্রোল(control) যেমন-input, select এবং textarea ইত্যাদির ভ্যালু(value) এবং এপ্লিকেশন ডাটার মধ্যে বন্ধন তৈরি করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
 <p> AngularJS এর প্রয়োগ দেখার জন্য নিচের বক্সে কিছু লিখুনঃ </p>
  <div ng-app="" ng-init="fName='Tamim'">

    <p>নামঃ <input type="text" ng-model="fName"></p>
    <p>আপনি লিখেছেন- {{ fName }}</p>
  </div>
  
</body>
</html>

ফলাফল

ng-app ডিরেক্টিভ এইচটিএমএল পেজের যে এলিমেন্টে থাকে সেই এলিমেন্টে AngularJS সক্রিয় থাকে। অর্থাৎ ঐ এলিমেন্টি AngularJS এর মালিকানায় চলে আসে।

ng-app ডিরেক্টিভ যদি <body> এলিমেন্টে থাকে তাহলে AngularJS পুরো পেজের মালিক হয়ে যায়। উপরের উদাহরণে <div> এলিমেন্টের মালিক হলো AngularJS। অর্থাৎ <div> এলিমেন্টটি হলো AngularJS এপ্লিকেশন।

Data Binding

উপরের উদাহরণে {{ firstName }} এক্সপ্রেশন হলো AngularJS ডাটা বাইন্ডিং এক্সপ্রেশন(data binding expression)।

AngularJS ডাটা বাইন্ডিং হলো এক ধরনের বন্ধন যা AngularJS expression এবং AngularJS data এর মধ্যে বন্ধন সৃষ্টি করে।

যেমন- {{ firstName }} এক্সপ্রেশন ng-model="firstName" ডাটার সঙ্গে বন্ধন তৈরি করে।

পরবর্তী উদাহরণে দুটি টেক্সট ফিল্ড(text field) বিশিষ্ট এক্সপ্রেশনকে দুটি ng-model ডিরেক্টিভের সাথে বন্ধন সৃষ্টি করে দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
 
  <div data-ng-app="" data-ng-init="quantity=3;price=10">

    পরিমাণঃ <input type="number" ng-model="quantity">
    মূল্যঃ <input type="number" ng-model="price">

    <p><b>সর্বমোটঃ</b> {{quantity * price}}
 </div>
  
</body>
</html>

ফলাফল

সাধারণত ng-init ডিরেক্টিভ তেমনটা ব্যবহার হয় না। এর পরিবর্তে আপনি কন্ট্রলার ব্যবহার করে ডাটা ইনিশিয়ালাইজ(initialize) করতে পারেন।

`ng-repeat` ডিরেক্টিভ

ng-repeat ডিরেক্টিভ এইচটিএমএল এলিমেন্টের পুনরাবৃত্তি ঘটায়ঃ

ng-repeat নিচের উদাহরণে animals অ্যারের প্রত্যেক আইটেমের জন্য <li> এলিমেন্ট একবার করে ক্লোন হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
 
 <div ng-app="" ng-init="animals=['Tiger','Lion','Horse']">
  <p>ng-repeat দ্বারা লুপিংঃ</p>
  <ul>
    <li ng-repeat="a in animals">
          {{ a }}
        </li>
    </ul>
 </div>
  
</body>
</html>

ফলাফল

একটি অবজেক্ট বা অ্যারেতে বিদ্যমান প্রত্যেক আইটেমের জন্য ng-repeat ডিরেক্টিভ এইচটিএমএল এলিমেন্টকে একবার করে ক্লোন(clone) করে।

নিচের উদাহরণে Player অবজেক্টের সকল আইটেমের জন্য <li> এলিমেন্টকে একবার করে ক্লোন করার জন্য ng-repeat ডিরেক্টিভ ব্যবহার করা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
 
  <div ng-app="" ng-init="player=[
    {name:'Tamim Iqbal',country:'Bangladesh'},
    {name:'Steve Smith',country:'Australia'},
    {name:'Chris Gayle',country:'West Indies'}]">

    <p>অবজেক্ট দ্বারা লুপিংঃ</p>
    <ul>
      <li ng-repeat="a in player">
      {{ a.name + ', ' + a.country }}
        </li>
     </ul>
 </div>
  
</body>
</html>

ফলাফল

ডাটাবেজ এপ্লিকেশন CRUD (Create Read Update Delete) এর জন্য AngularJS হলো স্বয়ংসম্পূর্ণ।
একবার শুধুভেবে দেখুন উপরের এই অবজেক্টটিে যদি ডাটাবেজে সংরক্ষণ করা থাকতো।

`ng-app` ডিরেক্টিভ

ng-app ডিরেক্টিভ হলো AngularJS এপ্লিকেশনের মুল এলিমেন্ট(root element)।

ওয়েবপেজ লোড সম্পন্ন হলে ng-app ডিরেক্টিভ(directive) স্বয়ংক্রিয়ভাবে(auto-bootstrap) এপ্লিকেশনকে শুরু করে।

`ng-init` ডিরেক্টিভ

ng-init ডিরেক্টিভ AngularJS এপ্লিকেশনে তাৎক্ষনিক ভ্যালু সেট করে।

আপনি সাধারণত ng-init ব্যবহার করবেন না। ইহার পরিবর্তে কন্ট্রোলার(controller) অথবা মডিউল(module) ব্যবহার করবেন।

পরবর্তী অধ্যায়সমূহে কন্ট্রোলার(controller) এবং মডিউল(module) সম্মন্ধে বিস্তারিত জানবেন।

`ng-model` ডিরেক্টিভ

ng-model ডিরেক্টিভ(directive) এইচটিএমএল কন্ট্রোল(control) যেমন-input, select এবং textarea ইত্যাদির ভ্যালু(value) এবং এপ্লিকেশন ডাটার মধ্যে বন্ধন তৈরি করে।

এছাড়া ng-model ডিরেক্টিভের মাধ্যমে নিম্নোক্ত কার্যাবলীও সম্পাদন করা যায়।

এপ্লিকেশন ডাটার জন্য বৈধ টাইপ সরবরাহ করে। যেমন-number, email, required ইত্যাদি।
এপ্লিকেশন ডাটার জন্য স্ট্যাটাস(status) সরবরাহ করে। যেমন- invalid, dirty, touched, error ইত্যাদি।
HTML এলিমেন্টের জন্য CSS ক্লাস(class) সরবরাহ করে।
এইচটিএমএল ফর্মের সঙ্গে এইচটিএমএল এলিমেন্টের বন্ধন তৈরি করে।

আরোও জানতে ng-model ডিরেক্টিভ টিউটোরিয়াল ভিজিট করুন।

নতুন ডিরেক্টিভ তৈরি করা

AngularJS এর পূর্বনির্ধারিত ডিরেক্টিভ ছাড়াও আপনি আপনার মত করে ডিরেক্টিভ তৈরি করতে পারেন।

নতুন ডিরেক্টিভ তৈরির জন্য .directive ফাংশন ব্যাবহার করা হয়।

নতুন ডিরেক্টিভকে কল করার জন্য নতুন ডিরেক্টিভের নামের মত একই নামের ট্যাগ বিশিষ্ট একটি এইচটিএমএল এলিমেন্ট তৈরি করা হয়।

ডিরেক্টিভের নাম রাখার জন্য camelCase যেমন- testDirective এবং কল(call) করার জন্য kebab-case যেমন-test-directive ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<title>AngularJS উদাহরণ</title>
</head>
<body ng-app="myApp">
 <w3-test-directive></w3-test-directive>
    
     <script>
            var app = angular.module("myApp", []);
           app.directive("w3TestDirective", function() {
                    return {
                     template : "<h3>ডিরেক্টিভ দ্বারা তৈরি করা হয়েছে!</h3>" 
                     };
                 });
        </script>
 </body>
</html>

ফলাফল

নিম্নোক্ত পদ্ধতিতে আপনি ডিরেক্টিভকে এইচটিএমএল পেজে ব্যবহার করতে পারেন।

এলিমেন্ট(eliment)
এট্রিবিউট(Attribute)
ক্লাস(Class)
কমেন্ট(Comment)

নিজের সকল উদাহরণের ফলাফল একইরকম হবেঃ

এলিমেন্টের নাম

<w3-test-directive></w3-test-directive>

ফলাফল

এট্রিবিউট

<div w3-test-directive></div>

ফলাফল

Class

<div class="w3-test-directive"></div>

ফলাফল

কমেন্ট

<!-- directive: w3-test-directive -->

ফলাফল

সীমাবদ্ধতা(Restriction)

আপনি ডিরেক্টিভকে কল(call) করার পদ্ধতিসমূহের উপর সীমাবদ্ধতা আরোপ করতে পারেন।

উদাহরণ

restrict প্রোপার্টির ভ্যালু "A" সেট করলে ডিরক্টিভকে শুধুমাত্র এট্রিবিউটের(attribute) মাধ্যমে কল করা যায়ঃ

 var app = angular.module("myApp", []);
 app.directive("w3TestDirective", function() {
 return {
    restrict : "A",
    template : "<h3>ডিরেক্টিভ দ্বারা তৈরি করা হয়েছে!</h3>"
   };
 });

ফলাফল

restrict প্রোপার্টির ভ্যালুসমূহ নিম্নরূপঃ

E : এলিমেন্টের জন্য ব্যবহৃত হয়।
A : এট্রিবিউটের জন্য ব্যবহৃত হয়।
C : ক্লাসের জন্য ব্যবহৃত হয়।
M : কমেন্টের জন্য ব্যবহৃত হয়।

restrict এর ডিফল্ট(default) ভ্যালু হলো EA এর অর্থ হলো এলিমেন্টের নাম এবং এট্রিবিউটের নাম দিয়ে কল করা যাবে।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

AngularJs টিউটোরিয়াল

AngularJS ডিরেক্টিভ