এঙ্গুলার জেএস পরিচিতি - AngularJS Introduction
AngularJS হচ্ছে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। অন্যান্য স্ক্রিপ্ট এর মতই <script> ট্যাগ এর মাধ্যমে এটাকে এইচটিএমএল পেজে যোগ করা যায়।
AngularJS বিভিন্ন Directive এর মাধ্যমে এইচটিএমএল এট্রিবিউটকে সম্প্রসারিত করে এবং Expressions এর মাধ্যমে ডেটা এবং এইচটিএমএলের মধ্যে বন্ধন সৃষ্টি করে।
অ্যাঙ্গুলার জেএস কি(What is AngularJS)?
AngularJS হচ্ছে জাভাস্ক্রিট ফ্রেমওয়ার্ক। এটি জাভাস্ক্রিটের মাধ্যমে লেখা একটি লাইব্রেরী।
AngularJS কে জাভাস্ক্রিপ্ট ফাইলের মাধ্যমে আলাদা করা হয় এবং <script> ট্যাগের মাধ্যমে ওয়েব পেজে যোগ করা হয়ঃ
উদাহরণ
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
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";
});
পরবর্তী অধ্যায়ে modiule এবং controller সম্মন্ধে বিস্তারিত আলোচনা করা হয়েছে।