ng-cloak directive’ i, uygulamanız henüz yüklenmeden önce curly braces {{}} ile yaptığımız data-binding lerin henüz render edilememesinden kaynaklı ortaya çıkan enterasan görüntüyü önlemek adına Angular Framework’ üne eklenmiştir. Lakin hiçbir zaman istendiği gibi çalışamadı. Bu directive için Angular’ ın nasıl bir kurgu yürüttüğünü ve neden çalışmadığını ? Nasıl doğru bir şekilde çalıştırılabileceğini ? ve hatta bir diğer çözüm olan ng-bind directive’ ini yazımın devamında bulabilirsiniz.

Öncelikle şunu göstermek isterim. Yukarıda da bahsettiğimiz, uygulamanız henüz yüklemeden önce, elementleriniz içinde {{data}} şeklinde gözükmesi sorununa ki bu soruna teknik olarak data resolving delay, render waiting, undesirable flicker effect vb. şekilde pek çok isimlendirme yapılıyor internette, tak diye bir çözüm sağlayabiliriz. Bu çözüm ng-bind kullanmak. Yani örneğin curly brace ler içinde modelleri yazmak yerine ng-bind directive’ inin içine yazmak. Aşağıda aynı işlemi yapan 2 kod parçası var.

Her iki kod ta aynı çıktıyı verecektir. ng-bind kullandığınızda uygulamanız yüklenene kadar, h1 elementinin içinde {{}} curly brace ler olmadığından, o çirkin görüntü oluşmayacaktır.

Lakin ng-bind kullanmak istemeyebilirsiniz. http://angulartr.com/angularjs-performans-arttirimi-ve-production-onerileri/ konusunda ng-bind ile expression bind(curly brace {{}}) arasındaki hız farkını anlatmıştım. ng-bind’ ın açık ara daha hızlı olduğunu göstermiştim. LAKİN expression bind kullanmanın çok çok haklı sebepleri olabilir. Sadece teknik açıdan da düşünmeyin, her açıdan expression bind kullanmak isteyebilirsiniz. Peki bu durumda ne yapacağız ? Tabiki ng-cloak kullanacağız.

 

“ng-cloak nasıl çalışır ? “

undesirable flicker effect sorununu çözmek için elementlerinize ng-clock directive’ ini ekliyorsunuz. Aşağıdaki gibi

AngularJS framework’ ünün içinde ng-clock directive’ ine sahip elementlerin css display özelliğini none yapan bir javascript kodu var. Bu kod sayesinde bu element en başta gizleniyor. Elementin verisi oluştuğunda ise, elementten ng-cloak directive’ i siliniyor ve element görünür hale geliyor.

Bu işlemleri sizin takip etmenizin imkanı yok denecek kadar zor. Çünkü digest cycle’ ı takip etmeniz ve bir sürü kontrolden geçirmeniz lazım.

“Peki ben bu directive’ i elementime ekledim ama sorun halen devam ediyor ?”

Eder. Aynen devam eder. Çünkü bir eksik var. Elementin css display özelliğini none yapan js kodu Framework’ ün js dosyasının içinde olduğu ve o esnada halen js dosyası tam yüklenmemiş olduğu için element gizlenemez ve kabak gibi gözükmeye devam eder.

 

“Anladım peki nasıl çözücez ? “

Çok çok çok basit. Aşağıdaki css tanımlamasını uygulamanızın css dosyasına ekleyerek.

Gördüğünüz üzere aslında sadece [ng-cloak] css seçimi bize yeterdi lakin angular da directive’ lerin birden fazla ekleniş biçimi olabildiğince tüm ihtimalleri ekledik.

 

Umarım sorununuz çözülmüştür.

Leave A Comment

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