AngularJS Gone Wild Day:6

Tahmini Okuma Süresi: 7 dakika

Web uygulamasında routing bir adres temsil eder. Yani sunucuda tutulan bir html sayfasına ulaşacağımız, “seo-friendly”, bazen haddinden fazla uzun, bazen ölümüne kısa linkler olarak karşınıza çıkar. Bu linklere “routing” demeyiz ama yapılan işleme diyebiliriz. Yani bir istek sunucuya gider, geriye bir response döner ya da dönmez. Dönerse sizindir, dönmezse kendi kaybeder. “Çok şaapmayalım oraları.”

Tüm bu hengâme, tüm bu tutunamayanlar bir “content” oluşturmak için. İş bu content’ler eskaza  tutarsa, mesela Marc kardeşimiz gibi istemediğiniz kadar dolara sahip olabilirsiniz. Bu hayali kuran 10 milyon kişi varsa 10-20 tane de bunu gerçekleştiren var. Oran iyi, sıfır değil hani, hâlâ şansınız var. 2005 yılında(Adam gocadı heeri) Marc Zuckerberg kardeşimiz öğrenci evinde konuşurken kendi bile yaşayacaklarını ön göremiyormuş. Okulu bitirsem, bir işe girerim, düşük krediyle bir ev alıp, evlensem, bir araba,  30’da çocuk peşine bir daha  derken milyar dolarlarla oynamaya başlamış:) İşin şakası bir yana herkesin hayal ettiği ve hayal etmekle kaldığı bir işi genç yaşında başardı. Tebrikler kendisine burdan “Palo Alto tezenesi” . “Tezene” kelimesini sıkça kullanan Muhammed Cuma Tahiroğlu abime de selam olsun.

Gördüğümüz üzere “Facebook’a üye ol, Yale’de Monica diye sarışın bir hatun varmış onu stalk‘larsın”. “Harvard’da bir kız var ki kanka hastasıyım, ama adını bilmiyorum, ne yapsam? -Dur kanka Facebook diye bir site varmış oradan buluruz” tadında bir uygulama çılgın bir büyüme hızıyla devasa bir şirkete dönüşebiliyor. O an o işi yapan kişi bile neler olacağını bilemiyor, plaza “jargon”u ile “scale” edemiyor.  Biraz daha havalı olsun istenirse “Scale edemiyor oluyor” da denebilir. Sonra moral “down”. Yazılımcılardan sekiz ay sonra uğraşacağı bir geliştirmeye “size” vermesi isteyenlerin de kulakları çınlasın.  Şimdi konuyu başka bir yere “yönlendirmek” istiyorum. AngularJS için “routing” kavramına değineceğim.

AngularJS Routing

Bu yazıda kısaca angularjs routing işlemlerine değineceğim. AngularJS uygulaması yazmanın esprisi aslında SPA denen tek sayfa web uygulamaları yazmak.  Teknik anlamda routing yazılım geliştirmede de bir terim olarak geçmesine rağmen, network tarafında da kullanılmaktadır. Hatta hepsini geçtim  trafik işaret ve işaretçileri bile bu “routing” işini yapmakta. Kurallara uyalım, uymayanları uyaralım.

[wpfmb type=’warning’ theme=2]SPA’nın doğası gereği tek bir adres üzerinde tüm içerik dönüyor. Bir zamanlar bir yerlerde okumuş idim SPA’lar web spider’ları, google bot’ları yeterince akıllı olmadığından mütevellit seo’ya uygun değil diye, şu an durum ne çok bilemiyorum açıkçası ama her link farklı bir adrese gitmediğinde gitse bile bunu “implicit” bir şekilde yaptığından SPA’lar rank yükseltemiyor gibilerinden yakarışlar var idi.[/wpfmb]

Yukarıdaki plunk’ta ng-Route implementasyonu yapılmış ve routeProvider kullanarak “/test” adresine gelen isteklerin yönleneceği sayfa belirtilmiştir. (home.html)

Ng-route kullanabilmek için öncelikle ilgili kütüphane eklenir. (index.html)

Daha sonra angular.js uygulamasında kullanabilmek için ilgili tanım yapılır.

En son olarak ise yönlendirme yapılması istenen sayfa ve url için gerekli konfigürasyonlar yapılır.

Yukardaki 2 satırlık kod bloğu  herhangibirurl.com/test  şeklinde verilen url’e gelen isteklerin görüntüleyeceği sayfanın home.html olduğunu anlatıyor bize. Birden fazla sayfaya yönlendirme yapmak istiyorsak copy-paste akar.

Yukarıdaki örneğe baktığımızda 2 tane farklı parametre görülür. Bunlardan birisi view ile modeli ilişkilendiren “controller“,  diğeri ise html’den hatırlanacağı gibi “title” yani sayfa başlığı parametresi. Bunlar ihtiyaca göre tanımlanıp kullanılabilen opsiyonel parametrelerdir.

Tüm bunların dışında index.html içerisinde boş bir div yer aldığı göze çarpar.

Bu tanımın amacı yönlendirilen test sayfasının içeriğini görüntüleyebilmektir.

Bu işlem “url-based routing” olarak adlandırılır.

UI-Router kullanarak “state based routing” yapmak da mümkündür. ui-router paketini indirip projeye ekledikten sonra , dependency olarak eklenip stateProvider kullanılabilir, kullanımı routerProvider ile hemen hemen aynı

stateProvider ile routeProvider benzer işleri yapsa da routeProvider url map’lemesi yaparken, stateProvider ise url’lerin yanı sıra diğer davranışları da izlemeye yarar. stateProvider ile birden fazla view’ın bir sayfada görüntülenmesi mümkün olmaktadır. Büyük uygulamalarda tüm bu routing’i yönetmek stateProvider ile daha kolay olabileceğine dair görüşler mevcut. ng-route Angular ekibi tarafından geliştirilmiştir, ui-router ise 3. parti bir uygulamadır. Konu hakkında detaylı bir karşılaştırma şu podcast’te yer almaktadır.

Son Tahlil

Bu yazıda angular js routing kavramına değindim. SPA’ların doğası gereği tek sayfadan oluştuğu ama yine de bir takım yönlendirmelerin yapılması gerektiği, context’in bir şekilde değişmesi gerektiği durumlarda ng-route veya ui-router gibi kütüphaneleri kullanarak bunları yönetmek mümkün. Basit bir örnek ve açıklamalar ile bu kavrama açıklık getirmeye çalıştım. Umarım faydalı olur.

Leave a Reply

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