AngularJS Expressions (ifadeler) nedir?

0

AngularJS Expressions nedir?

AngularJS Expressions nasıl kullanılır?

AngularJS Expressions ne işe yarar?

alattin alattin (13289)
3 yıl önce sordu

Toplam 1 Cevap


1

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.

Kodun nasıl çalıştığını gö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.

 

alattin alattin (13289)
3 yıl önce cevaplandı

üyelik gerektirir

Cevap yazabilmek için üye girişi yapmalısınız.

Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol