12 Haziran 2016 Pazar

AngularJS Routing


AngularJS ile tek sayfa biçiminde yönlendirme yapabiliriz. Bunu bir örnekle açıklamaya çalışayım ;
Örneğin bir blog sitemiz var ve ana sayfa da üstte navbar solda da sırası ile yazıların linki var. Her bir yazı ayrı bir HTML dosyası içerinde tutuluyor olsun. Linklere tıkladığımda da anasayfa da sadece içeriğin gösterileceği content kısmı değişsin istiyorum. İşte böyle bir yapıyı AngularJS route (ng-Route) ile kolay bir şekilde yapabiliriz. Böyle bir yapının özel bir adı var mı bilmiyorum ancak bu şekilde açıklayabildim. : )

Yukarıda yaptığım açıklamadaki yapıya ihtiyacım vardı ve biraz araştırarak çok basit bir örnek yaptım. Bu çalışır haldeki örneğe aşağıdaki linkten erişebilirsiniz;

https://github.com/Guvenir/AngularOrnekler

Kodlara göz atmaya geçmeden önce hatırlatmak istediğim bir husus var. AngularJS bazen sunucu gerektirmeden de çalışabiliyor , yani kodları ekleyip html dosyasına çift tıkladığımızda çalışıyor hata almıyoruz ancak bu durum her zaman böyle değildir , bir sunucu üzerinde çalıştırmakta fayda var. Yukarıdaki linkten projeyi indirip index.html yi direk tarayıcı da açarsak hata alırız. Bunun için AngularJS projemizi bir sunucuda çalışacak şekilde ayarlamalıyız.

Proje son derece basit , aşağıdaki gibi;


Öncelikle angularjs cdn yi ekledikten sonra birde angular-route cdn yi projemize dahil ediyoruz aşağıda olduğu gibi;


Angular kodlarında module içerisine ['ngRoute'] ekliyoruz , daha sonrasında ise $routeProvider ile yönlendirmeleri yapıyoruz. 'otherwise' ise rastgele girilen url ler için yönlendirilecek sayfayı belirtiyor.  $locationProvider.html5Mode(true) ise linkler açıldığında url de çıkan '#' silmek için. Her bir when içerisinde yönlendirilecek sayfa ve bu sayfa için kullanılacak controller belirtiliyor. Böylece her sayfa için farklı controller kullanmamız sağlanıyor.

Şimdilik bu kadar , size iyi eğlenceler!

0 yorum:

Yorum Gönder