Belajar Angular JS Fundamental untuk Pemula

Posted on Posted in Artikel, 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

 

 

  • John

    Hey webmaster
    When you write some blogs and share with us,that is a hard work for you but share makes you happly right?
    yes I am a blogger too,and I wanna share with you my method to make some extra cash,not too much
    maybe $100 a day,but when you keep up the work,the cash will come in much and more.more info you can checkout my blog.
    http://makemoneyonlineg.com/2017.php
    good luck and cheers!