با سلام در قسمت هشتم آموزش انگولار جی اس قصد داریم دامنه‌ها را موردبررسی قرار دهیم.
پیشنهاد می‌شود اگر سایر قسمت‌های این پست را مطالعه نکرده‌اید به مطالعه‌ی آنها از طریق کلیک روی کلمه‌ی آموزش انگولار جی اس بپردازید.
دامنه‌ها در انگولار جی اس اتصال قسمت نمایشی HTML و قسمت کنترل‌کننده‌ی جاوا اسکریپت برقرار می‌کند.
دامنه یک شیء است با خواص و روش‌های موجود.
دامنه برای هر دو قسمت نمایش و کنترل‌کننده در دسترس است.
چگونه از دامنه‌ها استفاده کنیم؟
هنگامی‌که یک کنترل‌کننده را در AngularJS ایجاد می‌کنید، شیء $scope را به‌عنوان یک استدلال منتقل می‌کنید:
خواص ساخته‌شده در کنترل‌کننده، می‌تواند در نظر گرفته شود:
|
1 2 3 4 5 6 7 8 9 10 |
<div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1> </div> < script > var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "BMW"; }); </script> <p>ویژگی "carname" در کنترل کننده ساخته شده است و با استفاده از {{}} میتوان در قسمت نمایش ان را مشاهده کرد</p> |
هنگام اضافه کردن خواص به شیء $scope در کنترل‌کننده، قسمت نمایشی (HTML) به این ویژگی‌ها دسترسی پیدا می‌کند.
در قسمت نمایشی شما از پیشوند $scope استفاده نمی‌کنید بلکه فقط یک نام اموال مانند {{carname}} برای مراجعه می‌نویسید.
درک دامنه
اگر ما برنامه AngularJS را در نظر بگیریم که شامل:
نمایش، کد HTML است.
مدل، که داده‌های موجود برای نمای فعلی است.
کنترل‌کننده، که عملکرد جاوا اسکریپت است که باعث تغییر / حذف / کنترل داده‌ها می‌شود.
سپس دامنه یک مدل است.
همان‌طور که در ابتدای این مقاله اشاره شد دامنه یک شیء جاوا اسکریپت با خواص و روش‌هایی است که برای هر دو قسمت نمایشی و کنترل‌کننده در دسترس هستند.
اگر تغییراتی در قسمت نمایشی ایجاد کنید، مدل و کنترل‌کننده به‌روز می‌شود:
|
1 2 3 4 5 6 7 8 9 10 11 |
<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 = "Morteza Afzali"; }); </script> <p>هنگامی که نام داخل کادر را عوض کنید تغییر شما بر روی مدل تاثیر میگذارد هم همچنین باعث تغییر مقدار کنترل کننده می‌شود.</p> |
دامنه‌های خود را بشناسید
مهم است بدانید که در هر زمان چه‌کاری انجام می‌دهید.
در دو مثال فوق فقط یک دامنه وجود دارد، بنابراین دانستن محدوده شما یک مسئله نیست، اما برای برنامه‌های بزرگ‌تر می‌توانید بخش‌هایی در HTML DOM وجود داشته باشد که تنها می‌تواند به حوزه‌های خاص دسترسی پیدا کند.
در هنگام رسیدگی به دستورالعمل ng-repeat، هر تکرار دسترسی به شیء تکرار فعلی دارد:
|
1 |
<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 = ["Morteza", "Mohammad Reza", "Pooriya"]; }); <p>متغییر "x" در هر بار تغییر مقدار مختلفی را میگیرد برای اثبات این موضوع میتوجه میشوید که هر مقدار دامنه‌ی خاصی را دارا می باشد..</p> |
هر عنصر دارای دسترسی به شیء تکرار فعلی است، در این حالت یک رشته است که با استفاده از x اشاره‌شده است.
دامنه‌ی ریشه
تمام برنامه‌های کاربردی دارای $rootScope هستند که دامنه ایجادشده در عنصر HTML است که حاوی دستورالعمل ng-app است.
توجه داشته باشید که دامنه‌ی ریشه در کل برنامه در دسترس می‌باشد.
اگر یک متغیر دارای همان نام در هر دامنه جاری و در دامنه‌ی ریشه باشد، برنامه از یکی از دامنه‌های جاری را استفاده می‌کند.
یک متغیر بانام “color” موجود در کنترل‌کننده دامنه و دامنه‌ی ریشه وجود دارد:
|
1 |
<p>رنگ های مورد علاقه ی دامنه ی ریشه:</p> <h1>{{color}}</h1> <div ng-controller="myCtrl"> <p>رنگ مورد علاقه ی دامنه ی کنترل کننده:</p> <h1>{{color}}</h1> </div> <p>هنوز هم رنگ مورد علاقه ی دامنه‌ی ریشه رنگ زیر است:</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"; }); <p>این نکته ی مهم را به یاد داشته باشید که رنگ متغییر کنترل کننده هرگز بر روی دامنه‌ی ریشه نوشته نمیشود و دامنه ی ریشه مقدار ثابتی را دارد.</p> |
با موفقیت به انتهای قسمت هشتم از پست‌های انگولار جی اس رسیدید ممنون که تا اینجا با کدپز همراه بودید.
اگر نیاز به مطالعه‌ی موارد بیشتر دارید می‌توانید به سایت w3schools مراجعه فرمایید.
موفق باشید.
