Internet programcılığı enteresan bir noktaya geldi. Artık en basit bir web sayfasını bile bir web aplikasyonu olarak değerlendirmek gerek. HTML - CSS statik web sayfaları yaratmak konusunda son derece başarılı ancak artık statik web sayfaları bizi kesmiyor. Bunun için JavaScript kullanarak sayfalarımıza dinamik bir içerik kazandırmak zorundayız.
AngularJS özel bir hedefe yönelmiş bir JavaScript frameworküdür. HTML etiketlerine (tag) çeşitli özellikler (attribute) ekleyerek, yani HTML'i genişleterek süratle ve kolayca dinamik web aplikasyonları oluşturmamıza yardımcı olur.
Öncelikle şu "kolayca" ve "süratle" konusunu açabilmek için basit bir karşılaştırmalı örnek oluşturalım. Örneğimizde text kutusuna girdiğimiz veriyi eş zamanlı olarak paragrafın içine yazdırma işlevini bir kez JavaScript (+ jQuery) ve bir kez de AngularJS kullanarak kodlayalım.
JavaScript:
<body>
<input type="text" id="metin" />
<p id="paragraf"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function($) {
"use strict";
$(function() {
$('#metin').keyup(metinYaz).keydown(metinYaz);
});
function metinYaz() {
$('#paragraf').html($(this).val());
}
})(jQuery);
</script>
</body>
Sonuç:
AngularJS:
<body ng-app=""> <input type="text" ng-model="metin" /> <p ng-bind="metin"></p> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </body>
Sonuç:
E, kod nerede? Tek satır JavaScript yazmadık.
O derece...
Öncelikle aplikasyonumuzu isimlendirmek isteriz:
<div data-ng-app="ngApp" ...
Angular aplikasyonu oluşturmak için taşıyıcı elementimizde ng-app özelliğini (attribute) kullanırız. Yukarıda, farketmiş olduğunuz üzere data-ng-app tercih ettim. Bunun nedeni ng-app özelliğinin W3C standartlarına uymayışı. Başına data- ekleyince daha yakışıklı oluyor...
Aplikasyonumuzun ismini belirledikten sonra controllerımızı oluşturalım:
<div data-ng-app="ngApp" data-ng-controller="ngCtrl">
Şimdi de işin script kısmını ekleyelim:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module("ngApp", []);
app.controller("ngCtrl", function($scope) {
$scope.isim = "Mehmet";
$scope.soyad = "Yılmaz";
});
</script>
Bu kısımda önce Angular modülümüzü bir değişkene atadık ardından bu modül için bir denetçi (controller) oluşturduk. $scope değişkeni isminden de anlaşılabileceği üzere denetçimizin kapsamını (kullanılacak olan tüm değişken ve fonksiyonlarımızı) belirlemek için kullanılıyor.
Hadi bir toparlayıp isim ve soyad kutularına girilen değerleri eş zamanlı olarak yazdıran bir kod çalıştıralım:
<div data-ng-app="ngApp" data-ng-controller="ngCtrl">
<p>İsim: <input type="text" data-ng-model="isim" /></p>
<p>Soyad: <input type="text" data-ng-model="soyad" /></p>
<p>{{ isim + ' ' + soyad }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module("ngApp", []);
app.controller("ngCtrl", function($scope) {
$scope.isim = "Mehmet";
$scope.soyad = "Yılmaz";
});
</script>
Açıklama: Angular modülümüzün içinde, denetçi değerlerini çift süslü parantez içine alarak "{{ }}" kullanabiliyoruz. Modülümüz ve denetçimizi JavaScript bloğu içinde oluşturuyoruz. Burada dikkat edilmesi gereken nokta, script bloğumuzu AngularJS yüklendikten sonra çalıştırmaktır. Sonuç aşağıdaki gibi:
AngularJS ile kodlarken HTML elementlerine yeni özellikler (attribute) uygulayarak yeteneklerini artırdığımızı söylemiştik. Bu özellikleri yönerge (directive) olarak adlandırıyoruz. Şu ana dek bazı yönergeler kullandık. Bunlar:
Çok işimize yarayacak bir diğer yönerge de ng-repeat yönergesidir. Adından da belli olduğu üzere bu yönergeyi dizi değişkenleri için döngü mantığı ile kullanıyoruz. Örneğin, motosiklet marka ve modellerinden oluşan bir tablo oluşturmak istersek:
<div data-ng-app="ngApp" data-ng-controller="ngCtrl">
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Marka</th>
<th>Model</th>
</tr>
<tr data-ng-repeat="x in motosiklet">
<td data-ng-bind="x.marka"></td>
<td data-ng-bind="x.model"></td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module("ngApp", []);
app.controller("ngCtrl", function($scope) {
$scope.motosiklet = [
{ 'marka' : 'Yamaha', 'model' : 'VStar 650' },
{ 'marka' : 'Yamaha', 'model' : 'VStar 1100' },
{ 'marka' : 'Honda', 'model' : 'Shadow 750C' },
{ 'marka' : 'Honda', 'model' : 'Shadow 600' },
{ 'marka' : 'Kawasaki', 'model' : 'W800' },
{ 'marka' : 'Kawasaki', 'model' : 'VN800' },
{ 'marka' : 'Kawasaki', 'model' : 'Drifter' },
{ 'marka' : 'Harley&Davidson', 'model' : 'Sportster' },
{ 'marka' : 'Harley&Davidson', 'model' : 'FatBoy' }
];
});
</script>
Sonuç:
Hazır döngülerden bahsetmişken filtreleri de konuya dahil etmenin tam zamanıdır. AngularJS filtreleri aşağıdaki gibidir:
Yukarıdaki örneği bu filtrelerin bir kısmını uygulayarak tekrar düzenleyelim:
<div data-ng-app="ngApp" data-ng-controller="ngCtrl">
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Marka</th>
<th>Model</th>
</tr>
<tr data-ng-repeat="x in motosiklet | orderBy: sira | filter: filtre">
<td data-ng-bind="x.marka | uppercase"></td>
<td data-ng-bind="x.model"></td>
</tr>
</table>
<p>
Sırala:
<select data-ng-model="sira">
<option>marka</option>
<option>model</option>
</select>
</p>
<p>
Filtrele:
<input type="text" data-ng-model="filtre" />
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module("ngApp", []);
app.controller("ngCtrl", function($scope) {
$scope.motosiklet = [
{ 'marka' : 'Yamaha', 'model' : 'VStar 650' },
{ 'marka' : 'Yamaha', 'model' : 'VStar 1100' },
{ 'marka' : 'Honda', 'model' : 'Shadow 750C' },
{ 'marka' : 'Honda', 'model' : 'Shadow 600' },
{ 'marka' : 'Kawasaki', 'model' : 'W800' },
{ 'marka' : 'Kawasaki', 'model' : 'VN800' },
{ 'marka' : 'Kawasaki', 'model' : 'Drifter' },
{ 'marka' : 'Harley&Davidson', 'model' : 'Sportster' },
{ 'marka' : 'Harley&Davidson', 'model' : 'FatBoy' }
];
$scope.sira = 'marka';
$scope.filtre = '';
});
</script>
Sonuç:
Elbette bu tür listeleri veri tabanından alacağımız bilgilerle hazırlamak isteyeceğiz. Bu durumda JSON kullanımı oldukça işe yarar bir yöntem olarak öne çıkıyor.
[
{ 'marka' : 'Yamaha', 'model' : 'VStar 650' },
{ 'marka' : 'Yamaha', 'model' : 'VStar 1100' },
{ 'marka' : 'Honda', 'model' : 'Shadow 750C' },
{ 'marka' : 'Honda', 'model' : 'Shadow 600' },
{ 'marka' : 'Kawasaki', 'model' : 'W800' },
{ 'marka' : 'Kawasaki', 'model' : 'VN800' },
{ 'marka' : 'Kawasaki', 'model' : 'Drifter' },
{ 'marka' : 'Harley&Davidson', 'model' : 'Sportster' },
{ 'marka' : 'Harley&Davidson', 'model' : 'FatBoy' }
];
Örnekteki "$scope.motosiklet" değerinin içeriğini hazırlayacak ve yukarıdaki veriyi bize döndürecek bir php sayfası oluşturduğumuzu varsayalım.
function customersController($scope,$http) {
$http
.get("http://domain.com/motosiklet.php")
.success(function(cevap) {$scope.motosiklet = cevap;});
}
Veriyi JSON ile almak işte bu kadar basit...
AngularJS ile DOM manipülasyonu, olayları (event) dinlemek gibi daha birçok işlem gerçekleştirilebiliyor. Ancak bu yazı AngularJS'in kullanımını baştan sona anlatmak değil bir giriş yapmak amacını taşıyor. Bu nedenle şimdilik burada kapatalım.
Önemli Not: AngularJS ile olsun olmasın, arama motorları tarafından indexlenmesini istediğiniz içeriği AJAX ve JSON kullanarak çağırmak iyi bir fikir değildir...
