AngularJS Expressions
AngularJS এক্সপ্রেশন ব্যবহার করে HTML এর সাথে ডেটা আবদ্ধ করে।
AngularJS এক্সপ্রেশনগুলি ডবল বন্ধনীতে লেখা যেতে পারে: {{ expression }}।
AngularJS এক্সপ্রেশনগুলি একটি নির্দেশের ভিতরেও লেখা যেতে পারে: ng-bind="expression"।
AngularJS এক্সপ্রেশনটি সমাধান করে এবং যেখানে এক্সপ্রেশনটি লেখা হয় সেখানে ফলাফল প্রদান করে।
AngularJS এক্সপ্রেশনগুলি জাভাস্ক্রিপ্ট এক্সপ্রেশনের মতো: এগুলিতে আক্ষরিক, অপারেটর এবং ভেরিয়েবল থাকতে পারে।
উদাহরণ {{ 5 + 5 }} বা {{ firstName + " " + lastName }}
একটি মৌলিক উদাহরণ
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>গুরুত্বপূর্ণ নোট:
আপনি যদি ng-অ্যাপ নির্দেশিকাটি সরিয়ে দেন, তাহলে HTML এটি সমাধান না করেই অভিব্যক্তি প্রদর্শন করবে:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>আপনি যে কোন জায়গায় এক্সপ্রেশন লিখতে পারেন, AngularJS এক্সপ্রেশনটি সমাধান করবে এবং ফলাফল ফিরিয়ে দেবে।
CSS অ্যাট্রিবিউটের উদাহরণ
নীচের ইনপুট বাক্সের মান পরিবর্তন করে এর রঙ পরিবর্তন করুন:
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>AngularJS সংখ্যা
AngularJS সংখ্যা জাভাস্ক্রিপ্ট সংখ্যার অনুরূপ:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>ng-bind ব্যবহার করে একই উদাহরণ:
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>দ্রষ্টব্য:
ng-init ব্যবহার করা খুব সাধারণ নয়। আপনি কন্ট্রোলারের অধ্যায়ে ডেটা শুরু করার আরও ভাল উপায় শিখবেন।
AngularJS স্ট্রিংস
AngularJS স্ট্রিং জাভাস্ক্রিপ্ট স্ট্রিং অনুরূপ:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>ng-bind ব্যবহার করে একই উদাহরণ:
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>AngularJS অবজেক্ট
AngularJS অবজেক্ট জাভাস্ক্রিপ্ট অবজেক্টের অনুরূপ:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>ng-bind ব্যবহার করে একই উদাহরণ:
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>AngularJS অ্যারে
AngularJS অ্যারে জাভাস্ক্রিপ্ট অ্যারের অনুরূপ:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>ng-bind ব্যবহার করে একই উদাহরণ:
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>AngularJS Expressions vs. JavaScript Expressions
| বৈশিষ্ট্য | AngularJS Expressions | JavaScript Expressions |
|---|---|---|
| Literals, operators, variables | ✓ হ্যাঁ | ✓ হ্যাঁ |
| HTML এর মধ্যে লেখা | ✓ হ্যাঁ | ✗ না |
| Conditionals (if, else) | ✗ না | ✓ হ্যাঁ |
| Loops (for, while) | ✗ না | ✓ হ্যাঁ |
| Exceptions (try, catch) | ✗ না | ✓ হ্যাঁ |
| Filters | ✓ হ্যাঁ | ✗ না |
আরও জানুন:
আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়ালে জাভাস্ক্রিপ্ট সম্পর্কে আরও জানুন।