Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Belajar AngularJS part 1 : Membuat Hello World

AngularJS adalah sebuah framework Javascript yang dibuat dan dikembangkan oleh google. Saat ini semakin banyak developer yang menggunakannya. Jika sebelumnya anda pernah menggunakan jQuery dan mencoba belajar angularJS anda akan terkejut dengan betapa mudahnya framework ini digunakan.

Tanpa banyak basa-basi berikut langkah-langkah membuat aplikasi hello dengan menggunakan angularJS. Pertama-tama, download angularJS dan tempatkan di dalam sebuah direktori. Di dalam direktori tersebut, buat juga sebuah file .html kosong. Struktur direktorinya sangat sederhana yaitu sebagai berikut:

angularjs folder structure

Selanjutnya, pada file index.html tambahkan kode HTML dasar sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Angular JS</title>
  <script src="angular.min.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

Langkah selanjutnya, ubah <html> menjadi <html ng-app> dan tambahkan perintah sebagai berikut pada bagian body:

Tulis nama anda disini:
<input type="text" ng-model="namamu" />
<h1>Apa Kabar {{ namamu }}</h1>

Dengan demikian, isi lengkap file index.html menjadi sebagai berikut:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Belajar Angular JS</title>
  <script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" ng-model="namamu" />
<h1>Apa Kabar {{ namamu }}</h1>
</body>
</html>

Sekarang, silahkan buka file index.html melalui browser. Maka, ketika anda mengetikan nama anda pada textbox, nama anda akan otomatis muncul setelah kata “Apa kabar”. Proses tampilnya nama anda setelah kata “Apa Kabar” murni dilakukan oleh javascript secara client side pada web browser.

angularJS Demo

Apa itu ‘ng-app’

Pada tag HTML diatas kita telah menambahkan ng-app. Apa itu ng-app? ng-app adalah suatu cara AngularJS mengetahui dimana AngularJS akan berjalan. Dalam kasus diatas, AngularJS akan berjalan pada seluruh bagian dari halaman yang kita buat karena kita menambahkannya pada tag <html> . Jika, anda menambahkan ng-app misalkan didalam sebuah tag <div>, maka AngularJS hanya akan berjalan di dalam tag div tersebut. Sebagai contoh:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar angularJS</title>
    <script src="angular.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div ng-app>

    </div>
  </body>
</html>

Jika anda ingin supaya angularJS bisa berjalan pada internet explorer, perlu menambahkan atribut id="ng-app" dengan demikian pada tag yang bersangkutan. Misal:

<div ng-app id="ng-app">

atau

<html ng-app id="ng-app">

Apa itu ‘ng-model’

Sebelumnya, kita telah menambahkan atribut ng-model pada textbox sebagai berikut:

<input type="text" ng-model="namamu" />

Adapun atribut ng-model digunakan untuk mendefinisikan sebuah model. Pada kasus diatas model dibuat dengan nama “namamu”. Ketika isi dari textbox bersangkutan diganti, maka value dari model tersebut juga akan berubah. Sedangkan, {{ namamu }} digunakan untuk menampilkan data pada model “namamu” tersebut.

Sampai disini, kita telah belajar membuat hello world dengan menggunakan angularJS. Have a nice day! 😀

belajar angularjs
  • http://acep.web.id/ Acep Saepudin

    mudah dipahami tutorialnya ,ditunggu artikel selanjut nya min :)

    • http://digitalmapia.com/ digitalmapia

      Makasih 😀

  • http://themekom.biz/ themekom

    thanks gan, ane lagi belajar angularjs, cukup bisa dipahami sampe saat ini. he he