Pazartesi , 23 Ocak 2017
Anasayfa » JavaScript » AngularJS » AngularJS Route Yapma

AngularJS Route Yapma

Bu yazıda Angularjs route yapma (Angularjs routing) kavramını inceleyeceğiz.  Bu yazı ve bundan sonraki bir kaç yazıda da bu kavram ile ilgili (template, url yönetimi vs.) konulara değinilecek.

Genellikle birden fazla görünüm yapmaya(view) başladığımızda kodlarımız karışmaya başlar. Tasarım ve kodlama ne kadar kompleks olursa uygulamanın kontrol altında tutulması o derece zor olmaya başlar.

Diyelim ki küçük çaplı bir firma için tek sayfa tasarımlı (single page) bir site hazırlıyoruz. Sayfamızda şu bağlantıların olduğunu varsayıyorum.

  • anasayfa
  • hakkımızda
  • iletişim

angular

 

Sayfayı kodlamaya başlayalım

 

1.Adım: HTML dosyasını oluşturulması

Route işlemi gerçekleştiğinde yüklenecek template sayfaları için <ng-view> etiketi yada ng-view atribute’ü kullanılabilir. Bu yazıda ng-view etiketini kullanıyorum.

Menüdeki linklere tıkladığımda .orta div’i içindeki ng-view etiketinde template sayfalar gösterilecek.

 

2.Adım: Script dosyaları ve stillerin yüklenmesi

Örnekte kullanmak için bir tane tasarim.css adında stil dosyası ve bir tane de jskod.js adında javascript dosyası oluşturdum.

Bunlarla birlikte projede angularjs ve route işlemi için angularjs-route kütüphanelerini projeye dahil ettim.

 

3 Adım:(tasarim.css) 

 

4.Adım: (jskod.js)

$routeProvider :route modülüne ulaşmamızı sağlar

when(path, route):  $routeProvider nesnesinin bir metodudur. path(url yolu), route(ilerleyen yazılarda daha detaylı incelenecek)  adında bir nesne almaktadır.

templateUrl: route nesnesinin bir özelliğidir. Fiziksel bir web sayfası yolunu ifade eder.

Menüdeki linklere tıklandığında url adresi değişecek. Değişen url adresi de burada gösterilen path ile uyuşan html sayfasını ekranda ng-view içinde gösterecektir.

Angularjs Routing Örnek Uygulama Dosyası

$routeProvider için daha detaylı bilgi için tıklayın

Hakkında Hayri

İlginizi Çekebilir

AngularJS Özel Servis Oluşturma

AngularJS ile 4 işlemi gerçekleştiren özel bir servis oluşturup angular projemize dahil edeceğiz.   İlgili

Bir Cevap Yazın

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

Wordpress Tema indir