AngularJS Kapsamı
Kapsam, HTML (görünüm) ve JavaScript (denetleyici) arasındaki bağlayıcı kısımdır.
Kapsam, mevcut özelliklere ve yöntemlere sahip bir nesnedir.
Kapsam hem görünüm hem de denetleyici için kullanılabilir.
Kapsam Nasıl Kullanılır?
AngularJS'de bir controller yaptığınızda, $scopenesneyi argüman olarak iletirsiniz:
Örnek
Kontrolörde yapılan özellikler, görünümde ifade edilebilir:
<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>
Denetleyicideki nesneye özellikler eklerken $scope
, görünüm (HTML) bu özelliklere erişim sağlar.
Görünümde ön eki kullanmazsınız, $scopesadece gibi bir özellik adına başvurursunuz {{carname}}.
Kapsamı Anlamak
Bir AngularJS uygulamasının şunlardan oluştuğunu düşünürsek:
- HTML olan Görünüm.
- Geçerli görünüm için kullanılabilen veriler olan model.
- Verileri yapan/değiştiren/kaldıran/kontrol eden JavaScript işlevi olan denetleyici.
O zaman kapsam Modeldir.
Kapsam, hem görünüm hem de denetleyici için kullanılabilen özelliklere ve yöntemlere sahip bir JavaScript nesnesidir.
Örnek
Görünümde değişiklik yaparsanız, model ve denetleyici güncellenecektir:
<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>
Kapsamınızı Bilin
Herhangi bir zamanda hangi kapsamla uğraştığınızı bilmek önemlidir.
Yukarıdaki iki örnekte yalnızca bir kapsam vardır, bu nedenle kapsamınızı bilmek bir sorun değildir, ancak daha büyük uygulamalar için HTML DOM'de yalnızca belirli kapsamlara erişebilen bölümler olabilir.
Örnek
Yönerge ile uğraşırken ng-repeat, her tekrarın mevcut tekrar nesnesine erişimi vardır:
<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>
Her <li>öğenin geçerli yineleme nesnesine, bu durumda kullanılarak başvurulan bir dizeye erişimi vardır x.
Kök Kapsamı
Tüm uygulamalar , yönergeyi $rootScopeiçeren HTML öğesinde oluşturulan kapsam olan bir alana sahiptir.ng-app
rootScope tüm uygulamada mevcuttur.
Bir değişken hem geçerli kapsamda hem de rootScope'ta aynı ada sahipse, uygulama mevcut kapsamdaki değişkeni kullanır.
Örnek
Hem denetleyicinin kapsamında hem de rootScope'da "color" adlı bir değişken bulunur:
<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>