AngularJS İfadeleri: DİZİ, Nesneler, $ eval, Dizeler (Örnekler)

İçindekiler:

Anonim

Açısal JS İfadeleri nedir?

İfadeler, çift kaşlı ayraçlar {{}} içinde tanımlanan değişkenlerdir. Angular JS'de çok yaygın olarak kullanılırlar ve bunları önceki eğitimlerimizde görürsünüz.

Bu eğitimde öğreneceksiniz-

  • Angular.js İfadelerini örnekle açıklayın
  • AngularJS Numaraları
  • AngularJS Dizeleri
  • AngularJS Nesneleri
  • AngularJS Dizileri
  • AngularJS İfade yetenekleri ve Sınırlamaları
  • İfadeler ve $ eval arasındaki fark

Angular.js İfadelerini bir örnekle açıklayın

AngularJS ifadeleri, çift kaşlı ayraçlar {{ifade}} içinde yazılanlardır.

Sözdizimi:

İfadenin basit bir örneği {{5 + 6}}.

Angular.JS ifadeleri, verileri HTML'ye ng-bind yönergesi ile aynı şekilde bağlamak için kullanılır. AngularJS, verileri tam olarak ifadenin yerleştirildiği yerde görüntüler.

Angular.JS ifadelerinin bir örneğine bakalım.

Bu örnekte, ifade olarak basit bir sayı toplamasını göstermek istiyoruz.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Kod Açıklaması:

  1. Örneğimizdeki ng-app yönergesi, yukarıdaki ekran görüntüsünde gösterildiği gibi boştur. Bu yalnızca, koda eklenmiş denetleyicileri, yönergeleri ve hizmetleri atayacak bir modül olmadığı anlamına gelir.
  2. 2 sayının toplamına bakan basit bir ifade ekliyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan

  • 9 ve 6 sayılarının eklenmesinin gerçekleştiği ve 15'in katma değerinin görüntülendiği görülmektedir.

Angular.JS Numaraları

İfadeler sayılarla çalışmak için de kullanılabilir. Sayılarla Angular.JS ifadelerinin bir örneğine bakalım.

Bu örnekte, marj ve kar adı verilen 2 sayı değişkeninin basit bir çarpımını ve çarpılan değerlerini göstermek istiyoruz.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Kod Açıklaması:

  1. Ng-init yönergesi, görünümün kendisinde değişkenleri ve bunlara karşılık gelen değerleri tanımlamak için angular.js'de kullanılır. Bu, herhangi bir programlama dilinde kodlamak için yerel değişkenleri tanımlamaya benzer. Bu durumda marj ve kar olarak adlandırılan 2 değişken tanımlıyor ve bunlara değer atıyoruz.
  2. Daha sonra 2 yerel değişkeni kullanıp değerlerini çarpıyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan

  • 2 ve 200 sayılarının çarpımının gerçekleştiği ve 400'ün çarpılan değerinin görüntülendiği açıkça görülmektedir.

AngularJS Dizeleri

İfadeler dizelerle çalışmak için de kullanılabilir. Dizelerle birlikte bir Angular JS ifadesi örneğine bakalım.

Bu örnekte, "firstName" ve "lastName" olmak üzere 2 dizge tanımlayacağız ve bunları uygun şekilde ifadeler kullanarak görüntüleyeceğiz.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Kod Açıklaması:

  1. Ng-init yönergesi, firstName değişkenlerini "Guru" değeriyle ve lastName değişkenini "99" değeriyle tanımlar.
  2. Daha sonra bu değişkenlerin değerine erişmek ve bunları uygun şekilde görünümde görüntülemek için {{firstName}} ve {{lastName}} ifadelerini kullanıyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan, ekranda firstName ve lastName değerlerinin görüntülendiği açıkça görülebilir.

Angular.JS Nesneleri

İfadeler, JavaScript nesneleriyle de çalışmak için kullanılabilir.

JavaScript nesneleriyle Angular.JS ifadelerinin bir örneğine bakalım. Bir javascript nesnesi, bir ad-değer çiftinden oluşur.

Aşağıda bir javascript nesnesinin söz dizimine bir örnek verilmiştir.

Sözdizimi:

var car = {type:"Ford", model:"Explorer", color:"White"};

Bu örnekte, bir nesneyi "firstName" ve "lastName" olmak üzere 2 anahtar değer çiftine sahip bir kişi nesnesi olarak tanımlayacağız.

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Kod Açıklaması:

  1. Ng-init yönergesi, "Guru" değerine sahip firstName anahtar değer çiftlerine ve "99" değerine sahip lastName değişkenine sahip olan nesne kişisini tanımlamak için kullanılır.
  2. Daha sonra bu değişkenlerin değerine erişmek ve bunları uygun şekilde görünümde görüntülemek için {{person.firstName}} ve {{person.secondName}} ifadelerini kullanıyoruz. Asıl üye değişkenler nesne kişisinin bir parçası olduğundan, gerçek değerlerine erişmek için buna nokta (.) Gösterimi ile erişmeleri gerekir.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan

  • "FirstName" ve "secondName" değerlerinin ekranda görüntülendiği açıkça görülmektedir.

AngularJS Dizileri

İfadeler, dizilerle çalışmak için de kullanılabilir. Diziler içeren bir Angular JS ifadesi örneğine bakalım.

Bu örnekte, bir öğrencinin notlarını 3 konuda tutacak bir dizi tanımlayacağız. Görünümde, bu işaretlerin değerini buna göre göstereceğiz.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Kod Açıklaması:

  1. Ng-init yönergesi, diziyi 1, 15 ve 19 olmak üzere 3 değerle "işaret" adıyla tanımlamak için kullanılır.
  2. Daha sonra dizinin her bir öğesine erişmek için işaret ifadelerini [indeks] kullanıyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan, görüntülenen işaretlerin dizide tanımlandığı açıkça görülebilir.

AngularJS İfade yetenekleri ve Sınırlamaları

Angular.JS İfade yetenekleri

  1. Açısal ifadeler JavaScript ifadeleri gibidir. Dolayısıyla aynı güç ve esnekliğe sahiptir.
  2. JavaScript'te, tanımsız özellikleri değerlendirmeye çalıştığınızda, bir ReferenceError veya TypeError oluşturur. Angular'da ifade değerlendirmesi bağışlayıcıdır ve tanımsız veya boş oluşturur.
  3. Verileri görüntülemeden önce formatlamak için ifadeler içinde filtreler kullanılabilir.

Açısal JS İfade sınırlamaları

  1. Şu anda bir Angular ifadede koşul, döngü veya istisnaları kullanmak için kullanılabilirlik yok
  2. İşlevleri, ng-init yönergesi içinde bile bir Angular ifadede bildiremezsiniz.
  3. Angular ifadede düzenli ifadeler yaratılamaz. Normal ifade,. * \. Txt $ gibi dizeleri bulmak için kullanılan semboller ve karakterlerin birleşimidir. Bu tür ifadeler, Angular JS ifadelerinde kullanılamaz.
  4. Ayrıca, bir Angular ifade kullanılamaz veya geçersiz kılınamaz.

İfade ve $ eval arasındaki fark

$ Eval işlevi, denetleyicinin kendi içinden ifadelerin değerlendirilmesine izin verir. Dolayısıyla, görünümde değerlendirme için ifadeler kullanılırken, denetleyici işlevinde $ eval kullanılır.

Bununla ilgili basit bir örneğe bakalım.

Bu örnekte,

$ Eval işlevini 2 sayı eklemek ve görünümde gösterilebilmesi için kapsam nesnesinde kullanılabilir hale getirmek için kullanacağız.

Event Registration


Guru99 Global Event

{{value}}

Kod Açıklaması:

  1. Önce, her biri 1 değerine sahip 2 değişken 'a' ve 'b' tanımlıyoruz.
  2. 2 değişkenin eklenmesini değerlendirmek ve onu kapsam değişkenine 'değer' atamak için $ kapsam. $ Eval işlevini kullanıyoruz.
  3. Ardından, görünümde sadece 'değer' değişkeninin değerini görüntülüyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Yukarıdaki çıktı, kontrolörde değerlendirilen ifadenin çıktısını gösterir. Yukarıdaki sonuçlar, $ eval ifadesinin 2 kapsam değişkeninin 'a ve b' eklenmesini gerçekleştirmek için kullanıldığını ve sonuçların görünümde gönderilip görüntülendiğini göstermektedir.

Özet:

  • Angular JS'deki ifadelerin, sayıların basitçe eklenmesi gibi normal JavaScript benzeri ifadeleri değerlendirmek için nasıl kullanılabileceğini gördük.
  • Ng-init yönergesi, görünümde kullanılabilen değişkenleri satır içi olarak tanımlamak için kullanılabilir.
  • İfadeler, dizeler ve sayılar gibi ilkel türlerle çalışacak şekilde yapılabilir.
  • İfadeler, JavaScript nesneleri ve dizileri gibi diğer türlerle çalışmak için de kullanılabilir.
  • Angular JS'deki ifadeler, örneğin normal ifadelere sahip olmama veya işlevler, döngüler veya koşullu ifadeler kullanmama gibi birkaç sınırlamaya sahiptir.