Angularjs Dersleri - #9 $watch Nedir ? Foreach Kullanımı

angularjsyoutube

2 yıl önce 0 yorum

Merhabalar, bugün anlatacağım konular:

  1. $watch kullanımı
  2. angular.forEach kullanımı
  3. string değere göre morse alfabesine çeviren uygulama

1.

$watch scope ile belirlediğimiz değişkenlerin hareketlerini yakalamızı sağlar. Bir input'un değişikliklerini bu komutla yakalayabilirsiniz. Örnek ile gösterecek olursak.

<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	<script>
		var Proje = angular.module('test', [])
		.controller('TestCtrl', function ($scope) {
			$scope.data = "";
			$scope.$watch("data", function(news, old) { // data değişkeni izlensin
				console.log(old + ":" + news); // her değişiklikte bu çalışsın
			});
		});
	</script>
</head>
<body ng-controller="TestCtrl">
	<input type="text" ng-model="data"/>
</body>
</html>

Orada belirttiğim news ve old şöyle; değişiklikten önceki old değişkeninde, şu anki hali ise news değişkeninde tutuluyor. 

2. 3. 

Uygulamamız gayet basit bir textarea içine girilen değerleri $watch ile yakalayıp ona göre işlem yapacağız. İlk önce içine girdiğimiz string değeri morse koduna çeviren service 'i yazalım. service/MorseService.js dosyama şu komutları yazıyorum

Proje.service('MorseService', function () {
	return {
		strToMorse: function(str) {
			switch (str) {
				case "a":
				case "A":
					return ".–";
				case "b":
				case "B": 
					return "–...";
				case "c":
				case "C": 
					return "–.–.";
				case "d":
				case "D": 
					return "–..";
				case "e":
				case "E": 
					return ".";
				case "f":
				case "F": 
					return "..–.";
				case "g":
				case "G": 
					return "––.";
				case "h":
				case "H": 
					return "....";
				case "i":
				case "I": 
					return "..";
				case "j":
				case "J": 
					return ".–––";
				case "k":
				case "K": 
					return "–.–";
				case "l":
				case "L": 
					return ".–..";
				case "m":
				case "M": 
					return "––";
				case "n": 
				case "N": 
					return "–.";
				case "o": 
				case "O": 
					return "–––";
				case "p": 
				case "P": 
					return ".––.";
				case "q": 
				case "Q": 
					return "––.–";
				case "r": 
				case "R": 
					return ".–.";
				case "s": 
				case "S": 
					return "...";
				case "t": 
				case "T": 
					return "–";
				case "u": 
				case "U": 
					return "..–";
				case "v": 
				case "V": 
					return "...–";
				case "w": 
				case "W": 
					return ".––";
				case "x": 
				case "X": 
					return "–..–";
				case "y": 
				case "Y": 
					return "–.––";
				case "z": 
				case "Z": 
					return "––.."
				default:
					return " STOP ";
						
			}
		}
	}
});

Sonra ise yazılan her sözcüğü ayrıştırarak ekrana yazdırma zamanı:

<!DOCTYPE html>
<html lang="en" ng-app="test">
<head>
	<meta charset="UTF-8">
	<title>Proje</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
	
	<!-- controller -->
	<script>
		var Proje = angular.module('test', [])
		.controller('TestCtrl', function ($scope, MorseService) {
			$scope.data = "";
			$scope.convert = ""; // yeni değişken morse için çıkan sonucu yazdırmak için
			$scope.$watch("data", function(news, old) { // data değişkeni izlensin
				$scope.convert = ""; // her değiştiğinde temizliyorum ve baştan yüklüyorum
				angular.forEach(news, function(item) { // bu ise string değeri karakter karakter okuyor bunun farklı yöntemleride var 
					$scope.convert += MorseService.strToMorse(item) + " "; // ve strToMorse dan dönen değeri değişkene atıyoruz.
				});
			});
		});
	</script>

	<script src="service/MorseService.js"></script>
</head>
<body ng-controller="TestCtrl">
		
	<textarea type="text" ng-model="data"></textarea>

	<p>Çıkan sonuç : <b><pre>{{convert}}</pre></b></p> <!-- tüm morse string'ni buraya yazdırıyoruz -->

</body>
</html>

artık projemiz çalışabilir durumda. Peki angular.forEach yerine alternatif olarak neler kullanılabilirdi ? şunlar: 

/* news'in her satırı için i, 0 dan news length'a kadar döner (tüm tarayıcılar desteklemez) */
for (var i in news)
	$scope.convert += MorseService.strToMorse(news[i]) + " ";



/* Tüm tarayıcılar destekler */
for (var i = 0; i < news.length; i++)
	$scope.convert += MorseService.strToMorse(news[i]) + " ";



// ben size 2. kullanımı tavsiye ederim fazla bir önemi olmamakla beraber 

Bügünkü konumuz bu kadardı. Anlamadığınız veya eksik gördüğünüz bir yer olursa soru sormaktan çekinmeyin. İyi çalışmalar :)

Düşündüklerin nedir ?

Abdurrahman Eker

(1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?