4 - helloAngular3.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app = "">
Sınavdaki doğru sayısı : <input type="text" ng-model="dogru" placeholder="Dogru cevap sayınızı giriniz"/> <br>
Sınavdaki yanlış sayısı : <input type="text" ng-model="yanlis" placeholder="Yanlış cevap sayınızı giriniz"/> <br>
Net sayısı : {{ dogru - (yanlis/4) }}
</body>
</html>
Açıklama:
<body ng-app = ""> diyerek, body element'inin içerisinde angular programının çalışacağını söylüyoruz. ng-app 'ın ismini boş bırakabiliriz, bu örnekte boş bıraktık.
<input type="text" ng-model="dogru" placeholder="Dogru cevap sayınızı giriniz"/> diyerek, kullanıcının text girebileceği bir input box gösteriyoruz. Kullanıcının bu input box'a gireceği değeri tutan variable ismi yanlis'dir, yani input box'ın variable'ı yanlis'dir gibi düşünebiliriz, biz bu alana ömer yazarsak, var yanlis='ömer' demiş gibi oluruz. yanlis isimli variable'ın değerini yani input box'a girilen değeri ekrana yazdırmak için süslü parantezler yani expression içerisinde hesaplama yapılır, hesaplama sonucu ekrana yazdırılır. Bu örnekte, kullanıcının input box'a girdiği değer expression'a bind edilmiştir, yani bağlanmıştır, input box'a girilen değer dynamic olarak ekranda gösterilir.
5 - helloAngular4.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World, AngularJS</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app = "" ng-init="var1='Omer';var2='Osman';var3='Harun'">
<p ng-bind ="var1"> </p>
<p ng-bind ="var2"> </p>
<p ng-bind ="var3"> </p>
<input type="text" ng-value = "var3">
</body>
</html>
Bu örnekte 3 tane variable tanımlayıp initialize ettik. Bu variable'ları aşağıda p element'lerine bind ettik. p element'lerinde bu variable'ların değerleri gösterilir ekranda. Bu variable'ların değerleri kod içerisinde dynamic olarak değişirse, p element'leri bu variable'ların güncel değerlerini ekranda gösterir.
Soru : input type="text" ng-value = "var3"> ve <input type="text" placeholder="test"/> arasındaki fark?
No comments:
Post a Comment