در این مقاله به تعریف اسکوب و نحوه بکارگیری آن در نرم افزارهای تحت وب آنگولار می پردازیم.
اسکوپ ها قسمت اتصال بین HTML(VIEW) و جاوا اسکریپت (Controller) هستند.
اسکوپ یک شیئ است که به ویژگی ها و متد ها درسترسی دارد.
اسکوپ برای View و کنترلر ها قابل دسترسی است.
چگونه از استکوپ استفاده کنیم؟
وقتی شما یک کنترلر در آنگولار ایجاد می کنید. شما یک شئی $scope را بصورت یک آرگومان ارسال می کنید:
مثال:
صفت های ایجاد شده در کنترلر میتوانند به یک Viewارجاع شوند:
<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(View)میتواند به آن صفت دسترسی دارد.
در Viewشما از پیشوند $scope استفاده نمی کنید ، شما تنها نام صفت را مانند {{carname}} بکار می برید.
اسکوپ چیست
اگر به نرم افزار انگولار به صورت بخش های زیر نگاه کنیم :
Veiw: که در واقع HTML است
Model: که درواقع دادههای در دسترس برای View است
Controller: عملگر جاوااسکریپت است که داده ها را ایجاد، تغییر،حذف و کنترل می کند.
با این تعاریف اسکوپ یک Model است.
اسکوپ یک شیئ جاوا اسکریپت است که دارای صفت و متد میباشد، که هر دوی اینها برای View و Coteroller ها قابل استفاده هستند.
مثال
اگر شما در Veiw خود تغییر ایجاد کنید Model و Controller بر اساس تغییر بروزرسانی میشوند.:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</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> به شئی repetition دسترسی دارد . در این مثال ما از x برای چاپ مقادیر استفاده کرده ایم .
متد Root Scope
تمام نرم افزار ها یک $rootScope دارد که یک اسکوپ است، که روی تگ Htmlکه داری دستور العمل ng-app است ایجاد میشود.
rootScope در همه قسمت های نرم افزار قابل دسترسی است .
اگر یک متغییر نام یکسانی در current scope و rootScope داشته باشد نرم افزار از متغییری که در current scope قرار دارد استفاده می کند.
مثال:
یک متغییر به نام color در هم در Controller scopeو هم در rootScope وجود دارد:
<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>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
</body>
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت با شرکت سارگون تماس بگيريد