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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<body ng-app="myApp"> <div class="sayfa"> <div class="baslik"><h1>Web sitesi</h1></div> <div ust="ust"> <ul id="yataymenu"> <li><a href="#/">Ana Sayfa</a></li> <li><a href="#/hakkimizda">Hakkımızda</a></li> <li><a href="#/iletisim">İletişim</a></li> </ul> </div> <div class="temizle"></div> <div class="orta"> <ng-view></ng-view> </div> <div class="alt"><h1>Sayfanın alt kısmı</h1></div> </div> </body> |
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.
|
1 2 3 4 5 6 7 8 9 |
<head> <meta charset="utf-8"> <link href="tasarim.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> <script src="jskod.js"></script> </head> |
3 Adım:(tasarim.css)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
.sayfa{ width: 960px; margin:auto; } ul#yataymenu{ list-style-type: none; margin: 0; padding: 0; } #yataymenu li{ float:left; } #yataymenu li a { display: block; background-color:#2CC990; color:#D8335B; height:50px; width: 130px; text-align: center; line-height:50px; text-decoration:none; transition:all .3s ease-in; } #yataymenu li a:hover{ color:#2CC990; background-color:#D8335B; } .temizle{ clear: both; } .orta{ min-height: 300px; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "anasayfa.html" }) .when("/hakkimizda", { templateUrl : "hakkimizda.html" }) .when("/iletisim", { templateUrl : "iletisim.html" }); }); |
örneklerin bir kısmı çalışmıyor.
Örneklerin hepsi çalışıyor. Yanlız bazı örnekleri sunucu üzerinde denenen gerekiyor. Localhost gibi bir sunucu hizmeti kurup deneyebilirsin. Php için xampp bu ili görür. Asp.net ile iis yada VS studio kurup denenen gerekiyor.
[…] yazımızda oluşturduğumuz kontrolleri template dosyalarına bağlamayı anlatacağım. Bu konu route yapma konusunun devamı olduğu için öncelikle 1. yazıyı okumanızı sonra bu yazıya bakmanızı […]
[…] Konu22: AngularJS Route Yapma […]