Route ve template kavramı ile ilgili ikinci 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ı tavsiye ederim.
Bir önceki yazıda aşağıdaki şekilde gösterildiği gibi bir sayfa yapımız vardı.
templateUrl: route nesnesinin bir özelliğidir. Fiziksel bir web sayfası yolunu ifade eder.
controller: route nesnesinin bir özelliğidir. Fiziksel bir web sayfası için kontrol oluşturmak için kullanılır.
Uygulamaya devam edeceğim Angularjs Routing Örnek Uygulama Dosyası üzerinden anlatıma devam ediyorum. Yüklediğimiz her sayfa için ayrı kontroller oluşturup programatik olarak sayfalarımızın yönetimini rahatlamış oluruz. Bu örnekte anasayfa.html dosyasına anaSayfaController adında bir kontrol bağladık.
Hemen yine tanımlamaların alt kısmında app olarak oluşturduğum kontrolü uygulamama bağladım. İçine iki tane baslik ve aciklama adında anahtar oluşturdum.
jskod.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "anasayfa.html", controller:"anaSayfaController" /*eklenen alan ve bir üstteki virgülü unutma (,)*/ }) .when("/hakkimizda", { templateUrl : "hakkimizda.html" }) .when("/iletisim", { templateUrl : "iletisim.html" }); }); /*eklenenen alan*/ app.controller("anaSayfaController", function ($scope) { $scope.baslik = "Yazılım Bilişim"; $scope.aciklama = "...................."; }); |
Kontrolü oluşturduktan sonra bu kontrolü kullanan HTML sayfasında da istediğimiz alanlara anahtarlarımızı yerleştiriyoruz.
HTML(anasayfa.html)
|
1 2 3 4 5 6 |
<div> <h1>{{baslik}}</h1> <p>{{aciklama}}</p> </div> |
Birden fazla kontrol kullanacağımız zaman kontrolleri javascriptin zincirleme özelliğini kullanarak art arda ekleyebiliriz. Aşağıda hakkimizdaController ve anaSayfaController oluşturulmuştur.
jskod.js
|
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 |
var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "anasayfa.html", controller:"anaSayfaController" }) .when("/hakkimizda", { templateUrl : "hakkimizda.html", controller:"hakkimizdaController" }) .when("/iletisim", { templateUrl : "iletisim.html" }); }); app.controller("anaSayfaController", function ($scope) { $scope.baslik = "Yazılım Bilişim"; $scope.aciklama = "Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur."; }) .controller("hakkimizdaController", function ($scope) { $scope.baslik = "Kurumsal Bilgi"; $scope.aciklama = "Kurum hakkında detaylı bilgilere ulaşmak için bu bölümü kulanabilirsiniz.Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir."; }); |
anasayfa.html ve hakkimizda.html sayfalarını uygun şekilde düzenlemeyi unutmayın.
AngularJS Route Yapma Uygulama Dosyası #2
merhaba, angularda bir blog yapısı kurmaya calısıyorum ama içerikler sonradan yüklendiği için seo açısından zararlı die düşünüyorum, acaba arama motorları için nasıl bir ayar yapabiliriz?
Angularjs yada angular ikisi de Google tarafından oluşturuldu. Yanılmıyorsam asenkron çağrılar için Google botları bir süre sayfanın yüklenmesini bekliyorlar
anladım cevap için teşekkürler. İlk açılışda php ile view de getirmeye çalıştım ama becerememistim ozamanlar. Sırf bu yüzden angularla kodlamayı bırakmıstım, bunu araştırayım olursa tekrar devam etcem. Ajaxla isteklerimi karşılamıyor angular kaadar
[…] bilmeniz gereken bu kavram bir önceki yazının devamı olduğu için bir önceki yazının sonunda paylaştığım dosyayı indirip onun üzerinden devam […]
[…] Konu 23:AngularJS Route #2 […]