07_AngularJs_Views_Routes

Merhaba arkadaşlar, bu yazımda sayfalar arası yönlendirme ve görüntüleme konusunu anlatacağım.

İki adet farklı sayfamız ve bir adet de headerimiz olsun. Header sayfamız iki sayfada da ekli olsun. Header sayfamızda olan menü sayesinde sayfa1 ve sayfa2 arasında geçiş ve yönlendirme yapalım. Şimdi kodlar üzerinde konuyu anlatalım:

 Header.html

İndex.html

Görüldüğü gibi ng-include direktifi ile header sayfamıza eklenmiş. Ng-include direktifini önceki derslerde anlatmıştık. Bu sayfada dikkat edilmesi gereken yerler script etiketi ile angular-route.min.js dosyasının eklenmesi ve <main> etiketi.

Angular-route.min.js dosyası sayfalar arası yönlendirme için kullanılan script dosyasıdır.

Ng-view => Yönlendirme için oluşturulan templatelerin belirlenen alanda gösterilmesini sağlar.

Sayfa1.html

Sayfa2.html

Sayfa1 ve Sayfa2 sayfalarımızda sadece sayfa isimleri başlık olarak yazmaktadır. İndex.html sayfasından hangi sayfaya gidilmek istense ng-view direktifinin olduğu yere o sayfanın kodu otomatik olarak yerleşir.

App.js

Görüldüğü gibi modüle içerine ngRoute bağımlılığı eklenmiş. ngRoute bağımlılığı sayfa yönlendirmesi için kullanılır. Sayfa yönlendirme işlemi config() metodu içerisinde yapılır.  When() metodunun ilk parametresi path’i belirtir.

templateUrl => Hangi sayfanın kullanılacağı yol olarak belirtilir.

Controller => Gidilecek sayfada kullanılan controller ismi belirtilir.

Otherwise() => Sayfa bulunamadığında hangi sayfaya yönlendirme yapılacağı belirtilir.

İndex

Sayfa1

Bu yazıyı burada bitiriyorum diğer yazılarımda görüşmek üzere…

Print Friendly, PDF & Email

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir