AngularJS'de $scope nedir? Örnekli Anlatım

AngularJS'de $scope nedir?

AngularJS'de $kapsam temel olarak “denetleyiciyi” ve “görünümü” birbirine bağlayan yerleşik bir nesnedir. Daha sonra görünüm tarafından erişilebilecek olan denetleyici içindeki kapsamda üye değişkenler tanımlanabilir.

Bir kontrol ünitesindeki her bir kontrol ünitesi angularjs Uygulama, bağımlılık enjeksiyonu yoluyla kendi `$scope` örneğini alır. Bu nesneye eklediğiniz her şey, denetleyicinin yönettiği şablona görünür hale gelir; bu nedenle `$scope`, uygulamanız ile uygulamanız arasında yer alan paylaşılan veri modeli gibi davranır. JavaKomut dosyası mantığı ve HTML işaretleme kodunuz.

Aşağıdaki örneği düşünün:

angular.module('app',[]).controller('HelloWorldCtrl',
	function($scope)
	{
		$scope.message = "Hello World"
	});

Code Açıklama:

1. Modülün adı “app”
2. Denetleyicinin adı "HelloWorldCtrl"dir.
3. Kapsam nesnesi, denetleyiciden görünüme bilgi aktarmak için kullanılan ana nesnedir.
4. Kapsam nesnesine üye değişkeni eklendi

Tek bir denetleyici ve tek bir görünüm, resmin yalnızca yarısını oluşturur. Gerçek uygulamalar, denetleyicileri iç içe yerleştirir, listeleri tekrarlar ve bileşenleri yeniden kullanır; bu da aynı anda birden fazla kapsamın var olduğu anlamına gelir.

AngularJS'de Kapsam Hiyerarşisi ve Kalıtım Nasıl Çalışır?

Her AngularJS uygulamasının tam olarak bir kök kapsamı vardır ve herhangi bir sayıda alt kapsamı olabilir. Yönergeler bu alt kapsamları oluşturur ve bunları süsledikleri DOM öğesine bağlar, böylece kapsam ağacı oluşturulan sayfanın yapısını yansıtır.

AngularJS aşağıdaki gibi bir ifadeyi değerlendirdiğinde: {{siteName}}Öncelikle, bu özelliği öğeye bağlı kapsamda arar. Özellik yoksa, arama üst kapsama geçer ve kök kapsama ulaşana kadar yukarı doğru tırmanmaya devam eder. JavaKomut dosyası geliştiricileri bu davranışı prototip tabanlı kalıtım olarak bilir ve alt kapsamlar, üst kapsamlarından tam olarak bu şekilde miras alır.

Aşağıdaki örnekte, kalıtımın nasıl gerçekleştiğini izleyebilmeniz için bir denetleyici başka bir denetleyicinin içine yerleştirilmiştir.

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code Açıklama:

1. ParentCtrl tanımlar siteName kendi kapsamı dahilinde.
2. ChildCtrl asla tanımlamaz siteNameAncak içteki div yine de yazdırılıyor. Guru99 Çünkü arama işlemi üst kapsama alanına kadar uzanıyor.
3. lesson Yalnızca alt öğe kapsamındadır, bu nedenle üst öğe onu okuyamaz.

Hangi yönergeler yeni bir kapsam oluşturur?

• ng-denetleyici: Üzerine yerleştirildiği öğe için bir alt kapsam oluşturur.
• ng-tekrarla: Her yinelemede bir alt kapsam oluşturur; bu nedenle her satır aynı ifade için farklı değerler içerebilir.
• Özel yönergeler: alt kapsam talep edebilir veya yalıtmak Ebeveyninden bilerek miras almayan kapsam.
• Bileşen yönergeleri: kayıtlı herhangi bir şey .component() Yardımcı her zaman izole bir kapsam alır.

Alt kapsamlar yukarı doğru okunduğu için, geliştiriciler genellikle bu zincirin en üst noktasının nerede olduğunu merak ederler. Bu en üst düzey nesneye $rootScope denir.

$scope ve $rootScope arasındaki fark nedir?

AngularJS $rootScope `$rootScope`, tüm uygulamanın kapsamını belirler. Bir uygulamanın yalnızca bir `$rootScope`'u olabilir ve bu, global bir değişken gibi kullanılır. Her `$scope` bir alt kapsamdır ve `$rootScope`, ağacın en tepesindeki ebeveyndir. Aşağıdaki tablo, bu iki nesneyi karşılaştırmaktadır.

$rootScope'u dikkatli kullanın. Oraya yerleştirilen her şey tüm uygulama boyunca geçerlidir ve her yerden okunabilir; bu nedenle, genel durum için paylaşımlı bir servis genellikle daha güvenli bir yerdir. Resmi $rootScope referansı API'nin tüm detaylarını listeler.

Verilerin nerede bulunduğunu bilmek işin yarısıdır. Diğer yarısı ise, kullanıcının bir şey yaptığında kapsamın nasıl tepki vereceğini öğretmektir.

AngularJS'de Davranış Oluşturma veya Ekleme

Olaylara tepki vermek veya Görünümde bir tür hesaplama/işleme yürütmek için kapsama davranış sağlamalıyız.

Görünüm tarafından tetiklenebilecek belirli olaylara yanıt vermek için kapsam nesnelerine davranışlar eklenir. Davranış denetleyicide tanımlandıktan sonra görünümden erişilebilir.

Bunu nasıl başarabileceğimize dair bir örneğe bakalım.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

Code Açıklama:

1. “fullName” adında bir davranış oluşturuyoruz. Bu davranış 2 parametre (ad,soyadı) kabul eden bir fonksiyondur.
2. Davranış daha sonra bu 2 parametrenin birleşimini döndürür.
3. Bu görünümde davranışı çağırıyoruz ve "GuruDavranışa parametre olarak iletilen " ve "99" değerleri.

Komut başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Tarayıcıda her iki değerin birleştirilmiş halini göreceksiniz. Guru & 99, davranışa aktarılanlar kontrolör.

Yukarıdaki gibi bağlantılar kendi kendine yenilenir ve bu işlemi gerçekleştiren mekanizmayı, bir uygulama büyümeden önce anlamak önemlidir.

Scope Watchers ve Digest Döngüsü Neden Önemli?

AngularJS, değişiklik olayları yerine değişiklik kontrolü (dirty checking) yoluyla görünümü kapsamla uyumlu tutar. Bu süreci üç kapsam API'si yönlendirir:

• $watch: Bir ifade için dinleyici kaydeder. İnterpolasyonlar gibi {{fullName}} Şablon bağlantısı sırasında sizin için izleyiciler kaydedin.
• $uygula: AngularJS yürütme bağlamına girer, kodunuzu değerlendirir ve ardından bir digest işlemi tetikler. Yalnızca özel olay geri çağırmaları veya üçüncü taraf kütüphane geri çağırmaları içinde gereklidir, çünkü yerleşik yönergeler zaten bunu çağırır.
• $digest: $rootScope ve alt öğelerindeki her bir izleyiciyi tek tek dolaşır, mevcut değeri önceki değerle karşılaştırır ve model değişmeyi bırakana kadar bu işlemi tekrarlar.

Bir özetleme işlemi birden fazla geçiş yapabileceğinden, izleme ifadelerinin maliyeti düşük tutulmalıdır. İçlerinde DOM erişiminden kaçının, çünkü DOM okuma işlemi, bir özetleme işlemine göre kat kat daha yavaştır. JavaKomut dosyası özelliği.

Saatin derinliği de maliyeti etkiler. Referansla izleme en hızlı yöntemdir ve ancak tüm değerin yerine konulduğu zaman fark edilir. $watchCollection Bir dizi veya nesne içindeki öğelerin eklendiğini, kaldırıldığını veya yeniden sıralandığını fark eder. Değere göre izleme, her özet işleminde iç içe geçmiş bir yapıyı tarar ve en maliyetli seçenektir, bu nedenle en son tercih edilmelidir.

SSS