osman selvi

@osmslvi

Büyük projelerde eski ve yeni yapı kavramı

Geçiş süreçleri kan kaybına sebep olur mu?

Süreç çok kısa, yapılan iş çok büyük

Döküman oluşturma alışkanlığı

Frontend'e pure yaklaşım ve geliştirilebilir mimarinin tanımı

Angularjs nedir?

Neden Javascript Mimarisi

?

Uygulamaya geçelim

  • Model yazımı ve semantic kod
  • Directive
  • Data-binding
  • Ng-Switch & Json'a giriş
  • Ng-Repeat & Json'a giriş
  • Ng-Repeat & Json form
  • Model yazımı ve semantic kod
  • Directive
  • Data-binding
  • Ng-Switch & Json'a giriş
  • Ng-Repeat & Json'a giriş
  • Ng-Repeat & Json form

Model yazımı ve semantic kod

example
  • Model yazımı ve semantic kod
  • Directive
  • Data binding
  • Ng-Switch & Json'a giriş
  • Ng-Repeat & Json'a giriş
  • Ng-Repeat & Json form

Directive

AngularJS'de directive'ler, özel(custom) HTML element'leri oluşturmak ve DOM işleme için kullanılmaktadır. Directive'ler, attribute, element, class ve comment gibi DOM elemanlarına özel davranışlar eklememizi sağlar.

ng-.... ile gelen tüm özellikler directive'tir.

example
  • Model yazımı ve semantic kod
  • Directive
  • Data binding
  • Ng-Switch & Json'a giriş
  • Ng-Repeat & Json'a giriş
  • Ng-Repeat & Json form

Data binding

AngularJS'te en çok kullanılan özelliklerden birisidir. birden fazla binding özelliği kullanabiriliz.

Angular template sistemlerinde bu data binding türü kullanılmaktadır.

One-way data binding: Klasik template(ek markup ve directive'leri içeren, derlenmemiş HTML) sistemlerinde bu data binding türü kullanılmaktadır. Modelimizde yaptığınız bir değişikliğin sayfanızda da görünür kılınması için; gerekli senkronizasyon kodunu kendiniz yazmamız gerekir.

two-way data binding: Sayfamızda veya Modelimizden herhangi birinde yaptığınız değişiklik diğerinde görünür olacaktır. Ekstra kod yazmadan Angular bu işi bizim yerimize nasıl yapıyor peki? Bunu yapmak için, modelimizin bir önceki değerini saklıyor ve modelde herhangi bir değişiklik yapıldığında, ilgili nesnenin change event'ini çağırıyor.

Bu gibi işlemleri tabi ki jquery'de de yapmak mümkün ancak proje'de ileriye dönük yazım işlerinde kodu manipüle etmek zorlaşacaktır.

Data binding

  • Model yazımı ve semantic kod
  • Directive
  • Data binding
  • Ng-Switch & Json'a giriş
  • Ng-Repeat & Json'a giriş
  • Ng-Repeat & Json form

Ng-Switch & Json'a giriş

İsminden de anlaşıldığı üzere bir geçiş anahtarı olarak kullanılmaktadır. Çok geçişli anahtar olarak kullanılan switch, datanın değerlerine göre yönlendirme yapmak mümkündür.

example
  • Model yazımı ve semantic kod
  • Directive
  • Data binding
  • Ng-Switch & Json'a giriş
  • Ng-Repeat & Json'a giriş
  • Ng-Repeat & Json form

Ng-Repeat & Json'a giriş

ng-repeat (tekrarlayıcı) directive ile gelen dataları bir döngü haline tekrarlamak mümkün. Ancak, gelen datanın büyüklüğüne göre bunu controlden geçirmemiz şarttır. Aksi halde datanın büyüklüğü source olarak ve performans olarak sıkıntıya yol açabilir. Bunun en sağlıklı kullanımı controlden geçirilen datanın ng-if directif'i ile sağlanmasıdır.

example
  • Model yazımı ve semantic kod
  • Directive
  • Data binding
  • Ng-Switch & Json'a giriş
  • Ng-Repeat & Json'a giriş
  • Ng-Repeat & Json form

Ng-Repeat & Json form

Gelen form objelerini bir json da tutuğumuzu düşünelim. Bu objeler rolleri kendi içerisinde farklılık gösterecektir tabi ki. Objelerin required durumlarını göre true ya da false durumuna göre validation controllerini gerçekleştirmek mümkün.

example

Dezavantajları

En büyük dezavantajı yeni çıkacak 2.0 sürümünün eski sürümlere uyumunun olmayacağı,
İE sürümlerinin bazılarında desteklenememesi.
SEO uyumlu içerik

example

Kullanılan Front End Araçları

    Diğer directiveler, fonksiyonlar ve servisler için aşağıdaki linki kontrol edebilirsiniz.

  • docs.angularjs.org

Teşekkürler


osman selvi

@osmslvi