AngularJS Expressions nedir?
AngularJS Expressions nasıl kullanılır?
AngularJS Expressions ne işe yarar?
Toplam 1 cevap
AngularJS Expressions nedir?
AngularJS Expressions, genellikle {{ ifade }} işaretleri arasına yazılan ifadelerdir. Aynı zamanda AngularJS Expressions ng-bind="ifade" gibi direkliflerin içine de yazılabilir.
AngularJs bu ifadeleri çözümler ve sonucunu ekrana yazdırır veya işleme tabi tutar.
Örnek bir AngularJS ifadesi:
{{ 1 + 1 }}Bu işlemin sonucu olarak, ifadenin bulunduğu yere 2 yazdırılacaktır.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>İlk AngularJs ifadem : {{ 1 + 1 }}</p>
</div>
<div>
<p>Bu ifade çalışmaz : {{ 1 + 1 }}</p>
</div>
</body>
</html>Yukarıdaki örnekte ng-app sadece bir <div> etiketine uygulanmıştır. Bu sadece ng-app uygulanan alan içinde kalan bölümün AngularJS uygulaması olarak ele alınacağını ifade eder. İkinci <div> içindeki ifade aynen ekrana yazdırılacaktır.
ng-init yönergesi ile geçerli kapsamda ifadeler oluşturabilir, bunları sonradan çağırabilirsiniz. aşağıdaki örnekte renk adında bir değişken tanımlayıp buna değer atıyoruz. renk değişkeni daha sonra input için yazılmış CSS ifadesinde yerini alıyor.
AngularJs ile değişken tanımlama şu şekilde yapılabilir:
<div ng-app="" ng-init="renk='#ffcc44'">
<input style="background-color:{{renk}}" ng-model="renk" value="{{renk}}">
</div>AngularJS sayılar
AngularJs ile matematiksel operatörleri ifadeler içinde kullanabilirsiniz
<p>10 * 2 = {{ 10 * 2 }}</p>Bu işlem sonucunda ekrana 20 yazacaktır. Çarpma gibi, toplama, çıkartma, bölme işlemlerini de aynı şekilde yapabilirsiniz. Sayıların herhangi bir tırnak benzeri işaret içinde yazılmadığına dikkat edin.
AngularJS string işlemleri
AngularJS ifadesinde herhangi bir değer tırnak içinde yazılırsa bu string kabul edilir ve string birleştirme yapılır.
<p>
{{ '2000' + ' yıl' }}
</p>Bu ifade ekrana 2000 yıl yazdıracaktır. String işlemlerinde tek tırnak ya da çift tırnak kullanabilirsiniz.
AngularJS ile Object (nesne) tanımlama
AngularJS ile nesne tanımlamasını aşağıdaki gibi yapabilirsiniz. AngularJS'de nesneler Javascript'te olduğu gibi tanımlanır.
ng-init="web={ad:'uzmanim.net', uye:'alattin'} ifadesine web adında bir nesne ve bu nesneye ad,uye adında ait iki özellik tanımlanmıştır
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<div ng-app="" ng-init="web={ad:'uzmanim.net', uye:'alattin'}">
<!--her iki web <p> ifadesi de aynı veri bağlama işini yapar-->
<p ng-bind="web.ad"></p>
<p>{{web.uye}}</p>
</div>
</body>
</html>AngularJS ile Array (dizi) tanımlama
AngularJS ile Array (dizi) tanımlama aynen Javascript'te olduğu gibi tanımlanır.
<div ng-app="" ng-init="sayilar=[1,3,7,12,30]">
<p>Dizi içindeki 2 değer {{ sayilar[1] }}</p>
</div>Her dizide olduğu gibi saymaya 0'dan başlanır. yukarıdaki sonuç 3 olacaktır.