-
Notifications
You must be signed in to change notification settings - Fork 0
/
6.Lesson_ng-style_ng-show_ng-hide_ng-if_timeout.html
181 lines (117 loc) · 5.74 KB
/
6.Lesson_ng-style_ng-show_ng-hide_ng-if_timeout.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6.Lesson_ng-style_ng-show_ng-hide_ng-if</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script>
//timeout fonksiyonunu kullanabilmek için $timeout kullanılmalıdır.
//interval fonksiyonunu kullanabilmek için $interval kullanılmalıdır.
var ControllerExample = angular.module("myapp", []);
ControllerExample.controller("mycontrol", function ($scope, $timeout, $interval) {
//startNumber adında başlangıç bir değer oluşturuldu ve 0 değeri atandı
$scope.startNumber = 0;
//durum ifadesine default olarak false değeri verildi.
$scope.durum = false;
//hideShowFunction adında fonksiyon tanımlandı
$scope.hideShowFunction = function () {
//$scope.durum alanının içine tam tersi değeri atandı
$scope.durum = !$scope.durum;
//$scope.durum alanı console loglarında bilgilendirme amacıyla gösterildi
console.log("Durum Değeri: " + $scope.durum);
console.log(`Durum Değeri: ${$scope.durum}`)
}
//textField adında alan oluşturularak metin atandı
$scope.textField = "Bu yazı 2 saniye içinde değişecektir!";
//timeout fonksiyonu tanımlandı, değer değiştirildi ve süresi girildi
$timeout(function () {
$scope.textField = "Yazı 2 saniye sonra değişti!";
}, 2000);
//theTime adında değer oluşturularak toLocaleTimeString() değeri atandı
$scope.theTime = new Date().toLocaleTimeString();
//interval fonksiyonu tanımlandı, değer değiştirildi ve süresi girildi
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
<style>
/* class style biçimlendirmesi yapıldı */
.myclass {
width: 53px;
height: 50px;
}
</style>
</head>
<!--
♦ ng-style = "" : JSON formatında stil düzenlemeleri yapmaktadır. Bu yöntem html öğesine koşullu bir style tanımlamanızı sağlar.
SYNTAX: <element ng-style="expression"></element>
♦ ng-show = "" : ve ♦ ng-hide = "" : direktifleri HTML elementlerinin görüntülenip gizlenmesini kontrol etmek için kullanılır.
SYNTAX: <element ng-show="expression"></element>
SYNTAX: <element ng-hide="expression"></element>
♦ ng-if = "" : Öğeye verilen şart sağlanmassa öğeyi gizlemek yerine DOM yapısından tamamen kaldırır. Şart sağlanırsa yeniden eklenir.
SYNTAX: <element ng-if="expression"></element>
NOT: startNumber == 5 && ifadesiyle startNumber değişkenin 5 olması durumunda bu style dosyasını aktif yapacaktır.
♦ $timeout : Durumlara göre yapılacak işlemlerin veya çalıştırılacak fonksiyonların ertelenmesi sureti ile bir bakıma uygulamada zaman yönetimi sağlayan servisdir.
SYNTAX: $timeout([fn], [delay], [invokeApply], [Pass]);
♦ $interval : Yapılacak işlem veya çalıştırılacak fonksiyon verilen süreye göre sürekli devam etmektedir.
SYNTAX: $interval(fn, delay, [count], [invokeApply], [Pass]);
-->
<body ng-app="myapp" ng-controller="mycontrol">
<!-- ng-style = "" ile stil biçimlendirmesi bir koşula bağlandı -->
<div ng-style=" startNumber == 5 &&
{
'color':'White',
'background':'red',
'font-weight':'bold',
'padding':'5px',
'font-size':'50px',
'font-family': 'Verdana'
}" class="myclass">{{startNumber}}</div>
<br>
<!-- Butonların ng-click direktifinde sayı arttırma ve azaltma kodu yazıldı -->
<button ng-click="startNumber = startNumber + 1">+1</button>
<button ng-click="startNumber = startNumber - 1">-1</button>
<br>
<br>
<!-- HTML elemenleri ng-show ve ng-hide ile ekranda gösterilip, gösterilmemesi sağlanır veya şarta bağlanabilmektedir -->
<div ng-show="false">Bu bir yazı örneğidir!</div>
<div ng-hide="true">Bu bir yazı örneğidir!</div>
<!-- Controller alanında tanımlanmış bir ifadeye görede koşullar koyulabilmtekdir -->
<div ng-show="startNumber==10">Maksimum Sayıya ulaşıldı</div>
<br>
<br>
<hr>
<br>
<br>
<!-- Butonun ng-click direktifine Controller alanında tanımalanan fonksiyon gönderildi -->
<button ng-click="hideShowFunction()">
<span ng-show="!durum">Göster</span>
<span ng-show="durum">Gizle</span>
</button> --> {{durum}}
<div ng-show="durum">Bu gizlenebilen yazı örneğidir!</div>
<!--
ng-show ve ng-hide ile display:none üzerinde görüntüleme işleri yaparken,
ng-if ise kod üzerinde işlemler yapılmaktadır. (kodu kaldırmaktadır)
-->
<div ng-if="durum">Bu gizlenebilen yazı örneğidir!</div>
<br>
<br>
<hr>
<br>
<br>
<!-- textField değeri ng-bind ile p elementinde gösterildi -->
<p ng-bind="textField"></p>
<!-- theTime değeri ng-bind ile p elementinde gösterildi -->
<p ng-bind="theTime"></p>
<br>
<br>
<hr>
<br>
<br>
<!-- Extra: ng-copy: kopyalama işlemi gerçekleştiğinde çalışmaktadır -->
<input type="text" ng-copy="copy = true" ng-model="test">
<div ng-if="copy">Kopyalandı</div>
</body>
</html>