Module Pada AngularJS
AngularJS mendukung pendekatan modular. Module digunakan untuk logika yang terpisah seperti : service, controller, application, dan lain lain dari kode sumber dan menjaga supaya kode sumber lebih mudah dimaintain. Kita mendefinisikan module ke dalam file js yang terpisah dan penamaannya sesuai dengan nama module-nya. Untuk contoh di bawah kita akan membuat dua module.
- Module Aplikasi : digunakan untuk menginisialisasi aplikasi dengan controller.
- Module Controller : digunakan untuk mendefinisikan controller.
Kita akan menggunakan module aplikasi dengan directive ng-app, dan module controller dengan directive ng-controller. Selanjutnya, kita mengaitkan kedua module ini di halaman HTML.
Buat file untuk module aplikasi dengan nama MainApp.js
var mainApp = angular.module("mainApp", []);
Buat file untuk module controller dengan nama MemberController.js
mainApp.controller("MemberController", function($scope) {
$scope.member = {
firstName: "Putu",
lastName: "Gede",
details:[
{name:'Kecepatan',marks:90},
{name:'Akurasi',marks:78},
{name:'Stamina',marks:65},
{name:'Daya Tahan',marks:60},
{name:'Kekuatan',marks:87}
],
fullName: function() {
var memberObject;
memberObject = $scope.member;
return memberObject.firstName + " " + memberObject.lastName;
}
};
});
Kemudian, buat file htmlnya
<html>
<head>
<title>AngularJS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>Contoh Module</h2>
<div ng-app="mainApp" ng-controller="MemberController">
<table border="0">
<tr><td>Nama </td><td>{{member.fullName()}}</td></tr>
<tr ng-repeat="detail in member.details">
<td>{{ detail.name }}</td>
<td>{{ detail.marks }}</td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
<script src="MainApp.js"></script>
<script src="MemberController.js"></script>
</body>
</html>
Silakan dicoba 🙂
Pengisian dan Validasi Form Pada AngularJS
AngularJS juga bisa digunakan di dalam pengisian data sekaligus validasi form. Kita bisa menggunakan event ng-click untuk menghandel klik dari button. Kita juga bisa menggunakan $dirty dan $invalid sebagai validasi dari inputan.
AngularJS menyediakan banyak event sebagai kontrol pada HTML. Sebagai contoh, ng-click pada umumnya digunakan pada button. Di bawah ini adalah beberapa event :
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
Untuk validasi data, kita bisa menggunakan :
- $dirty : menyatakan bawah value telah dirubah
- $invalid : menyatakan value yang diinput salah
- $error : menyatakan error
Contoh penggunaannya seperti di bawah ini :
<html>
<head>
<title>AngularJS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>Contoh Validasi Form</h2>
<div ng-app="" ng-controller="memberController">
<form name="memberForm" novalidate>
<table border="0">
<tr><td>Nama </td><td><input name="nama" type="text" ng-model="nama" required>
<span style="color:red" ng-show="memberForm.nama.$dirty && memberForm.nama.$invalid">
<span ng-show="memberForm.nama.$error.required">Nama tidak boleh kosong.</span>
</span>
</td></tr>
<tr><td>Alamat</td><td><input name="alamat" type="text" ng-model="alamat" required>
<span style="color:red" ng-show="memberForm.alamat.$dirty && memberForm.nama.$invalid">
<span ng-show="memberForm.alamat.$error.required">Alamat tidak boleh kosong.</span>
</span>
</td></tr>
<tr><td>Email </td><td><input name="email" type="email" ng-model="email" length="100" required>
<span style="color:red" ng-show="memberForm.email.$dirty && memberForm.email.$invalid">
<span ng-show="memberForm.email.$error.required">Email tidak boleh kosong.</span>
<span ng-show="memberForm.email.$error.email">Format email salah.</span>
</span>
</td></tr>
<tr><td></td><td><button ng-click="reset()">Reset</button> <button ng-disabled="memberForm.nama.$dirty && memberForm.nama.$invalid || memberForm.nama.$dirty && memberForm.nama.$invalid || memberForm.email.$dirty && memberForm.email.$invalid" ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script>
function memberController($scope) {
$scope.reset = function(){
$scope.nama = "Putu Gede";
$scope.alamat = "Gianyar";
$scope.email = "alamatemail@website.com";
}
$scope.reset();
}
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>
Silakan mencoba kode di atas, cukup mudah bukan?
Untuk tutorial mengenai AngularJS yang lain, silakan klik di sini.
