Table of Content
Introduction
Kita telah mempelajari fungsi operasi pengolahan sederhana. Kemudian bagaimana jika kita ingin menerapkan fungsi yg lebih kompleks? Jawabannya adalah dengan menggunakan Controller!
Sebuah controller merupakan fungsi konstruktor pada object Javascript yg berisi fungsi, atribut, dan behavior.
Persiapan Menggunakan Controller
Untuk menerapkan konsep MVC(Model View Controller) di AngularJS setidaknya diperlukan dua file, dimana satu file HTML yg akan berfungsi sebagai view dan file js berfungsi sbg controller.
Format Penulisan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.kata = 'Ini dari Controller!'
})
</script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<div ng-controller="kontroller">
<p>{{ kata }}</p>
</div>
</body>
</html>Array
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.kendaraan = ['mobil','motor','sepeda']
})
</script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<div ng-controller="kontroller">
<p ng-repeat="kdr in kendaraan">{{ kdr }}</p>
</div>
</body>
</html>Array Bertingkat
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.kendaraan = [
{tipe: 'Mobil', warna: 'Merah'},
{tipe: 'Motor', warna: 'Biru'},
{tipe: 'Sepeda', warna: 'Hitam'}
]
})
</script>
</head>
<body ng-app="belajar">
<h1>Latihan AngularJS</h1>
<div ng-controller="kontroller">
<p ng-repeat="kdr in kendaraan">{{ kdr.tipe + ' '+ kdr.warna }}</p>
</div>
</body>
</html>Logika If Else
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.hasil = function(){
if($scope.isi === 'Slamet'){
return 'jawaban kamu : '+$scope.isi+' BETUL!'
}else{
return 'Jawaban kamu salah!'
}
}
})
</script>
</head>
<body ng-app="belajar" ng-controller="kontroller">
<h1>Latihan AngularJS</h1>
<p>Siapa bapak kamu? <input type="text" ng-model="isi"></p>
<p>{{ hasil() }}</p>
</body>
</html>