আঙ্গুলারজেএস স্কোপ - AngularJs Scope
Scope এইচটিএমএল view এবং জাভাস্ক্রিপ্ট controller এর মধ্যে বন্ধন সৃষ্টি করে।
AngularJS এ $scope হলো প্রোপার্টি এবং মেথড সম্বলিত জাভাস্ক্রিপ্ট অবজেক্ট।
view এবং controller উভয়ের মাঝেই স্কোপ বিদ্যমান থাকে।
স্কোপ(scope) কিভাবে ব্যবহার করতে হয়?
আপনি যখন AngularJS এপ্লিকেশনে কন্ট্রোলার(controller) তৈরি করেন তখন $scope অবজেক্টকে কন্ট্রোলারের আর্গুমেন্ট হিসাবে ব্যবহার করতে পারনেঃ
উদাহরণ
<!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">
<h3>{{animal}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.animal = "Tiger";
});
</script>
</body>
</html>
ফলাফল
যখন কন্ট্রলারের $scope অবজেক্টে প্রোপার্টি যোগ করা হয় তখন view (HTML) ঐ সকল প্রোপার্টিকে এক্সেস(access) করতে পারে।
view এর মধ্যে $scope প্রিফিক্সের প্রয়োজন হয় না, শুধুমাত্র প্রোপার্টি নাম উল্লেখ্য করতে হয়। যেমন-{{animal}}।
Scope সম্মন্ধে আরোও কিছু তথ্য
AngularJS এপ্লিকেশন যদি নিম্নোক্ত উপাদান নিয়ে গঠিত হয়ঃ
View: হলো এইচটিএমএল যা ব্রাউজারে প্রদর্শিত হয়।Model: হলো ডাটা(data) যা চলমান View এর জন্য ডেটা সরবরাহ করে।Controller: জাভাস্ক্রিপ্ট ফাংশন যা ডাটা যোগ/পরিবর্তন/অপসারণ/নিয়ন্ত্রণ করে।
তাহলে স্কোপ(scope) হলো মডেল(model)
scope হলো জাভাস্ক্রিপ্ট অবজেক্ট যার প্রোপার্টি এবং মেথড থাকতে পারে এবং যা view ও controller উভয়ের মধ্যেই সহজলভ্য।
আপনি যদি view পরিবর্তন করেন তাহলে model এবং controller উভয়ই আপডেট হবেঃ
উদাহরণ
<!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 ng-model="name">
<h3>আমার নামঃ {{name}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Tamim Iqbal";
});
</script>
</body>
</html>
ফলাফল
আপনার স্কোপ সম্মন্ধে জানুন
আপনি angularJS এপ্লিকেশনে কোনো স্কোপ(scope) নিয়ে কাজ করছেন তা সব সময়ই জানা গুরুত্বপূর্ণ।
উপরের উদাহরণে দুটিতে শুধুমাত্র একটি স্কোপ(scope) ব্যবহার করা হয়েছে। তাই উপরের উদাহরণের স্কোপ জানার প্রয়োজন পড়ে না। কিন্তু বড় বড় এপ্লিকেশনের কথা ভাবুন যেখানে HTML DOM এর অনেকগুলো সেকশন থাকতে পারে। সেক্ষেত্রে অনেক স্কোপ থেকে একটি নির্দিষ্ট স্কোপকে এক্সেস করতে হবে।
আপনি যখন ng-repeat ডিরেক্টিভ নিয়ে ডিল(deal) করবেন তখন প্রত্যেক রিপিট আইটেমের জন্য চলমান আইটেম অবজেক্টকে এক্সেস করতে থাকে।
উদাহরণ
<!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">
<ul>
<li ng-repeat="a in animals">{{a}}
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.animals = ["Tiger", "Lion", "Horse"];
});
</script>
</body>
</html>
ফলাফল
উপরের উদাহরণে প্রত্যেক <li> এলিমেন্ট চলমান আইটেম অবজেক্ট animals কে এক্সেস করেছে। কারণ a এর মাধ্যমে ইহাকে রেফার করা হয়েছে।
রুট স্কোপ
সকল এপ্লিকেসনেরই একটি $rootScope থাকে যা এইচটিএমএল এলিমেন্টের উপরে ভিত্তি করে একটি স্কোপ এবং যার মধ্যে ng-app ডিরেক্টিভ বিদ্যমান থাকে।
সমগ্র এপ্লিকেশন জুড়েই rootScope কে এক্সেস(access) করা যায়।
যদি কোনো ভ্যারিয়েবলের নাম rootScope এবং চলমান scope উভয় ক্ষেত্রে একই হয় তাহলে angularJS এপ্লিকেশন চলমান স্কোপের ভ্যারিয়েবলকে ব্যবহার করে।
নিচের উদাহরনে "color" ভ্যারিয়েবল কন্ট্রোলার(controller) scope এবং rootScope উভয় ক্ষেত্রেই বিদ্যমান।
উদাহরণ
<!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="myApp">
<p>rootScope এর ফেভারিট কালারঃ</p>
<h3>{{color}}</h3>
<div ng-controller="myCtrl">
<p>কন্ট্রলার স্কোপের ফেভারিট কালারঃ/p>
<h3>{{color}}</h3>
</div>
<p>rootScope এর ফেভারিট কালার এখনোঃ</p>
<h3>{{color}}</h3>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'green';
});
app.controller('myCtrl', function($scope) {
$scope.color = "black";
});
</script>
</body>
</html>
ফলাফল