AngularJS এক্সপ্রেশন

পূর্ববর্তী পৃষ্ঠা AngularJS সম্পর্কে
পরবর্তী পৃষ্ঠা AngularJS মডিউল

এঞ্জুলারজএসএক্সপ্রেসনডাটা বাইন্ডিং করে এইচটিএমএল এবং

AngularJS এক্সপ্রেশন

এঞ্জুলারজএস এক্সপ্রেসনটি ডবল বগুজস্কোপের ভিতরে লেখা যায়:{{ expression }}。

এঞ্জুলারজএস এক্সপ্রেসনও ইনজেকশনের ভিতরে লেখা যায়:ng-bind="expression"。

এঞ্জুলারজএস এক্সপ্রেসনটি পার্স করবে এবং এক্সপ্রেসন লিখার জায়গায় ফলাফল ফিরিয়ে দেবে।

AngularJS এক্সপ্রেশনঅনেকটা মিলছে জেভাস্ক্রিপ্ট এক্সপ্রেসনতারা লিটারাল, অপারেটর এবং ভেক্টর ধারণ করতে পারে।

উদাহরণ {{ 5 + 5 }} বা {{ firstName + " " + lastName }}

প্রকল্প

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>আমার প্রথম এক্সপ্রেসন: {{ 5 + 5 }}</p>
</div>
</body>
</html>

আপনার হাতে পরীক্ষা করুন

যদি মোছে করা হয় ng-app ইনজেকশন, HTML এক্সপ্রেসনটি অবশ্যই প্রদর্শন করবে, তা পার্স করবে না:

প্রকল্প

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>আমার প্রথম এক্সপ্রেসন: {{ 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 এর সংখ্যা যেমন JavaScript এর সংখ্যা:

প্রকল্প

<div ng-app="" ng-init="quantity=1;cost=5">
<p>মোট পরিমাণ (ডলার): {{ quantity * cost }}</p>
</div>

আপনার হাতে পরীক্ষা করুন

ব্যবহার করুন ng-bind একই উদাহরণ:

প্রকল্প

<div ng-app="" ng-init="quantity=1;cost=5">
<p>মোট পরিমাণ (ডলার): <span ng-bind="quantity * cost"></span></p>
</div>

আপনার হাতে পরীক্ষা করুন

ng-init এর ব্যবহার খুবই অসামান্য। আপনি নিয়ন্ত্রকের বিষয়ের অধ্যায়ে আরও ভালো পদ্ধতির সম্পর্কে শিখবেন。

AngularJS এর স্ট্রিং

AngularJS এর স্ট্রিং যেমন JavaScript এর স্ট্রিং:

প্রকল্প

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>নাম: {{ firstName + " " + lastName }}</p>
</div>

আপনার হাতে পরীক্ষা করুন

ng-bind এর মতো একই উদাহরণ:

প্রকল্প

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>নাম: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

আপনার হাতে পরীক্ষা করুন

AngularJS এর অবজেক্ট

AngularJS এর অবজেক্ট যেমন JavaScript এর অবজেক্ট:

প্রকল্প

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>নাম: {{ person.lastName }}</p>
</div>

আপনার হাতে পরীক্ষা করুন

ng-bind এর মতো একই উদাহরণ:

প্রকল্প

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>নাম: <span ng-bind="person.lastName"></span></p>
</div>

আপনার হাতে পরীক্ষা করুন

AngularJS এর আইসিজেএস

AngularJS এর আইসিজেএস সমান হয় যেমন JavaScript এর আইসিজেএস:

প্রকল্প

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>তৃতীয় ফলাফল হল: {{ points[2] }}</p>
</div>

আপনার হাতে পরীক্ষা করুন

ng-bind এর মতো একই উদাহরণ:

প্রকল্প

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>তৃতীয় ফলাফল হল <span ng-bind="points[2]"></span></p>
</div>

আপনার হাতে পরীক্ষা করুন