Neler Öğreneceğim?
- AngularJS'de Template Kavramı ve Kullanımı
- Template Kavramı ve Modüler Yapısı
- Neden Template (Şablon) Kullanıyoruz?
- Template Kullanımı ve Uygulamadaki Yeri
- AngularJS'de Adresleme ve Sayfa Yönetimi
- Adresleme (Sayfalama) Kavramı
Gereksinimler
- Notepad++
Zorluk Düzeyi
- Intermediate (Orta Seviye)
English
Template Concept and Use in AngularJS
As mentioned in previous chapters, one of the most important features of AngularJS was to enrich HTML with its directives and create a simple development interface to JavaScript with these angular-specific elements and directives.
In this section we will examine the template concept, which is the forefront of using these features in a more modular fashion.
Türkçe
AngularJS'de Template Kavramı ve Kullanımı
Önceki bölümlerde de bahsettiğimiz gibi, AngularJS'in en önemli özelliklerinin başında direktifleri ile HTML'i zenginleştirip, bu angular-özel element ve direktifler ile Javascript tarafında basit bir geliştirme arayüzü oluşturmasıydı.
Bu bölümünde bu özellikleri daha modüler şekilde kullanmamıza ön ayak olan template kavramını inceleyeceğiz.
Template Kavramı ve Modüler Yapısı
Template (şablon), HTML kodları ve angular-özel yapılardan (direktifler, expression belirticileri, filtreler, form kontrol metodları) oluşmuş genel geçer bir veri yapılandırıcısı olarak tanımlanabilir.
Template'ler genellikle kullanılmak (include edilmek) üzere bir HTML dosyasında tutulur. (sayfa.html) Bahsi geçen template bir özel direktife template olarak atanarak kullanılmaktadır.
Örneğin; Bir kütüphanenin kitaplarını sunan uygulama oluşturuyorken kitapların sıralanmasını sağlayan yapıyı bir template (listele.html), bir kitabın ayrıntılarını gösterdiğimiz sayfa yapısını bir template olarak (ayrinti.html) düşünebiliriz.
Neden Template (Şablon) Kullanıyoruz?
Template, tek sayfa uygulamalarını geliştirken daha düzenli ve modüler bir geliştirme ortamı oluşturur. En büyük artısının bu olduğunu söyleyebiliriz.
Buna ek olarak bir template, uygulama içerisinde birden fazla kez kullanılabilir. Aynı HTML kodunu tekrar tekrar kullanmak yerine, oluşturulmuş bir template üzerinden tek satır kod ile dahil edebilirsiniz.
Template Kullanımı ve Uygulamadaki Yeri
Template kullanırken, programlama sırasında kodun hangi bölümünün bir template oluşturacağını genel olarak düşünmeden kararlaştırmak kötü bir işleyiş olabilir, Bunun yerine oluşturacağınız uygulamanın birbirinden ayrılacak alakası olmayacak veya birden fazla kez kullanılacak bölümlerinin belirlenmesi çalışma akışınızı daha verimli hale getirecektir.
Çok basit bir örnek ile, bir template dosyasını direktifler yardımı ile uygulamamıza nasıl eklediğimizi inceleyelim;
index.html Dosyası İçeriği
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Ders Uygulamaları</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<meta name="viewport" content="width=device-width">
</head>
<div ng-app="ngUygulamam" ng-controller="ngKontrol">
Normal İçerik
<hr/>
<div sayfa></div>
</div>
<script type="text/javascript">
var uygulama = angular.module("ngUygulamam", []);
uygulama.controller("ngKontrol", function($scope) {
$scope.sayfaBaslik = "Deneme Başlık";
$scope.sayfaIcerik = "Lorem ipsum dolor sit amet.";
});
uygulama.directive("sayfa", function() {
return {
templateUrl: 'sayfa.html'
};
});
</script>
</body>
</html>
sayfa.html Dosyası İçeriği
<h2>{{sayfaBaslik}}</h2>
<p>{{sayfaIcerik}}</p>
Sayfa Yapısı
/Ana Klasör
-index.htl
-sayfa.html
Bu örnekte, aynı klasörde bulunan index.htmı ve sayfa.htmı dosyaları içeriğini görüyoruz. Burada, kendi oluşturduğumuz sayfa direktifi ile, sayfa.htmı template'ini bu direktife yükletiyoruz.
Not: Bu örnekte, sayfa template'inin ana kontrol metodumuzun sayfaBaslik ve sayfalcerik gibi $scope değişkenlerine ulaşabildiğini görebilirsiniz. Buna ek olarak bu template için özel olarak bir kontrol metodu oluşturarak bu direktif yardımı ile veya ngcontroller direktifi ile atayabilirsiniz.
İsterseniz bahsettiğimiz kitap listeleme ve kitabın ayrıntılarını görüntüleme örneğini bu öğrendiğimiz bilgi ile tekrar oluşturmaya çalışabilirsiniz. Bunun için listele.html, ayrinti.htmı ve bu ikisini taşıyacak index.htmı dosyalarına ihtiyacınız olacak.
Görünümün Modüler Yapısını Template ile Sağlamak
Template kavramının çalışma akışımızı daha sistematik ve geliştirmesi sürdürülebiıir (maintainable) bir hale getirdiğinden bahsetmiştik. Bunu nasıl sağladığını ve template'leri bu durumu sağlamak için en iyi şekilde nasıl kullanabileceğimizden kısaca bahsedelim. Uygulamanın aynı seviyedeki belirli görünüm (view) bölümlerinin saptanarak ayrılması gerekir.
Instagram mobil web sitesini örnek olarak kullanacak olursak;
Görselde gördüğünüz gibi, üst bölümde dört farklı ikon bulunuyorken hemen üst bölümün altında uygulamayı indirmenizi isteyen bir bar görüyorsunuz. Buna ek olarak anasayfada bulunacak yazı ve son olarak bir alt bölüm görüyoruz. Alt bölümde linkler ve copyright ibaresi bulunuyor.
Buna göre arayüzü dört farklı bölüme böldük, Burada üst bölümdeki ikonlar (tab.html), bazı sayfalarda görünmesini isteyeceğimi düşündüğümden instagram uygulamasını indirme bari (uygulama-indir.html), anasayfa ve arama sayfası gibi bölümlerin sürekli yer değişerek görüneceği asıl bölüm (asil.html) ve sadece bazı sayfalarda bulunacak alt bölüm (altbolum.html) olmak üzere dört farklı template oluştu.
Not: Ayırdığımız yerlerin ortak noktasına dikkatli bakarsanız, birbiri ile fazla alakası olmayan noktalardan kestiğimizi görebilirsiniz.
Sayfa Yapısı
/Ana Klasör
-index.html
-tab.html
-uygulama-indir.html
-asil.html
-altbolum.html
Bu sayfa yapısına göre oluşturulmuş template direktiflerimizi index.htmı dosyamızda şu şekilde ekleyecektik;
index.html Dosyası içeriği
<div tab></div>
<div uygulama-indir></div>
<div asil></div>
<div altbolum></div>
Peki, bu yapı neyi sağladı? Gerekli olduğunda ng-if gibi bir belirteç ile bazı sayfalarda görünmesini istemediğim view elementlerini basit bir expression değerini değiştirerek kaldırabileceğiz. Kodlama sırasında eğer eskiye dönük bir değişiklik yapılması gerekirse, değişiklik yapılacak bölümü bulması çok daha kolay ve rahat olacak.
Tüm bunlara ek olarak, modüler yapısından dolayı birden fazla kişinin çalıştığı proje için (pair programming) geliştiricilerin birbirinin kodunu sürekli incelemesi gerekliğini bir adım daha rahatlatmış olacak.
AngularJS'de Adresleme ve Sayfa Yönetimi
Önceki eğitimlerde template kavramından ve nasıl kullanıldığından bahsettik.
Bu bölümde ise, öğrendiğimiz bilgileri de kullanarak, bir AngularJS uygulamasında adresleme ve sayfa yönetiminin nasıl yapıldığından bahsedeceğiz.
Sayfalama kavramından, $route servisinin nasıl kullanıldığından ve AngularJS uygulamalarında sayfalamanın nasıl bir fayda sağladığından bahsedeceğiz.
Adresleme (Sayfalama) Kavramı
Web sitelerine adresler üzerinden erişiriz ve her alt web adresinin (URL) bu web sayfasında özel bir sayfayı veya bilgiyi göstereceği kullanıcı tarafından önceden bilinir.
www.patates.com/anasayfa sayfası, patates.com sitesinin anasayfasına giderken, www.patates.com/faydalari sayfasi yüklendiğinde bu sayfada patatesin faydaları ile ilgili bilgiler olacağı önceden kullanıcının tahmin ettiği bir olgudur.
AngularJS'in tek sayfa uygulamaları için ideal bir teknoloji olduğundan bahsetmiştik. AngularJS eski anlamda tek sayfada işlem görüyor olmasına rağmen, $route servisi sayesinde sayfalama özelliği ile site içi linkler oluşturarak bu linklere özel içerik gösterimi yapabiliyor.
Posted on Utopian.io - Rewarding Open Source Contributors