অ্যাঙ্গুলার জেএস - AngularJS Expression
অ্যাঙ্গুলারজেএস এক্সপ্রেশন(Expression) ব্যবহার করে, AngularJS ডাটা এবং এইচটিএমএল এর মধ্যে বন্ধন তৈরি করে।
AngularJS এক্সপ্রেশন(Expression)
AngularJS এক্সপ্রেশন(Expression) কে দুইটি দ্বিতীয় বন্ধনীর মধ্যে লিখতে হয়। যেমন- {{ expression }}
ডিরেক্টিভের মধ্যেও AngularJS এক্সপ্রেশন(Expression) কে লেখা যায়ঃ যেমন- ng-bind="expression".
AngularJS এক্সপ্রেশন(Expression)-কে যেখানে লেখা হয় ঠিক সেখানেই এক্সপ্রেশনের(Expression) আউটপুট পাওয়া যায়।
AngularJS এক্সপ্রেশন(Expression)অনেকটা জাভাস্ক্রিপ্ট এক্সপ্রেশনের মতই। এর মধ্যেও জাভাস্ক্রিপ্ট এর মত লিটারেল, অপারেটর এবং ভ্যারিয়েবল থাকতে পারে।
উদাহরণ {{ 5 + 5 }} অথবা {{ fName + " " + age }}
উদাহরণ
<!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-app ডিরেক্টিভ(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>
<div>
<p>এক্সপ্রেশনঃ {{ 10 + 20 }}</p>
</div>
</body>
</html>
ফলাফল
আপনি যেখানে ইচ্ছা এক্সপ্রেশন লিখতে পারেন, AngularJS এটাকে সমাধান করে ফলাফল রিটার্ন করবে।
উদাহরণঃ চলুন দেখি কিভাবে 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="" ng-init="myCol='green'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
</body>
</html>
ফলাফল
AngularJS সংখ্যা(Number)
AngularJS সংখ্যা(Number) এবং JavaScript সংখ্যা(Number) একইঃ
উদাহরণ
<!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="quantity=2;cost=15">
<p>সর্বমোটঃ {{ quantity * cost }}</p>
</div>
</body>
</html>
ফলাফল
ng-bind ব্যবহার করে একই উদাহরণঃ
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="" ng-init="quantity=2;cost=15">
<p>সর্বমোটঃ <span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>
ফলাফল
ng-init ব্যবহার করে ভ্যারিয়েবলের ভ্যালু এসাইন করা ভালো পদ্ধতি না। controller অধ্যায়ে ভ্যালু এসাইনের জন্য আপনারা এর চেয়ে ভাল পদ্ধতি শিখতে পারবেন।
AngularJS স্ট্রিং(String)
AngularJS স্ট্রিং(String) এবং জাভাস্ক্রিপ্ট স্ট্রিং(String) একইঃ
উদাহরণ
<!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';age='20'">
<p>নাম ও বয়সঃ {{ fName + " " + age }}</p>
</div>
</body>
</html>
ফলাফল
ng-bind ব্যবহার করে একই উদাহরণঃ
উদাহরণ
<!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';age='20'">
<p>নাম ও বয়সঃ <span ng-bind="fName + ' ' + age"></span></p>
</div>
</body>
</html>
ফলাফল
AngularJS অবজেক্ট(Object)
AngularJS অবজেক্ট(Object) এবং জাভাস্ক্রিপ্ট অবজেক্ট(Object) একইঃ
উদাহরণ
<!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="person=
{fName:'Tamim',age:'20'}">
<p>নাম ও বয়সঃ {{ person.age }}</p>
</div>
</body>
</html>
ফলাফল
ng-bind ব্যবহার করে একই উদাহরণঃ
উদাহরণ
<!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="person=
{fName:'Tamim',age:'20'}">
<p>বয়সঃ <span ng-bind="person.age"></span></p>
</div>
</body>
</html>
ফলাফল
AngularJS অ্যারে(Array)
AngularJS অ্যারে(Array)এবং JavaScript অ্যারে(Array) একইঃ
উদাহরণ
<!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="scores=[23,12,4,53,64,2,45]">
<p>৪র্থ ফলাফলঃ {{ scores[3] }}</p>
</div>
</body>
</html>
ফলাফল
ng-bindব্যবহার করে একই উদাহরণঃ
উদাহরণ
<!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="scores=[23,12,4,53,64,2,45]">
<p>৪র্থ ফলাফলঃ <span ng-bind="scores[3]"></span></p>
</div>
</body>
</html>
ফলাফল
AngularJS এক্সপ্রেশন বনাম JavaScript এক্সপ্রেশন
জাভাস্ক্রিপ্ট এক্সপ্রেশনের মতই AngularJS এক্সপ্রেশনে লিটারেল, অপারেটর এবং ভ্যারিয়েবল থাকতে পারে।
AngularJS এক্সপ্রেশনকে এইচটিএমএল এর মধ্যে লেখা যায়, যেখানে জাভাস্ক্রিপ্ট এক্সপ্রেশনকে লেখা যায় না।
AngularJS এক্সপ্রেশনে conditional, loop এবং exception সাপোর্ট করে না, যেখানে জাভাস্ক্রিপ্ট এক্সপ্রেশনে সাপোর্ট করে।
AngularJS এক্সপ্রেশনে filter সাপোর্ট করে, যেখানে জাভাস্ক্রিপ্ট এক্সপ্রেশনে সাপোর্ট করে না।