AngularJS’ in en önemli ve iyi anlaşılması gereken konularından biri $scope tur. Çünkü uygulama içinde dönen veriniz birebir olarak $scope’ a bağlıdır ve dolayısıyla $scope sizin eliniz kolunuz gibidir. 

Bu nedenle Angular $scope konusunu 2 bölüme ayırdım. AngularJS Scope Giriş ve AngularJS Scope Derinlemesine şeklinde. Bu konumuzda giriş yapacağız.

Basit bir scope kullanımı;

  • Scope controller’ a dependency injection yapılır. Dependency injection nedir derseniz http://angulartr.com/angularjs-dependency-injection/
  • scope, controller da $scope ismi ile hayat bulur.
  • controller’ lar modüllere bağlanır.
  • $scope bir javascript objesidir.
  • $scope a bağlanız her değişken, HTML(View) de kullanabileceğiniz bir model dir. AngularJS’ in Model katmanı bu değişkenlerdir.
  • Controller üzerinden kullanacağımız metodlarıda $scope a bağlı olarak tanımlarız.

“Scope Kullanımı”

Aşağıdaki kodta basit bir scope kullanımı gerçekleştireceğiz.

Uygulamamızı tanımladık. Controller ekledik. Controller ı HTML(View) e ekledik. $scope ta isimler adında bir dizi tanımlamıştık. ng-repeat ile template de bu diziyi repeat ettik. Result kısmından görebilirsiniz.

“Scope Inheritance | Scope Kalıtımı”

Scope lar kalıtım özelliği gösterir. Her scope bir üst scope’ u miras olarak alır. Bunu object oriented’ daki extend olarak düşünebiliriz. Nasıl ki bir class bir diğer class’ ı extend ederek oluşturulursa, extend ettiği class’ ın metodlarını miras olarak alıyorsa, scope larda bir üst scope u miras olarak alır. Javascript te herşey public’ tir. Protected, private gibi sınırlayıcılar yoktur.

Hemen örnekleyelim;

 

Uygulamamızı ve iki adet controller ımızı oluşturduk. CtrlA’ da bir dizi tanımlayıp, emre ve angular olarak 2 element ekledik. Ctrl B ise boş gözüküyor. HTML tabına baktığınızda, Önce CtrlA’ yı, onun içine de CtrlB’ yi koyduğumu görüyorsunuz. CtrlB içinde de items modelini repeat ettiriyorum. Fakat CtrlB’ nin içinde items diye bir dizi olmamasına rağmen, Result tabına baktığınızda, repeat olduğunu göreceksiniz. İşte CtrlA, CtrlB’ nin üstünde olduğu için, CtrlB tarafından extend edildi. Yani sahip olduğu tüm model, CtrlB’ ye aktarıldı. Bu sayede CtrlB içinde repeat edebildim. Scope Inheritance budur.

“Parent Scope, Child Scope Kavramları”

Bir controller, başka bir controller’ ın içine eklenmiş ise, üstteki controller’ ın scope’ u parent scope, eklenen ise child scope’tur.

 

“Scope’ ta metod tanımlamak”

Scope’ ta tanımladığımız modelleri View’ da kullandık. Peki Kullanıcıların view’ da tıklama vb. işlemler ile etkileşime geçeceği metodları nasıl tanımlayacağız. Hemen örnekleyelim;


Scope’ te alerver isimli bir metod yazdık. View’ da bir buton oluşturup, ng-click değerine de bu metodun ismini yazdık. Dikkat scope’ taki bir metodu kullanıyorsak, sonuna () parantezini koymayı unutmayın. Butona tıkladığımızda scope taki metodu çalıştırmaktadır.

“Birşey yaptık OK, lakin Scope’ u anladımmı acaba? Scope bu işin neresinde ?”

diye soruyorsanız, doğru yoldasınız. Scope’ ta modeller, metodlar tanımladık kullandık falan güzel ama adı üzerinde scope bu işin neresindeydi ?

Scope kelimesinin türkçe karşılığına bakalım;

kapsam, alan, faaliyet alanı, olanak, ufuk gibi anlamlara geliyor. İşin özeti aslında tam olarak da bu, Faaliyet Alanı, Etki Alanı.

Farkettiyseniz, sayfamızda iç içe controller’ lar var. Şimdiye kadar incelemiş olduğunuz Angular JS Örneklerinde, tek bir view’ da bir sürü controller eklendiğini görmüşsünüzdür. Bu controllerların hakim olduğu view’ lar içinde yapılan işlemlerden kim sorumlu olacak ? Bu işlemleri kim yönetecek ? Tabiki Scope. Keza bir controller da tanımlanan bir model yada metod u view’ a kim sunacak? Tabiki scope.

Scope etki alanıdır. Aşağıdaki örneği inceleyelim.

Örneğimize deneme adında bir metod ve çalışmazki yazan ve ng-click değeri de deneme() olan bir buton ekledik.

Bas butonu, ng-click ile controller daki alertver metodunu tetikliyorsa, çalışmazki butonu da deneme metodunu tetiklemeli Mİ ???? Result tabından deneyin. TETİKLEMEYECEKTİR.

Demekki, controller da bir metod açmak demek, ona view’ dan ulaşılacak demek DEĞİLMİŞ.

Yani, scope controller ın view katmanına açılan kapısı gibidir. Başına $scope koymadığınız hiçbirşeyi direk olarak view’ da kullanamazsınız.

Scope hakkında giriş konularını bitirdik. İlerleyen konularda Scope’ un derinliklerine ineceğiz.

3 Comments AngularJS Scope Giriş

  1. Murat

    Üstad emeğine sağlık baya bi yazını okudum Angular’a yeni başladım sayende geliştiriyorum kendimi, öyle bi teşekkür edeyim istedim. Gerçekten “Bilal’e anlatır gibi” anlatıyorsun harika 🙂

    Başarılarının devamını dilerim.

    Reply
  2. Mehmet

    Kardeşim anlatımın için teşekkürler, gerçekten faydalı oldu bu site, angularjs hakkında pek türkçe kaynak yok devamını bekleriz =)

    Reply

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir