অ্যাঙ্গুলার জেএস টিউটোরিয়াল - AngularJS Tutorial

অ্যাঙ্গুলার জেএস- AngularJS নতুন এট্রিবিউটের মাধ্যমে এইচটিএমএল এলিমেন্টকে বর্ধিত করে। সিঙ্গেল পেজ এপ্লিকেশনের(SPA) জন্য AngularJS একটি স্বয়ংসম্পূর্ণ জাভাক্রিপ্ট ফ্রেমওয়ার্ক।

AngularJS সহজ হওয়ায় আপনিও খুব সহজেই এটি শিখতে পারবেন।

অ্যাঙ্গুলার জেএস টিউটোরিয়াল

অ্যাঙ্গুলার জেএস টিউটোরিয়ালটি এমনভাবে সাজানোর চেষ্টা করেছি যেন আপনি খুব দ্রুত এবং ভালভাবে AngularJS শিখতে পারেন।

প্রথমেই আমরা আপনাকে AngularJS এর ব্যাসিক বিষয় শিখতে সাহায্য করবো। যেমন: ডিরেক্টিভ , এক্সপ্রেশন , ফিল্টার , মডিউল এবং কন্ট্রোলার ইত্যাদি।

তারপরে AngularJS এর অন্য সকল প্রয়োজনীয় বিষয়গুলি শিখতে পারবেন।

যেমনঃ ইভেন্ট, ডোম , ফর্ম , ইনপুট , ভ্যালিডেশন , এইচটিটিপি ইত্যাদি।

অ্যাঙ্গুলার জেএস কি(What is AngularJS)?

AngularJS হচ্ছে জাভাস্ক্রিট ফ্রেমওয়ার্ক। এটি জাভাস্ক্রিটের মাধ্যমে লেখা একটি লাইব্রেরী।

AngularJS কে জাভাস্ক্রিপ্ট ফাইলের মাধ্যমে আলাদা করা হয় এবং <script> ট্যাগের মাধ্যমে ওয়েব পেজে যোগ করা হয়ঃ

উদাহরণ

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copy করার একটি অপশন দেখতে পাবেন। copy অপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।

আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<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="">
  <p>নামঃ <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div> 

</body> 
</html>

ফলাফল

দেরি না করে চলুন এখনই AngularJS শেখা শুরু করি!

এই টিউটোরিয়ালটি শুরু করার পূর্বে কি কি বিষয় জানতে হবে?

AngularJS শেখা শুরু করার পূর্বে আপনাকে নিচের বিষয়গুলো জানতে হবে:

এইচটিএমএল- ওয়েব পেজের কন্টেন্ট।
সিএসএস- ওয়েব পেজের নকশা।
জাভাস্ক্রিপ্ট- ওয়েব পেজের কাজের ধারা।

AngularJS এর ইতিহাস

২০০৯ সালে গুগল কর্মকর্তা মিসকো হোভারী সর্বপ্রথম AngularJS নিয়ে কাজ শুরু করেন।

২০১২ সালে AngularJS ভার্সন ১.0 ডেভলপারদের জন্য উন্মুক্ত করা হয়।

তার এই আইডিয়াটি খুব সমাদৃত এবং গুগল এখন এটাকে অফিসিয়ালি সাপোর্ট দিচ্ছে।

AngularJS হচ্ছে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। অন্যান্য স্ক্রিপ্ট এর মতই <script> ট্যাগ এর মাধ্যমে এটাকে এইচটিএমএল পেজে যোগ করা যায়।

AngularJS বিভিন্ন Directive এর মাধ্যমে এইচটিএমএল এট্রিবিউটকে সম্প্রসারিত করে এবং Expressions এর মাধ্যমে ডেটা এবং এইচটিএমএলের মধ্যে বন্ধন সৃষ্টি করে।

AngularJS এইচটিএমএলকে সম্প্রসারিত করে।

ng-directive এর মাধ্যমে AngularJS এইচটিএমএলকে সম্প্রসারিত করে।

ng-app ডিরেক্টিভ(directive) দ্বারা AngularJS এপ্লিকেশন সংজ্ঞায়িত করা হয়।

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

ng-bind ডিরেক্টিভ(directive) এইচটিএমএল View এবং এপ্লিকেশন ডেটার মধ্যে বন্ধন সৃষ্টি করে।

উদাহরণ

<!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="">
 <p>নামঃ <input type="text" ng-model="name" placeholder="এখানে লিখুন"></p>
<p ng-bind="name"></p>
</body>
</html>

ফলাফল

উদাহরণের ব্যাখ্যা:

পেজ লোড হওয়া মাত্রই স্বয়ংক্রিয়ভাবে AngularJS শুরু হয়।

ng-app ডিরেক্টিভ(directive) AngularJS কে বলে দেয় যে, <body> এলিমেন্টে AngularJS সক্রিয় আছে। সুতরাং <body> বা সম্পূর্ণ পেজের মালিক হচ্ছে AngularJS।

ng-model ডিরেক্টিভ(directive) এইচটিএমএল ইনপুট ফিল্ডের value এবং এপ্লিকেশন ভ্যারিয়েবল name এর মধ্যে বন্ধন সৃষ্টি করে।

ng-bind ডিরেক্টিভ(directive) <p> এলিমেন্টের innerHTML এবং এপ্লিকেশন ভ্যারিয়েবল name এর মধ্যে বন্ধন সৃষ্টি করে।

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

আমরা ইতিমধ্যেই দেখেছি য, AngularJS ডিরেক্টিভ(directive) হচ্ছে ng প্রিফিক্স(prefix) সম্বলিত এইচটিএমএল এট্রিবিউট।

ng-init ডিরেক্টিভ(directive) এর মাধ্যমে AngularJS এপ্লিকেশন ভ্যারিয়েবলের value প্রদান(initialize) করা হয়।

উদাহরণ

<!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="fName='Tamim'">
    <p> নাম হলোঃ <span ng-bind="fName"></span></p>
   </div>
</body>
</html>

ফলাফল

বিকপ্লভাবে ভ্যালিড(valid) এইচটিএমএল এর জন্যও লেখা যায়ঃ

উদাহরণ

<!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="fName='Tamim'">
      <p>নাম হলোঃ <span data-ng-bind="fName"></span></p>
     </div>
</body>
</html>

ফলাফল

আপনার পেজকে এইচটিএমএল ভ্যালিড করতে চাইলে ng- এর পরিবর্তে data-ng- ব্যহহার করতে পারেন।

পরবর্তী অধ্যায়ে ডিরেক্টিভ সম্মন্ধে বিস্তারিত আলোচনা করা হয়েছে।

AngularJS এক্সপ্রেশন(Expression)

AngularJS এক্সপ্রেশন(Expression)-কে দুইটি দ্বিতীয় বন্ধনীর মধ্যে রাখা হয়ঃ যেমন- {{ expression }}.

যেখানে AngularJS এক্সপ্রেশন(Expression) লেখা হবে ঠিক সেখানেই AngularJS আউটপুট দিবেঃ

উদাহরণ

<!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="">
      <p>এক্সপ্রেশনঃ {{ 10 + 20 }}</p>
     </div>
</body>
</html>

ফলাফল

ng-bind ডিরেক্টিভ(directive) এর মতই AngularJS এক্সপ্রেশন(Expression) এপ্লিকেশন ডেটা এবং এইচটিএমএল এর মধ্যে বন্ধন সৃষ্টি করে।

উদাহরণ

<!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="">
     <p>নাম: <input type="text" ng-model="name"></p>
     <p>{{name}}</p>
   </div>
</body>
</html>

ফলাফল

পরবর্তী অধ্যায়ে এক্সপ্রেশন(Expression) সম্মন্ধে বিস্তারিত আলোচনা করা হয়েছে।

AngularJS এপ্লিকেশন

AngularJS module দ্বারা AngularJS এপ্লিকেশন সংজ্ঞায়িত করা হয়।

AngularJS controller এর মাধ্যমে AngularJS এপ্লিকেশনকে নিয়ন্ত্রণ করা হয়।

ng-app ডিরেক্টিভ(directive) AngularJS এপ্লিকেশনকে নির্দেশ করে এবং ng-controller ডিরেক্টিভ(directive) AngularJS এপ্লিকেশনকে নিয়ন্ত্রণ করে।

উদাহরণ

<!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="myApp" ng-controller="myCtrl">
    নামঃ <input type="text" ng-model="fName"><br>
    বয়সঃ <input type="text" ng-model="age"><br>
    <br>
    নাম ও বয়সঃ {{fName + " " + age}}

    </div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.fName= "Tamim";
    $scope.age= "20";
});
</script>
</body>
</html>

ফলাফল

AngularJS module এপ্লিকেশনকে সংজ্ঞায়িত করেঃ

AngularJS মডিউল

var app = angular.module('myApp', []);

AngularJS controller এপ্লিকেশনকে নিয়ন্ত্রণ করেঃ

AngularJS কন্ট্রলার

app.controller('myCtrl', function($scope) {
    $scope.firstName= "Tamim";
    $scope.lastName= "Hasan";
});

অ্যাঙুলার জেএস টিউটোরিয়াল লিস্ট

« স্যাট একাডেমী হোম

পরবর্তী »

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

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

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

অন্যান্য

AngularJs টিউটোরিয়াল

অ্যাঙ্গুলার জেএস টিউটোরিয়াল - AngularJS Tutorial