1. AngularJS Giriş

Günümüz web teknolojilerinde yaygın olarak kullanılan Javascript, günümüz şartlarına ayak uymasını sağlayabilecek bazı web uygulama mimarilerine ihtiyaç duymaktadır ve bu ihtiyaçlar doğrultusunda AngularJS, tek sayfa üzerinde Model – View – Controller ( MVC ) yazılım mimarisine uyumlu olacak şekilde tasarlanmıştır. Google tarafından geliştirilmiş olıp açık kaynak kodlu bir web uygulama çatısıdır.

(Bakınız : https://tr.wikipedia.org/wiki/)

Model – View – Controller konusunda bilgi sahibi olmak isterseniz bu yazıdan da faydalanabilirsiniz :

http://www.tolgasariyildiz.com.tr/blog/asp-net-mvc-framework/

Konu anlatımları ve teorik bilgilere internet üzerinden pek çok kaynaktan ulaşabilirsiniz. Yazımızda daha çok uygulamalar üzerinde durmayı planlıyorum. Tabiki yeri geldikçe teorik olarak açıklanması gereken yerlerde gerekli bilgilerin verileceğinden şüpheniz olmasın.

Yararlanabileceğiniz Bazı Kaynaklar :

Temel Düzeyde Öğrenmek İsteyenler İçin : http://www.w3schools.com/angular/

İleri Düzeyde Öğrenmek İsteyenler İçin : https://www.codecademy.com/

https://www.codeschool.com/courses/shaping-up-with-angular-js

* Bu iki sitede kurslara girebilmeniz için üye olmanız gerekiyor.

AngularJS öğrenmenize yardımcı olacak dokümanlara da bu bağlantıda yer alan ingilizce kaynaktan ulaşabilirsiniz.

AngularJS uygulama çatısı web sayfasına nasıl dahil edilebilir ?

AngularJS hazır olarak web üzerinden çağrılabilmektedir. Ancak bunun için HTML sayfamızda “<body></body>” etiketinin hemen üstünde yer alan “<head></head>” etiketleri arasına aşağıda vereceğim kod parçasını eklemeniz gerekmektedir. Böylece HTML ve AngularJS ile yazacağımız kodlar işlevlik kazanacaktır.


<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”>
<!–DEMO–>
<!–Script etiketi ekleyerek angularJS HTML sayfamızda aktif hale getirilir.–>
</script>


Kodların uygulanmış biçimini görebileceğiniz ve kendinizin de uygulamalarınızı deneyebileceğiniz script yapısına sahip sayfalara kendindene.tolgasariyildiz.com.tr sitesinden ulaşabilirsiniz.

2. Temel Yapılar ve Fonksiyonlar

2.1 AngularJS Controller Mantığı

AngularJS ile controller kısmında çeşitli fonksiyonların kullanımı ve nesneler yardımıyla data modellerden faydalanarak çeşitli işlemlerin gerçekleştirilmesi sağlanmaktadır. Angular için özel olarak tanımlanmış Scope nesnesi uygulama modeline referans vermemize yarayan, önemli bir değişkendir. Controller kısmında tanımlanan metotların içerisinde kullanılan bu nesne, aynı zamanda altta bahsetmiş olduğumuz Expressions(ifadeler) ile birlikte kullanılarak standart Javascript fonksiyonlarına göre çok daha yalın bir kodlamayla oluşturulmuş fonksiyonlar ve metotlar oluşturulabilir.

Controller kısmında Scope nesneleri çoğaltılarak yapısal Javascript fonksiyonlarında kullanılmaktadır. Aslında bir bakıma kontrol yapıları “$scope” nesnesinin ilk durumun ne şekilde olacağını belirler. Nesnenin hangi durumlarda ne amaçla kullanılacağının belirlenmesi de bu yapılar içerisinde belirlenir.

DOM Manipulasyonları için kontrollerin kullanılmaması gerekir. AngularJS bunun sağlanması için aşağıda bahsetmiş olduğumuz direktif yapılarını kullanmaktadır. Dışarıdan erişim direkt olarak bu yapılarla sağlanarak, data değerlerinin değiştirilmesi gerçekleştirilir.

AngularJS üzerinde birçok hazır yapı tanımlanarak, form işlemleri, çıktılar üzerinde filtreleme işlemleri ( Web sayfasında görülen metnin tamamının büyük harfe çevrilmesi gibi) , uygulama yaşam döngüsündeki diğer bileşenlerin yönetimi gibi işlemler ayrı ayrı yapılabilmektedir. Bu yüzden bu işlemler içinde Controller yapılarını kullanmamak önerilmektedir.


<html>
<head>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
</head>
<body>
<div ng-controller=”ExampleController” ng-app=”myApp”>
{{hello}}
</div>
<script>
angular.module(‘myApp’,[]).controller(‘ExampleController’, [‘$scope’, function($scope) {
$scope.hello = ‘Merhaba Dunya!’;
}]);
</script>
</body>
</html>


Kodun uygulamasını görmek için tıklayınız

2.2 AngularJS İfadeler (Expressions) Kullanılımı

AngularJS ile karmaşık işlemlerde web programcı ve tasarımcıların işini kolaylaştıran ifadeler (expressions) ile herhangi bir değer ataması yapmadan metinler ve sayılar üzerinde kolaylıkla işlem yapabilmekteyiz.

Basit Matematiksel İşlemlerde Kullanımı :

Matematik işlemlerde direkt olarak parantezlerin içinde gerekli işlemi yapıp ekranda görüntüleyebilirsiniz. Ayrıca AngularJS, değer ataması yaparak da gerekli matematiksel işlemi yapmanıza izin vermektedir.


<html lang=”tr”>
<head><meta http-equiv=”Content-Type” content=”text/html; charset=euc-jp”>

<title>Example – example-example26-production</title>

<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js”></script>
<script>
(function(angular) {
‘use strict’;
angular.module(‘expressionExample’, [])
.controller(‘ExampleController’, [‘$scope’, function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = ‘3*10|currency’;
$scope.addExp = function(expr) {
exprs.push(expr);
};

$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
})(window.angular);
it(‘should allow user expression testing’, function() {
element(by.css(‘.expressions button’)).click();
var lis = element(by.css(‘.expressions ul’)).all(by.repeater(‘expr in exprs’));
expect(lis.count()).toBe(1);
expect(lis.get(0).getText()).toEqual(‘[ X ] 3*10|currency => $30.00′);
});
</script>
</head>
<body ng-app=”expressionExample”>
<div ng-controller=”ExampleController” class=”expressions”>
İşleminiz:
<input type=’text’ ng-model=”expr” size=”80″/>
<button ng-click=”addExp(expr)”>Hesapla</button>
<ul>
<li ng-repeat=”expr in exprs track by $index”>
[ <a href=”” ng-click=”removeExp($index)”>X</a> ]
<code>{{expr}}</code> => <span ng-bind=”$parent.$eval(expr)”></span>
</li>
</ul>
</div>
</body>
</html>


Kodun uygulamasını görmek için tıklayınız

Metinler üzerinde İfadelerin Kullanımı :

Metinler birleştirilmesi ya da HTML etiketleri içerisinden birleştirilip gösterilmesi için AngularJS ifadelerini kullanabilirsiniz.


<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>

<div ng-app=”” ng-init=”ilkIsim=’Angular’;sonIsim=’JS'”>
<p>Merhaba <span ng-bind=”ilkIsim + ‘ ‘ + sonIsim”></span> !</p>
<p>{{ ilkIsim + ” ” + sonIsim }} öğreniyoruz! </p>

</div>

</body>
</html>


2.3 AngularJS Validation Kontrolleri

AngularJS çeşitli hata kontrol yapıları içermekte ve seçeceğiniz kontrol durumuna göre farklı özellikleri kullandırmaktadır. Örneğin bir kayıt veya giriş formu üzerinde isim ve e-posta girilen alanların doldurulmasının zorunluluğu AngularJS validation kontrolleri ile sağlanabilmektedir.

Form üzerinde girilmesi zorunlu alanların yer aldığı örnek bir uygulamaya aşağıda vereceğim linkten ulaşabilirsiniz.


<html lang=’tr’>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<style>
input.ng-invalid {
background-color:pink;
}
input.ng-valid {
background-color:lightgreen;
}
</style>
<body ng-app=””>

<p>Lütfen aşağıdaki boşluğu doldurunuz</p>

<form name=”Form”>
İsim: <input name=”girilenIsim” ng-model=”girilenIsim” required>
<span style=’color:red’ ng-show=”Form.girilenIsim.$touched && Form.girilenIsim.$invalid”>İsim gereklidir !</span><br/><br/>
Email: <input type=”email” name=”girilenMail” ng-model=”girilenMail” required>
<span style=’color:red’ ng-show=”Form.girilenMail.$touched && Form.girilenMail.$invalid”>Lütfen geçerli bir e-mail giriniz!</span>
</form>

<p>Girilen değer uygun mu:</p>
<h3>Isim uygun mu ? : {{Form.girilenIsim.$valid}}</h3>
<h3>Mail uygun mu ? : {{Form.girilenMail.$valid}}</h3>

</body>
</html>


Not : AngularJS Validation konusunda detaylı bir yazıyı ilerleyen zamanlarda siz okurlarımızla paylaşacağız.

2.4 AngularJS API Fonksiyonları Kullanımı

Global olarak kullanılan bazı API fonksiyonları açıklamaları ile beraber aşağıda yer almaktadır. Bu fonksiyonlar ile Angular ile tanımladığımız objelere ulaşabilmekte ve bunların üzerinde işlem yapabilmekteyiz.

angular.lowercase() : Form veya label üzerinde tanımlanmış, metin karakterlerini küçük harfe çeviren Angular içerisinde hazır olarak bulunan API (Application Programming Interface) fonksiyonlarıdır. Böylece bu foksiyonlar başka bir yazılım kütüphanesinde veya o yazılım diliyle yazılmış uygulamalarda kullanılabilmekteyiz. Örnek olarak global API fonksiyonlarını, başka JavaScript kütüphanelerinde ya da JS kodları ile yazılmış web dosyalarında kullanabilirsiniz.


<div ng-app=”uyg” ng-controller=”kontrol”>
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module(‘uyg’, []);
app.controller(‘kontrol’, function($scope) {
$scope.x1 = “MUSTAFA”;
$scope.x2 = angular.lowercase($scope.x1);
});
</script>
angular.uppercase() : Yukarıda bahsettiğimiz fonksiyonun tersini yapan bu fonksiyonda içerisinde tanımlanan değere göre metinler bğyğk harfe dönüştürülür.

<div ng-app=”uyg” ng-controller=”kontrol”>
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module(‘uyg’, []);
app.controller(‘kontrol’, function($scope) {
$scope.x1 = “Kemal”;
$scope.x2 = angular.uppercase($scope.x1);
});
</script>
angular.isNumber() : Script etiketleri içerisinde tanımlanan ” $scope ” tanımlanması içerisinde tutulan değerlerin ” Number ” türünde olup olmadığı sonucunu mantıksal olarak değerlendiren (boolean olarak “TRUE” ve “FALSE” değeri döndüren) fonksiyondur.

<div ng-app=”uyg” ng-controller=”kontrol”>
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
<p>{{ x3 }}</p>
</div>

<script>
var app = angular.module(‘uyg’, []);
app.controller(‘kontrol’, function($scope) {
$scope.x1 = “Atatürk”;
$scope.x2 = angular.isNumber($scope.x1);
$scope.x2 = angular.isString($scope.x1);
});
</script>
angular.isString() : Yukarıda bahsettiğimiz fonksiyonun yaptığı işi metinsel karakterlerde gerçekleştiren global API fonksiyonumuzdur.

<div ng-app=”uyg” ng-controller=”kontrol”>
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module(‘uyg’, []);
app.controller(‘kontrol’, function($scope) {
$scope.x1 = “1881”;
$scope.x2 = angular.isString($scope.x1);
});
</script>


Kodların uygulamasını kendindene sitemizde bulabilirsiniz

Angular konusunda ilk yazımız burada son buluyor. Tüm konuları bir yazıda anlatmak yerine aşama aşama giderek bilgilerin pekişmesini istedim . Önümüzdeki yazıda örnek bir Angular uygulaması üzerinde bazı konu başlıklarına göz atacağız.