অ্যাঙ্গুলার জেএস (AngularJS) এক্সপ্রেশন (Expressions)
Article By: Protap Chandra
AngularJS Expressions ব্যবহার করে HTML এর সঙ্গে ডাটা আবদ্ধ (bind) করা হয়।
AngularJS expression দ্বিতীয় বন্ধনীর ভেতর লেখা হয়: {{ expression }}.
expression HTML এর সঙ্গে ng-bind directive এর মতো একই ভাবে ডাটা আবদ্ধ করে।
ঠিক যেখানে expression লেখা হবে সেখানেই AngularJS আউটপুট প্রদান করবে।
AngularJS expression এর সঙ্গে JavaScript expression এর মিল পাওয়া যায়: এরা literals, operators এবং variables ধারণ করতে পারে।
যেমন: {{ 5 + 5 }} or {{ firstName + ” ” + lastName }}
AngularJS Expressions এর উদাহরণ:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
ফলাফল :
My first expression: 10
আপনি যদি ng-app directive অপসারণ করেন, তাহলে HTML এখানকার expression কে হুবহু প্রদর্শন করবে। যুক্তিটির সমাধান করবে না।
ng-app directive ছাড়া AngularJS উদাহরণ:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
ng-app directive ব্যবহার না করায় এই উদাহরণের আউপুট আসবে: My first expression: {{ 5 + 5 }}
AngularJS Numbers
AngularJS number ঠিক JavaScript number এর মতোই।
উদাহরণ:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
এই উদাহরণের আউটপুট আসবে :
Total in dollar: 5
ng-bind ব্যবহার করে একে ভিন্নভাবে লেখা যায়:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
AngularJS Strings
AngularJS string ঠিক JavaScript string এর মতোই
উদাহরণ:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
এই উদাহরণের আউটপুট আসবে:
The name is: John Doe
ng-bind ব্যবহার করে উদারহণটি এভাবে লেখা যায়:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
এখানেও একই আউটপুট আসবে।
AngularJS Objects
AngularJS objects ঠিক JavaScript object এর মতো
উদাহরণ:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>নাম হল: {{ person.lastName }}</p>
</div>
এই উদাহরণের আউটপুট আসবে:
নাম হল: Doe
ng-bind ব্যবহার করে উদারহরণটি এভাবে লেখা যায়:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>নাম হল: <span ng-bind="person.lastName"></span></p>
</div>
এখানেও একই আউটপুট আসবে।
AngularJS Arrays
AngularJS array ঠিক JavaScript array এর মতো।
উদাহরণ:
<div ng-app=”” ng-init=”points=[1,15,19,2,40]”>
<p>তৃতীয় অবস্থানে আছে: {{ points[2] }}</p>
</div>
উদাহরণে আউটপুট আসবে:
তৃতীয় অবস্থানে আছে 19.
ng-bind ব্যবহার করে উদাহরণটি এভাবে লেখা যায়:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>তৃতীয় অবস্থানে আছে <span ng-bind="points[2]"></span></p>
</div>
আশা করি খুব সহজে আপনারা অ্যাঙ্গুলার জেএস (AngularJS) এক্সপ্রেশন (Expressions) শিখতে পেরেছেন।
AngularJS, HTML কে নতুন এট্রিবিউট দ্বারা বৃস্তৃত করে।