Merhabalar, bugün anlatacağım konular:
$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.
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 ?
