Two way binding

ANGULAR JS NASIL ÇALIŞIR?

Angularjs ng-app directive’i gibi basit bir söz dizilimi ile çalışmaya başlayıp, mekanizmayı tam anlamıyla anlamak için içerisine dallandıkça digest cycle, $watch list, two way binding, dirty cheking mekanizmalarıda devreye giriyor.

1. index.html sayfası oluşturulur, css ve AngularJS kutuphaneleri eklenir. Angular js tum scriptler yüklenmeden  boot etmez, bu yüzden sayfanın başına ya da sonuna eklenmesinin bir önemi yoktur
2. Bir Angular js uygulaması için en az bir tane ng-app  direktifine ihtiyaç duyar. Bulduğu anda angular js uygulaması başlar
3. Angular js uygulamasını boot ettikten sonra sayfa içerisine yerleştirdiğimiz direktifleri arar.
4. Angular js direktifleri bulduktan sonra, bulduğu direktifleri watcher listesi oluşturur,uygulamaya bağlar ve sonra digest cycle kullanıcı etkileşimini dinlemeye başlar.

  digest cycle

• RootScope’dan başlar tüm alt scope’ları gezer. 
• Eğer bir değişme varsa model-view senkronizasyonu sağlanır (two way binding)
•  Bu senkronizasyon dirty-checking mekanizması ile yapılır.
• Dirty-checking: Bir değerin eski değeri ile yeni değerini karşılaştırır.
• Digest çevirimi tetiklendikten sonra minimum 2 maximum 10 kez çalışır.  (Angular 1.4’de 20 kez)
• {{ }} işareti angular’da expression olarak adlandırılır ve scope nesnesini view’e bind (bağlamaya) etmeye yarar.
•  Elimizde bir $watch list adında bir listemiz var, Biz UI’ye her bind ettiklerimizi bu $watch list‘e $watch nesnesi olarak ekler, Digest cycle kullanıcı etkileşimlerini dinlerken her defasında bu $watch list‘e bakar. Eğer bu $watch‘lardan birinde herhangi bir değişiklik var ise model-view senkronizasyonunu sağlar (Two way binding’de olduğu gibi). Bu senkronizasyonu dirty cheking mekanizması ile yapar.

Digest , $watch list  senaryosu

Angular js Componentleri