Belajar Angular JS Fundamental untuk Pemula

Posted on Posted in Tutorial Angular

Angular.js adalah salah satu framework javascript yang cukup terkenal dan banyak digunakan sekarang, sehingga belajar angular.js merupakan pilihan bagus.

Oleh karena itu, dalam artikel ini akan dijelaskan angular secara fundamental(mendasar).

Nah, Angular.js merupakan salah satu framework yang mengusung teknologi MVC(Model View Controller). Keunikan angular terletak pada code yang digunakan, dimana angular memanipulasi sintaks html menjadi code program.

Walaupun angular memanipulasi html, angular tidak meganggu html, angular hanya menambahkan atribut-atribut baru kedalam html, sehingga bisa dikatakan “Angular mengajari html trik-trik baru”.

Nah, untuk lebih jelasnya, berikut penerapan angular dalam pembuatan aplikasi dihtml.

Pertama, buat file html dengan struktur sebagai berikut:

<!DOCTYPE html>

<html>

<head> 

<title>Angular JS</title>

</head>

<body>

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js”></script>

</body>

</html>

Code diatas adalah struktur umum untuk file html, dengan tambahan tag script untuk angular library yaitu:

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js”></script>

Oke, setelah itu edit tag <body>, menjadi seperti ini:

<body ng-app ng-init=”name = ‘Angular'”>

<h1>Hello, {{ name }}!</h1>

Jika berhasil, maka akan seperti ini:

Nah, berikut penjelasan dari code diatas:

  • Atribut ‘ng-app’ berguna untuk inisiasi aplikasi angular, atribut ini harus ada disetiap aplikasi angular.
  • Sedangkan atribut ‘ng-init’ adalah atribut untuk inisiasi model, yang berisi deskripsi dari model, pada code diatas “name = ‘Angular'” bermaksud untuk mendefinisikan variable ‘name’ dengan value ‘Angular’
  • Pada tag <h1>, simbol ‘{{ }}’ digunakan untuk menampilkan isi dari variable, jadi ‘{{ name }}’ berarti menampilkan isi dari variable name yaitu ‘Angular’

Selanjutnya tambahkan code berikut pada tag <h1> , sehingga menjadi seperti ini:

Katakan Hello kepada: <input type=”text” ng-model=”name”>

<h1>Hello, {{ name }}!</h1>

Nah, atribut ‘ng-model’ pada code diatas menandakan bahwa input tersebut adalah inputan untuk model ‘name’, sehingga jika terjadi perubahan pada input tersebut, angular akan otomatis meng-updatenya.

Seperti ini:


Nah, itulah contoh penulisan code untuk aplikasi angular, dengan angular kita dapat dengan sangat mudah mendefinisikan sebuah model, bahkan tanpa script sedikitpun.

Berikut adalah hasil akhir code tadi:

<!DOCTYPE html>

<html>

<head> 

<title>Angular JS</title>

</head>

<body ng-app ng-init=”name = ‘Angular'”>

Katakan Hello kepada: <input type=”text” ng-model=”name”>
<h1>Hello, {{ name }}!</h1>

<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js”></script>

</body>

</html>

Nah, code diatas sering disebut dengan istilah ‘Two Ways Data Binding’.

Sekian. 

Selanjutanya: Belajar Angular JS Fundamental untuk Pemula – Part 2

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *