Angular JS’e (geç) giriş (I)

Klasik bir tabir vardır ya, millet uzaya çıktı biz hala neyle uğraşıyoruz(*) ayarında, benimki de o hesap oldu biraz. Angular Js 2 çıktı, 3-4-5 çıkacak ben hala yeni yeni mvc’yi çözebildikten sonra bu tarafa giriş yapıyorum. (Bu da pek elimde olmayan bir konu aslında, iş-okul falan derken insan kendini geliştiremiyor, zaman en büyük sıkıntımız. )
Hoş her şeyi bir kenara bırakırsak, hiç bir şey için geç değildir mantığına sahip olan birisi için bu bile erken diyebiliriz.

Neyse, bugün kafama esti ve “Nedir bu Angular Js” dedikleri diyerekten 1-2 siteyi kurcalayayım dedim ve baya sevdim diyebiliriz. He bu olay ne kadar sürer, bu ilk görüşte aşk tadındaki birlikteliğimiz bizi ne kadar taşıyacak onu bilemiyorum ama ilk günümüz iyi ve heyecanlı geçti diyebilirim. Birazdan bir kaç örnekte ekleyeceğim zaten fakat angular ile jquery’de yaptıklarımı daha hızlı bir şekilde halledebiliyorum diyebilirim.

Şunun içindir, burada kullanılır, bunlar yapılır vs diye fazla bilgi veremeyeceğim ( ne yazık ki o kadar derinlemesine bilgim şu anda yok) ama genel olarak bahsedecek olursam javascript ile yazılmış, tek sayfa içerisinde uygulama gibi kullanabildiğim (ki buna Single Page Application : SPA deniliyor, sayfayı refresh etmeden bir çok işlem yapabilmemize imkan veriyor. Örneğin gmail’de maillerimize bakınırken gelen-giden mailler, taslaklar vs bakarken bekleme olmadan ulaşmamızı sağlayan yapı veya instagram’da gezinirken ki durumları örnek verebilirim. Bu SPA için Angular Js haricinde scaleApp veya DurandaJs gibi frameworkleri de kullanabilirsiniz.) hızlı ve esnek biçimde geliştirme yapabileceğim bir framework diyebilirim. Resmi geliştiricisi Google olduğundan, web konusunda ne kadar hızlı ve kolay olabileceğini söylememe gerek yok sanırım.

Okuduğum/farkettiğim en büyük özelliklerinden biri, deminde belirttiğim SPA yapısı ve bu sitenizde gezerken yaşanan bekleme süresini dehşet derecede azaltıyor diyebilirim. Klasik yapıda sayfa geçişlerinde html, css, js Allah ne verdiyse tekrar tekrar yüklenirken bu yapı ile bu işlemler sona eriyor ve sadece belirtilen alanları güncelleyerek bütün herşeyin yüklenmesinde geçen süreyi bizlere bırakıyor.

Kısa bir tanımı verdikten sonra nasıl kullanabileceğimizi ve örneklerimizi de ekleyeyim.

Önce Visual studio üzerinden boş bir mvc proje açıyoruz ve nuget’ten AngularJs.Core framework’ünü bulup, projemize ekliyoruz ve ilk aşamamız tamam ! (Bu kadar kısa işlemlerde hep aklıma wordpress kurulumu geliyor, 2-3 adım sonrasında “Hepsi bu kadar, daha ne bekliyordunuz ? ” ayarında yazısı canlanıyor gözümde 🙂 )

Kullanacağımız etiketleri de tanımlayıp, aradan çıkaralım. Kullanırken ufakta olsa bilgimiz olsun;

ng-app :  İlk olaraktan ng-app var, her şeyin başı diyebilirim. Angular Js framework’ünün nerede çalışacağını belirler. Html tagına da ekleyebilirsiniz, sadece kullanacağınız div’e de. (Şu anda html tagına eklemenin bir zararı olup olmadığı konusunda emin değilim, araştırma yaparken her 2 kullanımla da karşılaştım.)

ng-init : Değişkenlerimizi ng-init içerisinde tanımlıyoruz.

ng-model : Kontrollerimizi ng-model olarak tanımlıyoruz. Şu ana kadar input’larda gördüm.

ng-bind veya {{degisken}} : Değişkenlerimizi bu etiketler ile ekrana basıyoruz. 2 side aynı işlemi görüyor.

ng-repeater : foreach in Angular versiyonu diyebilirim. Liste içerisinde dönmemize yarıyor.

Şu anlık sanıyorum bu kadar ile bırakmak yeterlidir.

Örneklerimize geçelim diyorum, ilk olarak person diye bir sınıf tanımlayalım ve bunu yazdıralım.

Ne kadar kolay değil mi ? ng-init ile değişkenimizi tanımladık ve bunu yazdırdık.

Veya şuradaki gibi bir string dizisi tanımlayalım.

Foreach ile yazdırmaktan pek bir farkı yok nerdeyse 🙂 Ama keşke hepsi bu kadar kolay olsa, bunlar sadece giriş olduğundan bu rahatlığımız. Umarım gün gelir de daha detaylı ve kapsamlı şeyleri de paylaşma fırsatı bulurum. O zamana kadar bu amatörlerle girişi yapmaya devam 🙂

Bir dizi daha, bu sefer içerisinde person sınıfı var. Birde ng-repeat’sız kullanayım dedim.

ng-init ile değişken tanımlanıyor demiştim, hatırlarsınız. Buyrun bir tanım yapalım ve tanımladığımız sayıları işleme sokalım.

Cevap tabiki 60.

Bu işlemi dışarıdan değer girerek rahatça yapabiliyoruz. ng-init ile isterseniz default değer verebilirsiniz. Ben 1 adet ve 10 tl  olarak tanımladım.

Bu değerleri değiştirdikçe anında işlem hesaplanacak, en özel ve güzel yanlarından birisi bu 🙂

Kullanılan etiketler tabiki bitmedi, ama ben bittim.

Şu anlık burada kesiyorum, malum tüm günün yorgunluğu falan derken bizimde pilimiz bitiyor. E bide zorla bir şeyler öğrenip, yazmaya çalışan ben olunca bu kişi, daha da zorluyor bu işlem.

Bir sonraki fırsatımda da “ng-click, bildiğimiz onClick()’in Angular cası” diyerek devam etmeyi planlıyorum. Umarım bir aksilik olmaz da bu yazıyı da ekleyebilirim.

Şimdilik sevgiyle kalın,
Bol gülüşlü günler, geceler.

Genel olarak web üzerine yoğunlaşan, gaza gelmek için müzik dinleyen, amatör olarak resim çekmeye çalışan, bir yandan özel bir şirkette çalışıp, diğer yandan da okumaya devam eden sıradan bir ölümlü. He bide buraların sahibi.

1 comments On Angular JS’e (geç) giriş (I)

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.