AngularJS İfadeleri: Diziler, Nesneler, $eval, Dizeler

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

AngularJS ifadeleri, verileri doğrudan bir şablona bağlayan, çift parantez içine yerleştirilmiş kod parçalarıdır. Sayıları, dizeleri, nesneleri ve dizileri değerlendirirler ve `$eval` fonksiyonu, denetleyici içinden aynı değerlendirmeyi gerçekleştirir.

  • 🧩 Bağlama Sözdizimi: Double Süslü parantezler, ifadenin bulunduğu yere bir değer yerleştirerek ng-bind yönergesiyle aynı sonucu verir.
  • 🔢 Desteklenen Türler: Numbers, teller, JavaNokta gösterimiyle erişilen komut dosyası nesneleri ve dizinle erişilen diziler doğru şekilde değerlendirilir.
  • ???? ️ Satır İçi Değişkenler: `ng-init` yönergesi, ifadelerin denetleyiciye ihtiyaç duymadan okuyabileceği görünüm düzeyinde değişkenler tanımlar.
  • 🛡️ Bağışlayıcı Değerlendirme: Tanımlanmamış özellikler ReferenceError hatası fırlatmak yerine undefined değeri döndürür. JavaKomut dosyası hata verecektir.
  • ???? Sert Sınırlar: Döngüler, istisnalar, fonksiyon bildirimleri, düzenli ifadeler ve virgül ile void operatörleri kullanılamaz.
  • ⚙️ Kontrol Cihazı Değerlendirmesi: `$scope.$eval`, denetleyici kodunda bir ifade dizesini değerlendirir ve sonucu görünüme sunar.
  • ⚠️ Destek Durumu: AngularJS'in kullanım ömrü 31 Aralık 2021'de sona erdi ve artık güvenlik yamaları almıyor.
Devamını Oku

AngularJS İfadeleri

AngularJS ifadeleri nedir?

İfadeler, çift parantez içine yazılmış değişkenlerdir. {{ }}Bunlar AngularJS içinde çok yaygın olarak kullanılır ve bu serinin önceki eğitimlerinde de yer alırlar.

⚠️ Destek bildirimi: AngularJS'ye ulaşıldı 31 Aralık 2021 tarihinde yaşamının sonuna ulaştı. ve daha fazla yama veya güvenlik düzeltmesi almaz. Aşağıdaki sözdizimi, mevcut AngularJS 1.x uygulamalarının bakımı için geçerlidir; yeni projeler modern sözdizimini kullanmalıdır. AçısalBurada enterpolasyon parantezleri hala mevcut, ancak ng-init hem de $eval yapma.

AngularJS ifadelerini bir örnekle açıklayın.

AngularJS ifadeleri, aşağıdaki gibi çift parantez içine yazılır. {{expression}}.

Sözdizimi: Basit bir ifade örneği şöyledir: {{5 + 6}}.

AngularJS ifadeleri, ng-bind yönergesiyle aynı şekilde verileri HTML'ye bağlar ve AngularJS, verileri tam olarak ifadenin yerleştirildiği yerde görüntüler.

Bu örnekte, sayıların basit bir toplama işlemini ifade olarak gösteriyoruz.

AngularJS İfadeleri

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Açıklama:

  1. ng-app yönergesi boştur, bu da hiçbir modülün denetleyici sağlamadığı anlamına gelir. direktiflerveya bu sayfaya yönelik hizmetler.
  2. Basit bir ifade iki sayıyı toplar.

Çıktı:

AngularJS İfadeleri

9 ve 6'nın toplanması işlemi yapılır ve sonuç olarak 15 görüntülenir.

angularjs Numbers

İfadeler sayılarla çalışır. Bu örnekte iki sayı değişkeni çarpılır. margin hem de profitve ürünü sergiliyor.

angularjs Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code Açıklama:

  1. `ng-init` yönergesi, herhangi bir kütüphanedeki yerel değişkenlere çok benzer şekilde, görünümün kendisinde değişkenleri ve değerlerini tanımlar. Programlama dili. İşte margin hem de profit beyan edilir ve atanır.
  2. Bu ifade daha sonra bu iki yerel değişkeni çarpar.

Çıktı:

angularjs Numbers

2 ile 200'ün çarpımı yapılır ve sonuç 400 olarak görüntülenir.

AngularJS Dizeleri

İfadeler dizelerle de çalışır. Bu örnek şunu tanımlar: firstName hem de lastName ve her ikisini de gösterir.

AngularJS Dizeleri

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code Açıklama:

  1. ng-init yönergesi tanımlar firstName değeriyle birlikteGuru" ve lastName "99" değeriyle.
  2. İfadeler {{firstName}} hem de {{lastName}} Bu değişkenleri okuyun ve görünümde görüntüleyin.

Çıktı:

AngularJS Dizeleri

Her iki değer de ekranda görünür.

İLGİLİ MAKALELER

AngularJS Nesneleri

İfadeler şunlarla çalışır: JavaSenaryo İsim-değer çiftlerinden oluşan nesneler. Bir nesnenin sözdizimi şu şekildedir: JavaKomut dosyası nesnesi şu şekilde görünür:

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

Bu örnek bir person İki anahtar-değer çifti içeren nesne, firstName hem de lastName.

AngularJS Nesneleri

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code Açıklama:

  1. `ng-init` yönergesi nesneyi tanımlar. person anahtar-değer çiftleriyle firstName ayarlanır "Guru" ve lastName “99” olarak ayarlayın.
  2. İfadeler {{person.firstName}} hem de {{person.lastName}} Bu üyeleri okuyun. Nesneye ait oldukları için değerlerine ulaşmak için nokta gösterimi gereklidir.

Çıktı:

AngularJS Nesneleri

Değerleri firstName hem de lastName ekranda görünür.

AngularJS Dizileri

İfadeler dizilerle çalışır. Bu örnek, bir öğrencinin üç dersteki notlarını tutan bir dizi tanımlar ve her bir değeri görüntüler.

AngularJS Dizileri

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code Açıklama:

  1. `ng-init` yönergesi diziyi tanımlar. marks 1, 15 ve 19 olmak üzere üç değerle.
  2. Bu biçimdeki ifadeler marks[index] Her bir öğeyi okuyun.

Çıktı:

AngularJS Dizileri

Dizide tanımlanan işaretler görüntülenir.

AngularJS İfade yetenekleri ve Sınırlamalar

Uygulama Alanı

  1. AngularJS ifadeleri şuna benzer: JavaKomut dosyası ifadeleri de büyük ölçüde aynı güç ve esnekliği paylaşır.
  2. Dönüşümün JavaKomut dosyası tanımlanmamış bir özellik üzerinde ReferenceError veya TypeError hatası verirse, AngularJS değerlendirmesi bunu hoşgörüyle karşılar ve tanımsız veya null değer döndürür.
  3. Veriler görüntülenmeden önce biçimlendirilmesi için ifadelerin içine filtreler uygulanabilir.
  4. Üçlü operatör desteklenmektedir, dolayısıyla {{ isReady ? 'Yes' : 'No' }} geçerli.

Sınırlamalar

  1. AngularJS ifadelerinde döngüler ve istisna işleme kullanılamaz. Koşullu mantık yalnızca üçlü operatörle sınırlıdır; if Açıklamalar mevcut değil.
  2. Fonksiyonlar, ng-init yönergesi içinde bile olsa, bir ifade içinde tanımlanamaz.
  3. Normal ifadeler, bir ifade içinde oluşturulamaz. Normal ifade, dizeleri eşleştirmek için kullanılan semboller ve karakterlerin birleşimidir, örneğin: .*\.txt$ve bu tür değişmez ifadeler reddedilir.
  4. Virgül operatörü (,) Ve void Operatörlere izin verilmemektedir.

ng-bind mi yoksa ifade parantezleri mi kullanılmalı: Hangisi tercih edilmeli?

Double Parantezler ve `ng-bind` yönergesi aynı işlenmiş çıktıyı ürettiğinden, aralarındaki seçim keyfi gibi görünüyor. Ancak öyle değil. İkisi de AngularJS'nin yüklenmesi tamamlanmadan önceki anlarda farklı davranır ve bu fark sayfayı kullanan kişi tarafından görülebilir.

Görünüş {{ expression }} ng-bağlantısı
Yazılmış Öğe içeriği Bir öğe özniteliği
AngularJS yüklenmeden önce Ekranda ham diş telleri beliriyor. Hiçbir şey gösterilmiyor
okunabilirlik Daha yüksek — değer aynı hizada yer alıyor. Daha düşük değer bir öznitelikte gizlidir.
Her öğe için birden fazla değer Evet Hayır, sadece bir bağlama.
Tek seferlik bağlayıcılık Evet, ile {{::value}} Evet, ile ng-bind="::value"

Kısa süreliğine görünen ham parantezler, enterpolasyon yapılmamış içeriğin anlık görüntüsü olarak bilinir ve bunun nedeni tarayıcının, AngularJS derlemeden önce işaretlemeyi işlemesidir. Sayfanın üst kısmında görünen içerik için ng-bind kullanın veya ng-cloak yönergesini ekleyin. Parantezler, özellikle bir öğe içinde birden fazla değerin göründüğü her yerde daha net ve okunabilir bir seçenektir.

İfade ve $eval arasındaki fark

MKS $eval Bu fonksiyon, denetleyici içinden ifadeleri değerlendirir. İfadeler görünümde değerlendirilirken, $eval Denetleyici kodunda değerlendirilir.

Bu örnek kullanır $eval İki sayıyı toplamak ve sonucu görünümde görüntülenebilmesi için kapsam nesnesine yerleştirmek.

İfade ve $eval arasındaki fark

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code Açıklama:

  1. İki kapsam değişkeni, a hem de bHer birinin değeri 1'dir.
  2. $scope.$eval Bunların toplamını değerlendirir ve sonucu kapsam değişkenine atar. value.
  3. Ardından görünüm görüntülenir. value.

Çıktı:

İfade ve $eval arasındaki fark

Çıktı, içeride değerlendirilen ifadeyi gösterir. kontrolörGönderilen ve görünümde görüntülenen iki kapsam değişkeninin toplamı ile birlikte.

SSS

Bir ifadenin başına iki nokta üst üste koymak, örneğin: {{::name}}Bir değer çözümlendiğinde izlemeyi durdurur. Bu, izleyiciyi kaldırır ve çok sayıda statik bağlamaya sahip sayfalarda özetleme maliyetini düşürür.

$eval bir dizeyi anında bir şeye karşı değerlendirir. kapsam. $parse Tekrarlanan değerlendirme için yeniden kullanılabilir bir fonksiyon döndürür. $interpolate Tek bir ifade yerine, süslü parantezler içeren şablon dizisinin tamamını işler.

Çoğunlukla. AI Araçlar parantezleri korur ve filtreleri boru (pipe) olarak yeniden yazar, ancak ng-init değişkenlerinin Angular'da karşılığı yoktur ve elle bir bileşen sınıfına taşınmaları gerekir.

Yapay zeka araçları, her özetleme döngüsünde yeniden çalışan bağlamalar içindeki işlev çağrıları için şablonları tarar ve sonucu kapsam içinde önbelleğe almayı veya tek seferlik bir bağlamaya geçmeyi önerir.

AngularJS değerlendirmesi kasıtlı olarak hoşgörülüdür. Eksik bir özellik tanımsız (undefined) değer döndürür ve bu da boş bir dize olarak görüntülenir; bu nedenle boş bir değer genellikle çalışma zamanı hatasından ziyade özellik yolunda bir yazım hatası anlamına gelir.

Bu yazıyı şu şekilde özetleyin: