AngularJS ইনস্ট্রাকশন

এংগুলারজেস আপনাকে 'প্রতীক' নামক একটি নামকরণ ব্যবহার করে ব্যবহার করার অনুমতি দেয়。ইনক্রিয়েশননতুন একটি 'সম্প্রসারণ' প্রতিশব্দ এবং HTML এক্সটেন্ড করতে পারে。

এংগুলারজেস একটি বিন্যস্ত ইনক্রিয়েশনসমূহ আছে যা আপনার অ্যাপ্লিকেশনকে কার্যকারী করতে সাহায্য করে。

AngularJS আপনাকে নিজস্ব সূচনা নির্মাণের অনুমতি দেয়।

AngularJS ইনস্ট্রাকশন

AngularJS সূচনা হল একটি বিস্তারিত HTML অ্যাট্রিবিউট, যা প্রথম হাইফেন দ্বারা পূর্বসূচিত ng-.

ng-app সূচনা অ্যাংগুলারজেস অ্যাপ্লিকেশন ইনিশালাইজ করে

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

ng-model নির্দেশিকা HTML কন্ট্রোল (input, select, textarea) এর মানকে অ্যাপ্লিকেশন ডাটার সাথে বান্ধন করবে

অ্যাংগুলারজেস সূচনার সমস্ত তথ্য আপনি আমাদের অ্যাংগুলারজেস সূচনা পরিবর্তনের জন্য পড়ুন。

ইনস্ট্যান্স

<div ng-app="" ng-init="firstName='Bill'">
<p>নাম: <input type="text" ng-model="firstName"></p>
<p>আপনি লিখেছেন: {{ firstName }}</p>
</div>

আপনার নিজেই প্রয়াস করুন

ng-app সূচনা অ্যাংগুলারজেস-কে জানায় যে, <div> ইলেকট্রন অ্যাংগুলারজেস অ্যাপ্লিকেশনের 'মালিক'

ডাটা বাইন্ডিং

উপরোক্ত {{ firstName }} একটি এক্সপ্রেশন একটি অ্যাংগুলারজেস ডাটা বাইন্ডিং এক্সপ্রেশন

AngularJS-এর ডাটা বাইন্ডিং অ্যাংগুলারজেস এক্সপ্রেশনকে অ্যাংগুলারজেস ডাটার সাথে বাইন্ডিং করে

{{ firstName }} সঙ্গে ng-model="firstName" সংযুক্ত হয়

আগামী উদাহরণে, দুটি টেক্সট ফিল্ড দুটি ng-model সূচনার মাধ্যমে সংযুক্ত হয়:

ইনস্ট্যান্স

<div ng-app="" ng-init="quantity=1;price=5">
পরিমাণ: <input type="number" ng-model="quantity">
খরচ:    <input type="number" ng-model="price">
ডলারের মোট: {{ quantity * price }}
</div>

আপনার নিজেই প্রয়াস করুন

ব্যবহার করে: ng-init খুবই অসামান্য নয়। আপনি নিয়ন্ত্রক চ্যাপ্টারে কিভাবে ডাটা ইনিশালাইজ করবেন তা শিখবেন。

পুনরাবৃত্তি হয় HTML ইলেকট্রন

ng-repeat সূচনা পুনরাবৃত্তি হয় HTML ইলেকট্রন:

ইনস্ট্যান্স

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

আপনার নিজেই প্রয়াস করুন

ng-repeat সূচনা বাস্তবে প্রত্যেক অবজেক্টের জন্যএকবার এইমন একটি HTML ইলেকট্রন.

ব্যবহার হয় কোনও অবজেক্ট সমূহ ng-repeat সূচনা:

ইনস্ট্যান্স

<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>

আপনার নিজেই প্রয়াস করুন

অ্যাংগুলার জিএস ডাটাবেস CRUD (তৈরি, পড়া, সংশোধন, মুক্তি) অ্যাপ্লিকেশনের জন্য খুবই উপযুক্ত

ভাবুন যে, এই অবজেক্টগুলি ডাটাবেস থেকে আসা রেকর্ডগুলি হতে পারে

ng-app নির্দেশিকা

ng-app ng-init নির্দেশিকা অ্যাংগুলার জিএস অ্যাপ্লিকেশনেররূপান্তরকরণ করা হয়.

পৃষ্ঠা লোড করার সময়ng-app ng-app নির্দেশিকা সম্প্রসারণস্বয়ংক্রিয় ভাবে লোডস্বয়ংক্রিয়ভাবে ইনিশিয়ালাইজ করে

ng-init নির্দেশিকা

ng-init ng-init নির্দেশিকা অ্যাংগুলার জিএস অ্যাপ্লিকেশনেরপ্রারম্ভিক মান.

সাধারণত, ng-init-এর ব্যবহার করা হয় না। আপনি নিয়ন্ত্রক বা মডিউল ব্যবহার করবেন

পরে, নিয়ন্ত্রক এবং মডিউল সম্পর্কে আরও বেশি জানতে পারেন

ng-model নির্দেশিকা

ng-model নির্দেশিকা HTML কন্ট্রোল (input, select, textarea) এর মানকে অ্যাপ্লিকেশন ডাটার সাথে বান্ধন করবে

ng-model নির্দেশিকা এছাড়াও করতে পারে:

  • অ্যাপ্লিকেশন ডাটার ধরন পরীক্ষা (সংখ্যা, ইমেইল, বাধ্যতামূলক) প্রদান করুন
  • অ্যাপ্লিকেশন ডাটার অবস্থা (অমূল্য, অবাক, টাচ, ত্রুটি) প্রদান করুন
  • HTML ইলেকট্রনকে CSS শ্রেণী প্রদান করুন
  • HTML ইলেকট্রনকে HTML ফর্ম সাথে বান্ধন করুন

এই অধ্যায়ে আরও বেশি জানতে পড়ুন ng-model নির্দেশিকার তথ্য

নতুন নির্দেশিকা তৈরি করা

সকল বিন্ট অ্যাংগুলার জিএস নির্দেশিকার পাশাপাশি, আপনি নিজস্ব নির্দেশিকা তৈরি করতেও পারেন。

নতুন নির্দেশিকা ব্যবহার করে তৈরি হয়, .directive ফাংশন দ্বারা তৈরি。

নতুন নির্দেশিকা ব্যবহার করতে, নতুন নির্দেশিকার সাথে একই ট্যাগ নামভুক্ত একটি HTML ইলেকট্রন তৈরি করুন。

নামকৃত নির্দেশিকা করার সময়, হরেক্স ফরম্যাট ব্যবহার করতে হবে,w3TestDirectiveকিন্তু এটা ব্যবহার করার সময় - ডিসেপারেটরের সাথে নাম ব্যবহার করতে হবে,w3-test-directive:

ইনস্ট্যান্স

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Made by a directive!</h1>"
  });
});
</script>
</body>

আপনার নিজেই প্রয়াস করুন

আপনি নির্দেশিকা ব্যবহার করতে এইভাবে করতে পারেন:

  • এলিমেন্ট নাম
  • বৈশিষ্ট্য
  • শ্রেণী
  • মন্তব্য

এই উদাহরণগুলিতে একই ফলাফল পাওয়া যাবে:

এলিমেন্ট নাম

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

আপনার নিজেই প্রয়াস করুন

বৈশিষ্ট্য

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

আপনার নিজেই প্রয়াস করুন

শ্রেণী

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

আপনার নিজেই প্রয়াস করুন

মন্তব্য

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

আপনার নিজেই প্রয়াস করুন

সীমাবদ্ধ

আপনি আপনার ইনস্ট্রাকশনটিকে যেভাবেই কলানো যায় তা সীমিত করতে পারেন

ইনস্ট্যান্স

একটি মান "A" এর restrict এই ইনস্ট্রাকশনটি প্রয়োগ করা যায় যদি এটি একটি অ্যাট্রিবিউট হয়

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Made by a directive!</h1>"
  });
});

আপনার নিজেই প্রয়াস করুন

সৎ restrict মানগুলির জন্য

  • E ইলেকট্রন নাম নির্দেশ করে
  • A অ্যাট্রিবিউট নির্দেশ করে
  • C ক্লাস নির্দেশ করে
  • M টিকা নির্দেশ করে

ডিফল্ট অবস্থায়, এই মান EAযার মানে, ইলেকট্রন নাম ও এটির অ্যাট্রিবিউট নামকেও ইনস্ট্রাকশন বলা যায়。