AngularJS Gone Wild Day:2

Tahmini Okuma Süresi: 9 dakika

Yazılım dünyasının atarlı abisi  Linus Torvalds‘ı duymuşsunuzdur. Duymadıysanız Muhammed Cuma Tahiroğlu abimizin kendine has güzel uslübu ile Linus Torvalds’dan bahsettiği  Kendine meydan okuyan adam adlı yazıyı okumanızı tavsiye ederim. Dünyayı böyle “değişik” adamlar geliştiriyor. Yaptıkları, uğraştıkları, söyledikleri hep olay! Bunlardan birisi de Linux kernel mailing listesinde vermiş olduğu cevap, üstünden yıllar geçmesine rağmen “thread” duruyor.

Talk is cheap, show me the code!

Evet geçen yazımda AngularJS ile ilgili giriş yazısı sayılabilecek bir yazı yazmıştım. Bu yazıda ise yavaş yavaş elimi koda bulamak istedim. Linus’un da dediği gibi talk is cheap …

Bir angularjs uygulaması yapabilmek için ilk adım referansı html sayfasına eklemektir. Büyük projelerde verilen referans kütüphanelerin sayısı çok olduğundan bundling denilen yöntemle kütüphane referanslarının yönetimi işini otomatize etmek mümkündür. Yine uygulama paketleme esnasında boyut küçültme işlemi yapabilmek için minification denilen bir yöntem uygulanıyor. Belki dikkatinizi çekmiştir birçok kütüphanenin stabil versiyon dosyasının ismi.  “.min.xxx” şeklinde karşımıza çıkıyor. Bu dosyaları açtığınızda  aşağıdaki ekran görüntüsündeki gibi insanı hayatı küstürebilecek kodlar karşınıza çıkar.

angularjs_1.5.5_angular.min.js

Bu tarz bir yöntem kullanmanın amacı gereksiz boşlukları atarak ve değişken isimlerini kısaltarak dosya boyutundan tasarruf etmektir. JSCompress  gibi araçlar ile siz de yazmış olduğunuz kodları  sıkıştırabilirsiniz. Bu işlemin geliştirme aşamasında değil de release zamanı yapılması gerekir. Konuyu daha fazla dağıtmadan ilk kod örneğime geçiyorum.

Yukarıdaki kodu incelediğimizde html tag’inin yanına “ng-app” directive’i eklendiğini görüyoruz. Bu atama ile  yazmış olduğumuz kod html tag’leri arasında angularJS kullanabilir demiş olursunuz. Ayrıca ng-app ifadesini almış satırdaki vatandaş root element olarak tanımlanmış oluyor. Head tag’leri arasına eklemiş olduğum CDN(Content Delivery Network) servisi ile sayfa temel angularJS özelliklerini kullanabiliyor. Tıpkı diğer kütüphaneler için de yaptığınız gibi bu tanımlamayı yapmanız gerekiyor. Bu HTML kodunun içerisinde alışılagelmişin dışında olan iki tane daha özellik bulunuyor. Bunların ilki input tag’ine eklemiş olduğumuz “ng-model”  directive’i, diğeri de H1 tag’i arasında yer {{gibirishText}} expression‘ı . Ng-model directive’i  view ile model arasındaki binding işlemini gerçekleştirmek için kullanılır. Bir diğer directive olan ng-bind ile arasındaki fark ise ng-model ile “two way binding” yapılabilmesidir. $scope-> view, view->$scope. ng-bind ise “one way binding” yapabilmektedir. $scope->view. ng-bind directive’ini daha çok  span, div, h  elementlerinin  içeriğini değiştirmek için kullanmak uygundur.

Yukarıda gördüğümüzden yorumlayabileceğimiz şey aslında {{ expression }} ile ng-bind directive’i aynı işi yapabilmektedir.

Fakat aşağıdaki gibi bir kod bloğu kullanılınca input text’ini değiştirmemize rağmen h1 tag’i içerisinde bir değişiklik olmadığı gözlemlenebilir.

Bu örnekler ile görebileceğimiz gibi ng-bind ve ng-model directive’leri aslında aynı işleri yapmamaktadır.

ng- prefix’inin yanısıra data-ng- prefix’inin de olduğunu fark etmiş olabilirsiniz. Bu iki tanımlama arasında aslında pek bir fark yoktur. Fakat bazı html5 validator’lerinde ng- prefix’i hataya sebep olabilir. O yüzden bu tarz html validatör’lerde hata almamak adına data-ng kullanmak gerekir.

bir sayfa içerisinde birden fazla model tanımı yapılabilir.

multiple model

Fakat bir html elementine birden fazla model bağlanamamaktadır.

 ng-bind ile {{ expression }} kullanımının aynı işi yapmakta olduğundan bahsetmiştim. Bu iki tanımlama arasında ufak farklar da var. Bunların ilki görünürlük, angularjs sayfası yüklendiği sırada gecikme olursa {{}} arasına yazmış olduğumuz expression’lar {{expression}} şeklinde görüntülenecektir. Ancak ng-bind ile ifade edildiğinde bootstraping işlemi bitmeden sayfada herhangi bir render işlemi olmadığından html sayfası garip görünmeyecektir. Yok ben {{expression}} kullanmak istiyorum diyorsanız  da ng-cloak directive’ini de ekleyerek sayfa yüklenirken oluşacak garip efektlerden kurtulabilirsiniz.

Diğer bir müstesna angular objesi ise ng-init, ng-init directive’i bir değişkene ilk değer atama işlemi için kullanılır.

Çok anlamlı bir örnek olmasa da yukarıdaki kod parçacığında ng-init içerisinde tanımlamış olduğum dummyText adlı değişkene ilk değer atayarak expression içerisinde gösterilmesini sağladım. init içerisinde tanımlanacak olan değişken geliştiricinin hayal gücüne kalmış. Ama “çok ta şaapmamak” lazım. Eğer çok uzun bir değişken tanımı varsa bunu daha sonraki yazılarımda değineceğim “ng-controller” içerisinde yapmak daha sağlıklıdır.

 Son Tahlil

Bu yazıda angularJS uygulaması geliştirmek için gerekli olan minimum gereksinimleri ve en temel directive’leri anlatmaya çalıştım. Konuyu özetleyecek olursak bir angularJS uygulaması geliştirme adımları şu şekilde sıralabilinir.

  • Angular Framework’ü html koduna eklenir.
  • AngularJS uygulaması tanımı için ng-app directive’i tanımlanır.
  • Kullanılmak istenen uygulamanın gereksinimleri doğrultusunda built-in veya kendi yazdığınız angularJS objeleri kullanılır.

scope, controller, service, filters, directive, routing, dependency injection, factory, module, validator, expressions gibi daha birçok konu boynunu bükmüş anlatılmayı bekliyor. Ancak bu yazıda değineceğim ve anlaşılmasını istediğim noktalar, saymış olduğum başlıkları kapsamıyor. O yüzden bu yazıyı bir antrenman, bir “first glance” yazısı olarak değerlendirebilirsiniz.

Bir sonraki yazımda diğer angularJS kavramlarını tanıtıp  kod parçacıkları ile vermiş olduğum tanımları desteklemeye çalışacağım. Yazımı Github’a eklemiş olduğum MVC yaklaşımına uygun bir klasör yapısı içeren angularJS projesinin adresini paylaşarak sonlandırıyorum. AngularJS Empty Template. Çok ideal bir proje şeması olduğunu iddia etmiyorum. Fakat belli başlı kütüphaneleri referans olarak eklemiş, index sayfası olan bir template arayanların işine yarayabilir diye düşünüyorum. Bir yeoman generator’ü değil tabii ki. Sonraki yazıda görüşmek dileğiyle.

Leave a Reply

Your email address will not be published. Required fields are marked *