Halo teman teman pada tutorial kali ini saya akan menjelaskan tentang Fungsi $watch pada AngulaJS, Fungsi $watch pada AngulaJS yaitu untuk mengetahui perubahan dari suatu nilai yang terjadi atau terdapat pada sebuah variable di dalam scope. Parameter pertama yang digunakan pada method ini yaitu string dari nama variable yang akan eksekusi kemudian parameter kedua adalah berupa sebuah fungsi yang akan dijalankan ketika suatu nilai yang di eksekusi berubah.
Nah biar lebih jelasnya kita akan masuk ke study case nya, tentang Fungsi $watch pada AngulaJS
Langkah pertama kita akan buat dulu sebuah file index.html, dan kemudian silahkan teman teman simpan script dibawahi ini pada file index.html
<!DOCTYPE html>
<html>
<head>
<title>Fungsi $watch pada AngulaJS</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.container {width: 500px; margin: auto; background:#8EBF5F;}
h3{text-align: center;}
textarea {margin: 20px 0; text-align: center; width: 375px; height: 100px;}
.text1 {margin-bottom: 10px;}
.text2 {background: #254C00; padding: 10px 0 10px 10px; color: #BEE599;}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="MainController.js"></script>
<body ng-app='FirstApp' ng-controller='MainController'>
<div class="container">
<h3>Fungsi $watch pada AngulaJS</h3>
<center><textarea ng-model='isi' type='text' placeholder="masukan text"></textarea></center>
<div>
<p class="text1">{{isi}}</p>
</div>
<div>
<p class="text2">Jumlah {{count}} </p>
</div>
</div>
</body>
</html>Pada file index.html yang telah kita buat berfungsi untuk memunculkan atau menampilkan data yang pada saat kita isi maka nilai dari sebuah data yang kita isi tersebut akan muncul dibawahnya, karena data yang telah kita masukan akan dirubah dengan mengunkan $watch.
Berikutnya kita akan buat sebuah controllernya, dan silahkan teman teman simpan script dibawah ini dengan nama MainController.js
app.controller('MainController', function($scope){
$scope.isi = '';
$scope.count = -1;
$scope.$watch('isi', function(newValue, oldValue){
$scope.count = $scope.count + 1;
})
});Selanjutnya yang harus kita buat yaitu modulenya, dan silahkan teman teman simpan script dibawah ini dengan nama app.js
var app=angular.module('FirstApp',[]);Jika sudah silahkan teman teman jalankan pada browser nya maka akan muncul seperti dibawah ini,.
Oke teman teman cukup mudah bukan tentang Fungsi $watch pada AngulaJS, sekian dulu tutorial saya kali ini semoga bermanfaat.
Terimakasih
The post Fungsi $watch pada AngulaJS appeared first on Kursus Website Terbaik.