Buat Aplikasi Web Sederhana dengan Angular JS

Untuk membuat aplikasi web menggunakan AngularJS, ikuti tahapan berikut:

Unduh terlebih dahulu framework AngularJS di halaman web angularjs.org. Untuk lebih memudahkan pengunduhan, unduh AngularJS dalam bentuk Zip.
Setelah proses pengunduhan selesai, ekstrak file-nya di mana saja. Di contoh ini saya mengekstraknya di folder C:/xampp/htdocs/angularjs. Saya asumsikan di komputer pembaca sudah terinstal XAMPP atau sejenis.
Buat folder baru dengan nama angularjs
Ubah nama AngularJS yang sudah diunduh dengan nama “lib” kemudian kopi ke folder htdocs/angularjs/
Kemudian buatlah file .html di dalam folder angularjs dengan nama index.htmlmenggunakan editor teks seperti Notepad++, Sublime Text, atau lainnya.
Ubah isi file index.html menggunakan aplikasi Sublime Text atau editor teks lainnya.

Ketik seperti kodingan seperti di bawah ini:

1

2

3

4

5

6

7

8

9

10

11

12

13

<html data-ng-app>

<head>

 <script src="lib/angular/angular.js"></script>

</head>

<body>

 <div>

 <label>Tulis disini :</label>

 <input type="text"data-ng-model="hasilTulisan">

 <hr>

 <h1>{{hasilTulisan}} </h1>

 </div>

</body>

</html>

<html data-ng-app> berfungsi agar AngularJS berjalan pada blok elemen di mana directiveng-app ini berada. Pada contoh di atas, ng-app berada pada elemen <html>, artinya semua yang berada pada blok <html> bisa menggunakan AngularJS. ng-app sendiri adalah directive bawaan AngularJS dan {{hasilTulisan}} merupakan data binding expression.

Untuk melihat hasilnya, buka XAMPP kemudian klik start pada Apache dan MySQLkemudian buka peramban web dan ketik localhost/angularjs. Hasilnya akan terlihat seperti di bawah ini:

Sampai di sini kita sudah mengimplementasikan directive AngularJS pada halaman web kita. Untuk sedikit mempercantik tampilan web, saya tambahkan kode CSS pada fileindex.html seperti di bawah ini:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<html data-ng-app>

<head>

 <script src="lib/angular/angular.js"></script>

 <style type="text/css">

 .tengah{

 position:absolute;

 margin-left:auto;

 margin-right:auto;

 margin-top:auto;

 margin-bottom:auto;

 left:0;

 right:0;

 top:0;

 bottom:0;

 }

 </style>

</head>

<body>

 <div>

 <label>Tulis disini :</label>

 <input type="text"data-ng-model="hasilTulisan">

 <hr>

 <h1>{{hasilTulisan}} </h1>

 </div>

</body>

</html>

Setelah menambahkan kode CSS, akan terlihat hasilnya seperti gambar di bawah ini.
Untuk lebih memberikan sedikit sentuhan kita bisa mengganti background dengan warna. Caranya ubah kodingan pada baris ini.

1

<div class="tengah" style="background-color:white; width:300px; height:300px;" >
Pada bagian style=”background-color:white; silahkan ganti dengan kode warna hexadecimal yang disukai.

Perbandingan AngularJS dengan JavaScript Biasa

Sepert yang diketahui di tutorial AngularJS ini, kita hanya perlu menulis kodingan seperti di bawah ini untuk mendapatkan hasil yang diinginkan:

1

2

3

4

5

6

7

8

9

10

11

12

13

<html data-ng-app>

<head>

 <script src="lib/angular/angular.js"></script>

</head>

<body>

 <div>

 <label>Tulis disini :</label>

 <input type="text"data-ng-model="hasilTulisan">

 <hr>

 <h1>{{hasilTulisan}} </h1>

 </div>

</body>

</html>

Sekarang bandingkan dengan ketika menggunakan JavaScript biasa untuk mendapatkan hasil yang sama:

1

2

3

4

5

6

7

8

9

10

11

12

13

<html>

 <script>

 function displayType(){

 var inputKetikan =  document.getElementById("ketikan");

 var targetKetikan =  document.getElementById("hasilketikan");

 targetKetikan.innerHTML = inputKetikan.value;

 }

 </script>

 <body>

 <textarea id= "ketikan"  onkeyup= "displayType()" ></textarea>

 <div id= "hasilketikan"></div>

 </body>

</html>

Terlihat jelas bukan bahwa membuat kodingan JavaScript menggunakan AngularJS lebih sederhana dibandingkan dengan cara biasa.

Ayo Koding

Buat Aplikasi Web Sederhana dengan Angular JS