Belajar Dasar AngularJS

AngularJS adalah framework javascript yang saat ini sedang populernya. Karena AngularJS adalah framework baru yang tentunya diharapkan menjadi sebuah jawaban bagi para developer dalam membangun sebuah website yang dinamis dan mudah dalam pengerjaanya. AngularJS ini layaknya framework lainnya, membantu kalian dalam membuat website menjadi mudah karena keleluasan angular ini. Selain dapat mengolah tampilan front-end ternyata angular ini juga dapat menarik data dari database layaknya bahasa pemrograman untuk back end. Sesuai dengan artikel kali ini, kita akan belajar dasar angularjs.

Sebelum kita belajar, ada hal yang harus kalian sudah kuasai seperti dasar HTML, CSS, javascript dan dasar bahasa pemrograman layaknya PHP. Pada AngularJS ini script yang ditawarkan terbilang cukup simple dan mudah. Tidak seperti framework javascript lainya dimana penulisan scriptnya sedikit sukar untuk diingat dan ribet. Pada AngularJS kita

angular.html

<!DOCTYPE html>
<html>
<head>
	
</head>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

Karena kita akan menggunakan perintah yang ada pada AngularJS, maka kalian harus menyisipkan file angularnya terlebih dahulu. Caranya cukup mudah, kalian bisa salin script dibawah ini dan letakan diantara tag head

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js”></script>

Setelah sudah kalian simpan file tersebut dengan format HTML. Untuk melihat hasilnya kalian bisa langsung membuka file tersebut pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

belajar-dasar-angularjs-rangga1-121117

Akan muncul sebuah textbox kosong, sekarang kalian bisa isikan sesuatu pada kolom tersebut dan lihat apa yang akan terjadi.

belajar-dasar-angularjs-rangga2-121117

Secara otomatis, apa yang telah kita ketik akan muncul dibawahnya secara langsung, tanpa harus mereload halaman ataupun menggunakan script PHP. Inilah keuntungan yang didapat jika kita bisa menggunakan AngularJS dimana untuk melakukan hal tersebut tidak bisa hanya menggunakan HTML saja.

Bagaimana cara kerjanya ? cara kerjanya terbilang cukup mudah. Dalam membuat tampilan html dengan angular, kalian akan sering melihat contoh code seperti ng-app, ng-model, dan ng-bind. Untuk ng-app nanti akan dibahas pada artikel selanjutnya. Untuk ng-model dan ng-bind ini adalah seperti contoh yang telah kita kerjakan. Apa yang kita tulis pada ng-model maka datanya akan ditarik oleh ng-bind dimana kita telah atur untuk menarik data dari ng-mode name. Mudah bukan ?

Sekian pemabahasan mengenai belajar dasar angularjs. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

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