مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند.در بخش های قبلی شما را با ساختار قسمت های مختلف AngularJS ، از جمله کنترلرها، آشنا کردیم. اما در این بخش قصد داریم که شما را با یک آبجکت یا شی کاربردی و مهم در AngularJS آشنا کنیم. که کاربرد اصلی این شی در واقع برای برقراری ارتباط بین نمای HTML و جاوااسکریپت است. برای آشنایی کامل شما با این آبجکت ما آموزش آشنایی با Scope یا دامنه در AngularJS و چگونگی استفاده از Scope را در این بخش، ارائه کرده ایم.
آشنایی با Scope یا دامنه در AngularJS
Scope یا دامنه قسمت اتصال بین HTML (نما یا view) و جاوا اسکریپت (کنترل کننده) است.
دامنه در واقع یک شی، با خواص و متدهای در دسترس است.
دامنه برای هر دو نمای view و کنترلر در دسترس است.
چگونگی استفاده از 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) به این ویژگی ها دسترسی پیدا می کند.
در View یا کد html ، شما از پیشوند $ scope استفاده نمی کنید، و فقط به یک نام مالکیت مانند {{carname}} مراجعه کنید.
مفهوم دامنه یا Scope
اگر ما برنامه AngularJS را در نظر می گیریم که شامل:
View، که نمایش کد HTML است.
Model یا مدل، که داده های موجود برای نمای فعلی است.
کنترل کننده، که عملکرد جاوا اسکریپت است که داده ها را تغییر می دهد.
سپس Scope یا دامنه ی مدل است.
Scope یا دامنه، یک شیء جاوا اسکریپت با خواص و روش هایی است. که برای هر دو نمای View و کنترل کننده در دسترس است.
مثال :
| <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> |
شناخت Scope یا دامنه
مهم است بدانید که در هر زمانی چه کاری انجام می دهید.
در دو مثال فوق فقط یک Scope یا دامنه وجود دارد، بنابراین دانستن Scope یا دامنه شما یک مسئله نیست.
مثال :
| <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 اشاره شده است.
ریشه ی Scope یا دامنه
تمام برنامه های کاربردی دارای $ rootScope هستند. که دامنه ی ایجاد شده در عنصر HTML است. که حاوی دستورالعمل ng-app است.
rootScope در کل برنامه در دسترس است.
اگر یک متغیر در هر دو دامنه فعلی و در rootScope یک نام مشابه داشته باشد، برنامه از یک مورد در دامنه فعلی استفاده می کند.
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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> |
کلام آخر
در این بخش، همانطور که عنوان آشنایی با Scope یا دامنه در AngularJS ، پیداست. به منظور آشنایی بیشتر شما با مبحث Scope یا دامنه و ساختار و کاربرد آن در AngularJS ارائه گردید. که امیدواریم به اندازه ی کافی برای شما مفید بوده باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
