Merhabalar
Angular JS nin V’si olan “View for Vendeta” ile devam ediyoruz. View denilen yapı aslında HTML dosyalarından baska bir şey değildir.Bildiğiniz gibi AngularJS için şöyle böyle demiştik ,sonra kendisinden Single Page Application olarak bahsetmiştik. Buradaki mantık sabit bir index.html sayfası ve içerisinde sayfalarımızın içeriği ile değişen küçük, leziz, gerçek html parçacıkları ile donatılmış, harika bir tat.
Şimdi isterseniz bu View olayı nasıl çalışıyor sayfa üzerinde nasıl gösteriliyor bir göz atalım…
Öncelikle gerekli olan malzemeleri sayıyorum
1 adet Angularjs kütüphanesi buradan temin ediyorsunuz
1 adet Angularjs Route kütüphanesi onuda buradan temin ediyorsunuz
1 adet Notepad++ o sizde var zaten olmayanı dövüyoruz 🙂
Evet tarife geçelim artık…
Index.HTML dosyanızı oluşturarak içersine şu kodları ekliyorsunuz.
[codebox 1]
Daha önceki Controller makalesindeki indexten tek farkı bir fazla kütüphane ve bir de ng-view denen bir dalga motor eklemişiz.
Ng-view bizim sayfa göstericimiz yani ASP.Net de ContentPlaceHolder vardı aynı ondan işte 🙂 ng-view üzerinde gösterilecek olan küçük html parçaları yani sayfa içerikleri ,ngroute kütüphanesini kullanarak oluşturacağımız config nesnesi üzerindeki yönergeleri takip ederek ng-view üzerinde değişirler.
O zaman bir config nesnesi oluşturalımda neymiş bu olay görelim.
[codebox 2]
Görüldüğü üzere module tanımlarken içerisine mutlaka ngRoute tanımlıyoruz ki config oluşturduğumuzda “bu ne lan?” demesin.
Daha sonra config içersinde $routeProvider.when() metodunu kullanıp sayfa url si sonundaki parametreleri yazarak hangi view gösterilecek bu view in controller i ne olacak belirtebiliyoruz.
Sonrasinda buda Controller im bunu zaten biliyorsunuz bilmiyorsanız “o ne la?” diyorsanız buraya bakınız.
[codebox 3]
Bu arada yukarıda yazmış olduğum config ve controller tek bir JS dosyası içersine yazılıyor yani en azından ben şuanlık öyle yaptım sonra dosya yapısı ve klasörleme yöntemlerinide anlatacağım.
Son olarak eklemiş olduğum iki View içersine aynı şeyleri yazdım oda şöyle ki :
[codebox 4]
Ve çalıştırdığım zaman aldığım çıktıda burada 🙂
Sonuç olarak 2 değişik sayfayı bir index.html içersinde gösterdik ve sayfa değişimlerini sağladık.
Umarım Yararlı Olur
Bilgiyle Kalın
M.Zeki OSMANCIK