AngularJS İfadeleri: ARRAY, Objects, $eval, Strings [Örnekler]
James Hartman
Angular JS İfadeleri Nedir?
İfadeler, çift parantez {{ }} içinde tanımlanan değişkenlerdir. Bunlar Angular JS'de çok yaygın olarak kullanılır ve bunları önceki eğitimlerimizde görecektiniz.
Angular.js İfadelerini bir örnekle açıklayın
AngularJS ifadeleri çift parantez {{expression}} içerisinde yazılan ifadelerdir.
Sözdizimi:
Basit bir ifade örneği {{5 + 6}}'tır.
Angular.JS ifadeleri, verileri HTML'ye ng-bind direktifiyle 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, sayıların basit bir toplamını ifade olarak göstermek istiyoruz.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Kod Açıklaması:
- Örneğimizdeki ng-app yönergesi yukarıdaki ekran görüntüsünde gösterildiği gibi boştur. Bu yalnızca denetleyicileri atayacak bir modülün olmadığı anlamına gelir. direktifler, koda eklenen hizmetler.
- 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 rakamlarının toplamının gerçekleştiği ve 15'in katma değerinin görüntülendiği görülmektedir.
Açısal.JS Numbers
İfadeler sayılarla çalışmak için de kullanılabilir. Sayılarla Angular.JS ifadelerinin bir örneğine bakalım.
Bu örnekte sadece marj ve kâr adı verilen 2 sayı değişkeninin basit çarpımını göstermek ve bunların çarpım değerini görüntülemek istiyoruz.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Kod Açıklaması:
- Ng-init yönergesi, angular.js'de değişkenleri ve görünümün kendisindeki karşılık gelen değerlerini tanımlamak için kullanılır. Bu, herhangi bir durumda kodlamak için yerel değişkenleri tanımlamaya benzer. Programlama dili. Bu durumda marj ve kâr adı verilen 2 değişken tanımlıyor ve onlara değer atamaktayız.
- Daha sonra 2 yerel değişkeni kullanıyoruz ve 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 2 sayılarının çarpımının gerçekleştiği ve 200'ü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 Angular JS ifadelerinin bir örneğine bakalım.
Bu örnekte “firstName” ve “lastName” şeklinde 2 adet string tanımlayacağız ve bunları buna göre ifadeler kullanarak görüntüleyeceğiz.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Kod Açıklaması:
- Ng-init direktifi, FirstName değişkenlerini “Guru” değeriyle ve lastName değişkenini “99” değeriyle tanımlamak için kullanılır.
- Daha sonra bu değişkenlerin değerine erişmek ve bunları görünümde buna göre 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 name ve lastName değerlerinin görüntülendiği açıkça görülmektedir.
Angular.JS Nesneleri
İfadeler çalışmak için kullanılabilir JavaSenaryo nesneler de.
Javascript nesneleri ile 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özdiziminin bir örneği 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 olacak bir kişi nesnesi olarak tanımlayacağız.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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>
Kod Açıklaması:
- Ng-init yönergesi, "Guru" değerine sahip FirstName anahtar değer çiftlerine ve "99" değerine sahip lastName değişkenine sahip olan kişi nesnesini tanımlamak için kullanılır.
- Daha sonra bu değişkenlerin değerine erişmek ve bunları görünümde buna göre görüntülemek için {{person.firstName}} ve {{person.secondName}} ifadelerini kullanıyoruz. Gerçek üye değişkenler nesnenin bir parçası olduğundan, gerçek değerlerine erişmek için ona nokta (.) gösterimiyle 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,
- Ekranda “firstName” ve “secondName” değerlerinin görüntülendiği açıkça görülmektedir.
AngularJS Dizileri
İfadeler dizilerle çalışmak için de kullanılabilir. Dizilerle Angular JS ifadelerinin bir örneğine bakalım.
Bu örnekte bir öğrencinin 3 dersteki notlarını tutacak bir dizi tanımlayacağız. Görünümde bu işaretlerin değerini buna göre göstereceğiz.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/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] }}<br>
</div>
</body>
</html>
Kod Açıklaması:
- Ng-init direktifi “marks” isimli diziyi 3, 1 ve 15 olmak üzere 19 değerle tanımlamak için kullanılır.
- Daha sonra dizinin her bir öğesine erişmek için işaretlerin [index] 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, dizide tanımlanan işaretlerin görüntülendiği açıkça görülmektedir.
AngularJS İfade yetenekleri ve Sınırlamalar
Angular.JS İfade yetenekleri
- Açısal ifadeler şöyledir JavaScript ifadeleri. Dolayısıyla aynı güce ve esnekliğe sahiptir.
- In JavaScript, tanımsız özellikleri değerlendirmeye çalıştığınızda bir ReferenceError veya TypeError üretir. Angular'da ifade değerlendirmesi affedicidir ve tanımsız veya null üretir.
- Verileri görüntülemeden önce biçimlendirmek için ifadelerin içindeki filtreler kullanılabilir.
Angular JS İfadesi sınırlamaları
- Şu anda Angular ifadesinde koşullu ifadelerin, döngülerin veya istisnaların kullanılması mümkün değildir
- Bir Angular ifadesinde işlevleri, ng-init yönergesinin içinde bile bildiremezsiniz.
- Angular ifadede normal ifadeler oluşturulamaz. Normal ifade, .*\.txt$ gibi dizeleri bulmak için kullanılan sembol ve karakterlerin birleşimidir. Bu tür ifadeler Angular JS ifadelerinde kullanılamaz.
- Ayrıca, Angular ifadesinde kimse kullanılamaz veya geçersiz kılınamaz.
İfade ve $eval arasındaki fark
$eval işlevi, ifadelerin denetleyicinin kendisinden değerlendirilmesine olanak tanır. Yani görünümde değerlendirme için ifadeler kullanılırken, denetleyici işlevinde $eval kullanılır.
Bu konuda basit bir örneğe bakalım.
Bu örnekte,
Görünümde gösterilebilmesi için 2 sayı eklemek ve kapsam nesnesinde kullanılabilir hale getirmek için $eval işlevini kullanacağız.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>
Kod Açıklaması:
- İlk önce her biri 2 değerini tutan 1 'a' ve 'b' değişkenini tanımlıyoruz.
- 2 değişkenin toplamını değerlendirmek ve bunu 'value' kapsam değişkenine atamak için $scope.$eval fonksiyonunu kullanıyoruz.
- Daha sonra görünümde sadece 'value' 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ı, değerlendirilen ifadenin çıktısını gösterir. kontrolör. Yukarıdaki sonuçlar, $eval ifadesinin, 2 kapsam değişkeni 'a ve b'nin eklenmesini gerçekleştirmek için kullanıldığını ve sonucun görünümde gönderildiğini ve görüntülendiğini göstermektedir.
ÖZET
- ifadelerinin nasıl olduğunu gördük. Açısal JS düzenli olarak değerlendirmek için kullanılabilir JavaBasit sayı toplama işlemi gibi betik benzeri ifadeler.
- Görünümde kullanılabilecek değişkenleri satır içi tanımlamak için ng-init yönergesi kullanılabilir.
- Dizeler ve sayılar gibi ilkel türlerle çalışacak şekilde ifadeler yapılabilir.
- İfadeler ayrıca aşağıdaki gibi diğer türlerle çalışmak için de kullanılabilir: JavaKomut dosyası nesneleri ve dizileri.
- Angular JS'deki ifadelerin, örneğin düzenli ifadelere sahip olmamak veya işlevler, döngüler veya koşullu ifadeler kullanmamak gibi birkaç sınırlaması vardır.
