AngularJS Scope nedir?
AngularJS Scope ne işe yarar?
Toplam 1 cevap
AngularJS Scope nedir? AngularJS Scope ne işe yarar?
AngularJS, MVC yapısını kullanılır. MVC uygulamalarında uygulama 3 parçacan oluşur. Model, View, Controller.
Model, uygulamada kullanılan veriyi, View kullanıcı tarafından görüntülenen arayüzü, Controller ise uygulamamızda asıl işin yapıldığı, verinin işlendiği yapıyı temsil eder.
Basitce Scope, Controller ve View arasında veri aktarma, Controller tarafındaki metodu çalıştırma gibi işlemlerde kullanılır.
$scope nedir?
AngularJS'de scope özel bir javascript nesnesidir. Scope modeli barındırır. Controlller'da model verisine $scope nesnesi ile erişilir.
<script>
var uygulamam = angular.module("uygulamam", []);
uygulamam.controller("kontrolor", function($scope) {
$scope.web= "uzmanim.net";
$scope.uye = "alattin";
});
</script>$scope, Controller tarafından parametre olarak alınır. $scope içine yukarıdaki örnekte olduğu gibi özellikler tanımlamak mümkündür. Bu özelliklere aynı şekilde View altından erişilebilir:
<div ng-app = "uygulamam" ng-controller = "kontrolor">
<p>{{web}} <br/> {{uye}} </p>
</div>Controller içinde tanımlı $scope, view tarafında ng-controller özelliğinin atandığı element içinde geçerlidir. Bir uygulamada birden fazla Controller olabileceği için birden fazla $scope tanımı da mümkündür.
Root Scope nedir?
AngularJS uygulamalarında, tüm uygulamalar bir kök scope'a sahiptir. Bu en tepedeki Scope $rootScope olarak adlandırılır. $rootScope, $scope'un aksine tüm uygulamayı kapsar. Tüm uygulamadan erişilebilir. ng-app deklare edildiğinde $rootScope yaratılır.
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="scopeUygulamasi">
<p>Favori siteniz <b>{{site}} </b>($rootScope)</p>
<hr />
<div ng-controller="ktrl">
<p> Favori siteniz<b> {{site}} </b>($scope)</p>
</div>
<script>
var uygulama = angular.module('scopeUygulamasi', []);
uygulama.run(function ($rootScope) {
$rootScope.site='uzmanim.net'
})
uygulama.controller('ktrl',function ($scope) {
$scope.site = 'google.com';
})
</script>
</body>
</html>Yukarıdaki uygulamada $rootScope ng-app tanımlı olan uygulamanın tamamından erişilebilir. $scope ise sadece kapsamı dahilinde ng-conroller ile işaretlenen element içinde erişilebilir.
Scope inheritance (Kalıtım) nedir?
Bir uygulama birden fazla Controller'a sahip olabilir. Bu durumda iç içe olan Controller'lar birbirinden miras alırlar. Üstte tanımlı kontrolör içindeki değer yavru kontröller tarafından devralınır.
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body >
<div ng-app="scopeUygulamasi">
<hr />
<div ng-controller="anaKontrolor">
<p> favori siteniz<b> {{site}} </b>(Ana Kontrolör)</p>
<p>kullanıcı: {{kullanici}}</p>
<div ng-controller="yavruKontrolor">
<p> favori siteniz<b> {{site}} </b>(Yavru Kontrolör)</p>
<p>kullanıcı: {{kullanici}}</p>
</div>
</div>
<script>
var uygulama = angular.module('scopeUygulamasi', []);
uygulama.controller('anaKontrolor',function ($scope) {
$scope.site = 'google.com';
$scope.kullanici = 'alattin';
})
uygulama.controller('yavruKontrolor', function ($scope) {
$scope.site = 'uzmanim.net';
})
</script>
</div>
</body>
</html>Yukarıdaki örnekte Script içinde anaKontrollor ve yavruKontrollor olarak iki tane Controller tanımlı.
Bunlar script içinde aynı seviyede tanımlı. Fakat View içinde (HTML bölüm) anaKontrollor uygulanan Div yavruKontrollor uygulanan Div elementini kapsıyor, içine alıyor. Bu durumda $scope.kullanici yavruKontroller içinde tanımlı olmasada bir üste tanımlı Controller'dan miras olarak alınır ve değer ekrana getirilir.
Eğer Div elementleri aynı seviyede olsaydı bu sefer $scope.kullanici özelliği yavruKontroller için ekrada boş olarak yazdırılacaktı.