AngularJS İle Route İşlemleri Ve Template Yapısı Kullanımı

AngularJS ile sayfaları parçalara ayırıp daha okunaklı ve anlaşılır projeler hazırlayabilirsiniz ve AngularJS route yapısı ile bu ayrı sayfaları ve içerisindeki controller verileri asenkron bir şekilde sayfa yenilemesi olmadan gösterilmesi sağlayacağız.

AngularJS ile route işlemleri ve template yapısı kullanımı

Bu örneğimizde iki adet angular kütüphanesi kullacağız ilki genel olarak kullanılması gereken angular.js diğeride angular-route.js kütüphanesidir. ayrıca veri olarakda 6 tane ülkemizin tanımlı olduğu country.json adlı bir dosyadan alıp route ve template’de veri alma işleme işlemlerini bu .json dosyasındaki veriler ile yapacağız. country.json içeriğimiz aşağıdaki gibi.

JSON(country.json)

Şimdi ise index.html dosyasını oluşturalım aslında template yapısı olduğundan index.html dosyasını asp.net ile benzeştirme yaparsak masterPage olarak görebiliriz diğer sayfaları ise bu masterPage sayfası olan index.html sayfasına gömülecek olan UserControl sayfaları olarak görebiliriz. şimdi index.html yani masterPage sayfamızı görelim.

HTML(index.html)

Üstteki kodda ayrı olarak önemli olan bir diğer konu route işlemi sonucu gösterilecek template dosyaları derlendikten sonra nerede gösterileceğidir. Benim body etiketi altındaki div etiketinde belirtmiş olduğum ng-view attribute’ü ile route işlemi sonucunda derlenecek template sayfalarının nerede gösterileceği bu şekilde belirtilmiştir. ng-view attribute’ünü nereye eklerseniz onu içerisine derlecektir template sayfaları.

Şimdi ise diğer iki template sayfalarımız olan biri ülke listesini diğeri ise seçilecek olan ülkenin detayını gösterecek çok basit bir sayfa gösterilecektir.

HTML(country-list.html)

HTML(country-detail.html)

Şimdi en önemli dosya olan module tanımlaması, route ayarları ve controller tanımlarının yer aldığı app.js dosyamıza gözatalım.

Javascript(app.js)

Sonuç

Proje İndir