Posts in "Angular Dersleri"

Laravel ve AngularJS kullanırken yaşayan {{}} curly braces sorununa çözüm

AngularJS ve Laravel’ in de template sistemi, data binding için aynı syntax’ ı kullanmaktadır. Şu şekilde;

Laravel ve AngularJS’ i kol kola kullanıp bir Single Page Application yaptığınızda bu durum ASLINDA çok fazla sorun çıkarmaz. Çünkü uygulamanızın frontend’ i serverdan HTML dosyasını render edilmeden alır ve kendisi render eder. Lakin, bir kısmı öncelikle backend’ te render edilmesi gereken bir yada birkaç şablonunuz mutlaka vardır. Örneğin main layout gibi. Kullanıcı sisteme giriş yapmış ise, kullanıcı bilgilerini bastırdığınız main layout.  Continue reading

AngularJS Filters | AngularJS Filtre Kullanımı

Merhaba, sıra geldi AngularJS’ in belki de data-binding’ ten sonraki en developer dostu özelliğine 🙂 karşınızda Filters!!!

Neden böyle dedim ?

En başa dönersek, taa http://angulartr.com/angularjs-nedir/ AngularJS’ in ne olduğunu anlattığım konuya. Eski zamanlarda yani Jquery, https://lodash.com/, vb kütüphaneleri projemize dahil ederek, javascript (ES5)’ in hantallığı, API’ sinin yetersizliğinden şikayet edip, çözüm aradığımız zamanlarda, işler ne kadar gına getiriciydi. Özellikle uygulamanızın front-end’i yüklüyse, backend ten pek çok case’ e göre gelen datayı doldur boşalt yapmak tam bir amelelikti. Her zaman kullanıcıya mavi ekran verecek bir senaryo gerçekleşme ihtimali vardı. Bu da yaptığınız işten soğumaya, ya bunun mantıklı bir ele alınışı olamazmı demenize sebep oluyordu. Taki AngularJS’ in data-binding yapısı ile bu karmaşıklıktan kurtulana kadar. Artık bu işleri AngularJS Framework ile ele alıp, sağlam bir yapı oluşturuyoruz. Detaylı bilgiler : http://angulartr.com/angularjs-binding/

Continue reading

AngularJS RootScope

AngularJs Scope konusuna http://angulartr.com/angularjs-scope-giris/ konusunda giriş yapmıştık. Kısaca özet geçersek;

  • Her scope’ un adı üstünde bir ETKİ ALANI vardı.
  • İç içe scope lar vardı.
  • Scope’ lar Inheritance yani miras alma vardı.
  • Üstteki scope alttakine göre parent scope idi.

Peki ya uygulamanın tamamının scope’ u ne olacak ? Yani tüm scope’ ların dahil olduğu scope. İşte bu scope’ un adı rootScope.

rootscope

Hemen örnekleyelim;

Uygulamamamızı açtık ve ng-init directive i ile rootScope’ ta mesaj adında bir model yaratıp değerini test olarak verdik.Hiçbir controller’ da mesaj modeli tanımlamamış olmamıza rağmen, hepsinin içinde mesaj modelinin değeri test oldu ve ekrana basıldı. Çünkü tüm scope’ lar rootScope’ u miras olarak aldı. Controller’ ların dışına bir input koyduk ve modelini mesaj olarak verdik. Ve bu input tüm controller lardan bağımsız olduğu için modeli direk rootScope ile bağlantılı. İnput’ un değerini değiştirdikçe, rootScope taki mesaj modelinin değerinin değiştiğini ve dolayısyla, mesaj modelini miras alan tüm scope’ ların içinde de bu değerin güncellendiğini göreceksiniz.

rootScope’ taki değişiklikler anında alt scope’ lara aktarılırken, scope lardaki değişiklikler nasıl rootScope’ a dolayısıyla diğer tüm scope’ lara aktarılacak ?”

Örnekte göreceğiniz üzere, CtrlC’ nin içine bir input ve buton ekledik. İnput mesaj modelinin değerini alıyor. Buton ise CtrlC’ nin içindeki guncelle metodunu tetikliyor. Butona tıklayınca, $rootScope’ taki mesaj değeri, CtrlC’ nin scope’ undaki mesaj modelinin değerini alıyor. $rootScope’ taki mesaj değeri değişince de tüm alt scope’ lar güncelleniyor.

RootScope’ u temen anlamda biraz inceledik. Gelişmiş örnekleri için angularjs dersleri konusunu takip etmeyi unutmayın.

Angular 1′ den Angular 2′ ye Geçiş

AngularJS(Angular 1) ile yapılmış bir projeniz var ve Angular 2′ ye geçmeyi düşünüyorsunuz. Öncelikle Sakın KORKMAYIN! Framework lerin major versiyon yükseltmelerinde hep endişe duyulur. Çünkü köklü değişiklikler yapılmıştır ve versiyon güncellemesi yapmanız durumunda, kodunuz büyük kısmının çalışmaması, çalışsa bile, projenin tamamiyle test edilmesi gerekecektir.  Continue reading

AngularJS Dependency Injection

Dependency Injection bir software design pattern dir. Sadece AngularJS’ e özgü bir kavram olmadığı için başlı başına anlatmanın bir anlamı yok. Eğer Dependency Injection konusunda bir fikriniz yoksa, öncelikle internette kısa bir araştırma yapmanızı öneririm.Bu konumuzda, Dependency Injection‘ ın AngularJS’ te ne şekilde kullanılacağından bahsedeceğiz. Continue reading