AngularJS স্কোপ

স্কোপ (scope) হল HTML (ভিউ) এবং JavaScript (কন্ট্রোলার) মধ্যের বাঁধা অংশ।

স্কোপ (scope) হল প্রকৃতি যা উপলব্ধ প্রকৃতি এবং পদ্ধতি সহ আছে。

স্কোপ (scope) ভিউ এবং কন্ট্রোলারকেও উপলব্ধ রয়েছে。

কিভাবে স্কোপ (scope) ব্যবহার করবেন?

আপনি যখন AngularJS-এর কন্ট্রোলার তৈরি করেন তখন আপনি যথা: $scope অবজেক্ট হিসাবে পারামিটার পাঠানো হয়:

উদাহরণ

কন্ট্রোলারে তৈরি হওয়া প্রকৃতির এটা ভিউতে উল্লেখ করা যেতে পারে:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>

আমার দ্বারা চেষ্টা করুন

যখন কন্ট্রোলারে যোগ করা হয়েছে $scope অবজেক্ট যোগ করার সময়, দৃশ্য (HTML) এই বৈশিষ্ট্যগুলোকে প্রত্যাহার করতে পারে

দৃশ্যে, আপনি $scope প্রতীক, আপনি শুধুমাত্র একটি বৈশিষ্ট্য নাম উল্লেখ করতে হবে, যেমন {{carname}}。

সময়কাল বোঝা

যদি আমরা অ্যাংগুলারজেস অ্যাপ্লিকেশনকে নিচের কিছু অংশ থেকে তৈরি হওয়ার জন্য ভাবি

  • দৃশ্য, যা এইচটিএমএল
  • মডেল, যা বর্তমান দৃশ্যের উপলব্ধ তথ্য
  • কন্ট্রোলার, যা জাভাস্ক্রিপ্ট ফাংশন, যা তথ্য তৈরি/পরিবর্তন/মুক্তি/নিয়ন্ত্রণ করে

সময়কাল হলো মডেল

সময়কাল একটি অধিকার এবং পদ্ধতি সহ জাভাস্ক্রিপ্ট অবজেক্ট, যার অধিকার এবং পদ্ধতি দৃশ্য এবং কন্ট্রোলারের জন্য উপলব্ধ

উদাহরণ

যদি আপনি দৃশ্যে কোনও পরিবর্তন করেন, তবে মডেল এবং কন্ট্রোলার অপদান করা হবে:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>আমার নাম হল {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

আমার দ্বারা চেষ্টা করুন

আপনার সময়কাল বোঝা

কোনও সময় আপনার সময়কাল বোঝা খুবই গুরুত্বপূর্ণ

উপরোক্ত দুই উদাহরণে, একমাত্র একটি সময়কাল রয়েছে, তাই আপনার সময়কাল বোঝা কোনও সমস্যা নয়, কিন্তু বড় অ্যাপ্লিকেশনের ক্ষেত্রে, HTML DOM-এর কিছু অংশ শুধুমাত্র কোনও সময়কালকেই প্রত্যাহার করতে পারে。

উদাহরণ

ng-repeat ইনস্ট্রাকশন সংস্কার করার সময়, প্রত্যেকটি পুনরাবৃত্তি বর্তমান পুনরাবৃত্ত অবজেক্টটি প্রত্যাহার করতে পারে:

<div ng-app="myApp" ng-controller="myCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

আমার দ্বারা চেষ্টা করুন

প্রত্যেক <li> ইলেকট্রনিক উপাদানগুলো বর্তমান পুনরাবৃত্ত অবজেক্টটি প্রত্যাহার করতে পারে, যেমন এই উদাহরণে, একটি শব্দ, যোগ করে x উল্লেখ করতে

রুটস্কোপ

সকল অ্যাপ্লিকেশনই একটি $rootScopeতা হলো যে অন্তর্ভুক্ত ng-app ইনস্ট্রাকশনের HTML ইলেকট্রনিক উপাদানে তৈরি হওয়া সময়কাল

rootScope সমগ্র অ্যাপ্লিকেশনে উপলব্ধ

যদি কোনও বিন্যাস বর্তমান সময়কাল এবং রুটস্কোপ (rootScope) তে একই নাম রয়েছে, তবে অ্যাপ্লিকেশন বর্তমান সময়কালের বিন্যাসটি ব্যবহার করবে。

উদাহরণ

কন্ট্রোলারের সময়কাল এবং rootScope-এ একটি নাম "color" ভালো রয়েছে:

<body ng-app="myApp">
<p>রুটস্কোপের পছন্দের রঙ:</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>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
  $scope.color = "red";
});
</script>
</body>

আমার দ্বারা চেষ্টা করুন