AngularJS Scope
Scope হল HTML (View) এবং JavaScript (কন্ট্রোলার) এর মধ্যে বাঁধাই করা অংশ।
সুযোগ উপলব্ধ বৈশিষ্ট্য এবং পদ্ধতি সহ একটি বস্তু.
স্কোপ ভিউ এবং কন্ট্রোলার উভয়ের জন্য উপলব্ধ।
মূল ধারণা:
স্কোপ হল একটি জাভাস্ক্রিপ্ট অবজেক্ট যা ভিউ এবং কন্ট্রোলারের মধ্যে ডেটা শেয়ারিং সক্ষম করে।
স্কোপ কিভাবে ব্যবহার করবেন?
আপনি যখন AngularJS এ একটি কন্ট্রোলার তৈরি করেন, তখন আপনি $scope অবজেক্টটিকে একটি যুক্তি হিসাবে পাস করেন:
উদাহরণ
কন্ট্রোলারে তৈরি বৈশিষ্ট্যগুলি ভিউতে নির্দিষ্ট করা যেতে পারে:
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>JavaScript:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>আপনি যখন কন্ট্রোলারে $স্কোপ অবজেক্টে বৈশিষ্ট্য যুক্ত করেন, তখন ভিউ (এইচটিএমএল) এই বৈশিষ্ট্যগুলিতে অ্যাক্সেস পায়।
একটি দৃশ্যে, আপনি $scope উপসর্গ ব্যবহার করেন না, আপনি শুধু একটি সম্পত্তির নাম উল্লেখ করেন, যেমন {{carname}}।
স্কোপ বোঝার
যদি আমরা অনুমান করি যে একটি AngularJS অ্যাপ্লিকেশনের মধ্যে রয়েছে:
দেখুন
HTML বিষয়বস্তু
মডেল
বর্তমান দৃশ্যের জন্য উপলভ্য ডেটা
নিয়ন্ত্রক
একটি জাভাস্ক্রিপ্ট ফাংশন যা ডেটা তৈরি/সংশোধন/মুছে দেয়/নিপুণ করে
তারপর সুযোগ হল মডেল।
একটি স্কোপ হল একটি জাভাস্ক্রিপ্ট অবজেক্ট যার বৈশিষ্ট্য এবং পদ্ধতিগুলি ভিউ এবং কন্ট্রোলার উভয়ের জন্য উপলব্ধ।
উদাহরণ
আপনি যখন ভিউতে পরিবর্তন করেন, মডেল এবং কন্ট্রোলার আপডেট হয়:
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>JavaScript:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>আপনার সুযোগ জানুন
আপনি যে কোন সময় কোন সুযোগ নিয়ে কাজ করছেন তা জানা গুরুত্বপূর্ণ।
উপরের দুটি উদাহরণে শুধুমাত্র একটি সুযোগ রয়েছে, তাই আপনার সুযোগ জানা কোনো সমস্যা নয়, তবে বড় অ্যাপ্লিকেশনের জন্য শুধুমাত্র HTML DOM-এর নির্দিষ্ট কিছু অংশ নির্দিষ্ট স্কোপে অ্যাক্সেসযোগ্য।
উদাহরণ
এনজি-রিপিট নির্দেশের সাথে কাজ করার সময়, প্রতিটি পুনরাবৃত্তির বর্তমান পুনরাবৃত্তি বস্তুতে অ্যাক্সেস থাকে:
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>JavaScript:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>প্রতিটি <li> উপাদানের বর্তমান পুনরাবৃত্তি বস্তুর অ্যাক্সেস রয়েছে, এই ক্ষেত্রে একটি স্ট্রিং, যা x ব্যবহার করে উপস্থাপন করা হয়।
রুট স্কোপ
সমস্ত অ্যাপ্লিকেশানের একটি $rootScope আছে, যা এনজি-অ্যাপ নির্দেশিকা সহ HTML উপাদানে তৈরি করা সুযোগ।
রুটস্কোপ অ্যাপ্লিকেশন জুড়ে উপলব্ধ।
যদি একটি ভেরিয়েবলের বর্তমান স্কোপ এবং রুটস্কোপ উভয় ক্ষেত্রেই একই নাম থাকে, তাহলে অ্যাপ্লিকেশনটি বর্তমান সুযোগের একটি ব্যবহার করে।
উদাহরণ
"রঙ" নামের একটি পরিবর্তনশীল নিয়ামকের সুযোগ এবং রুটস্কোপ উভয় ক্ষেত্রেই বিদ্যমান:
HTML:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>JavaScript:
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
</body>স্কোপ অগ্রাধিকার:
বর্তমান স্থানীয় স্কোপ ভেরিয়েবলগুলি গ্লোবাল রুটস্কোপ ভেরিয়েবলগুলিকে ওভাররাইড করে যখন ভেরিয়েবলগুলির একই নাম থাকে৷ এটি স্কোপ চেইনের একটি গুরুত্বপূর্ণ দিক।
স্কোপ অনুক্রম
| সুযোগের ধরন | সংজ্ঞা | অ্যাক্সেস | উদাহরণ |
|---|---|---|---|
| $rootScope | Global scope | পুরো আবেদনে | $rootScope.color = 'blue' |
| Controller Scope | Local scope | শুধুমাত্র কন্ট্রোলার ভিতরে | $scope.color = 'red' |
| ng-repeat Scope | Iteration scope | প্রতিটি পুনরাবৃত্তির জন্য | ng-repeat="x in names" |
| Directive Scope | Isolated scope | শুধুমাত্র ভিতরে নির্দেশিকা | scope: { ... } in directives |
ব্যায়ামের মাধ্যমে শেখা
AngularJS এ $স্কোপ অবজেক্টের প্রধান ভূমিকা কি?
স্কোপ সেরা অভ্যাস
Minimal Scope Usage
যতটা সম্ভব $স্কোপে কিছু বৈশিষ্ট্য যোগ করুন
Avoid Direct DOM Manipulation
$স্কোপে সরাসরি DOM ম্যানিপুলেশন করবেন না
ঘড়ির ব্যবহার কমিয়ে দিন
খুব বেশি $স্কোপ।$ওয়াচ() কল কর্মক্ষমতা প্রভাবিত করবে
Use ControllerAs Syntax
আধুনিক AngularJS এ ControllerAs সিনট্যাক্স ব্যবহার করুন
Clear Scope Names
স্কোপ ভেরিয়েবলের পরিষ্কার এবং অর্থপূর্ণ নাম দিন
স্কোপ অ্যাপ্লিকেশন
Two-way Data Binding
ভিউ এবং কন্ট্রোলারের মধ্যে স্বয়ংক্রিয় ডেটা সিঙ্ক্রোনাইজেশন
Event Handling
হ্যান্ডলিং এবং ব্যবহারকারী ইভেন্টে প্রতিক্রিয়া
Data Filtering
দেখার আগে ডেটা ফিল্টারিং এবং ফরম্যাটিং
Real-time Updates
তথ্য পরিবর্তনের তাত্ক্ষণিক প্রতিফলন