[Tutorial 1] Persiapan Environment Angular Js


Notice: get_currentuserinfo is deprecated since version 4.5.0! Use wp_get_current_user() instead. in /home/k0152185/public_html/wp-includes/functions.php on line 3840

Angular JS biasanya digunakan sebagai framework di bagian front end suatu website. Salah satu kelebihan dari angular js ini adalah data binding sehingga antara model dan controller datanya akan dilakukan sinkronisasi secara asynchronous. Kelebihan angular yang lain adalah angular dapat melakukan routing, membuat sebuah directive dan biasanya digunakan sebagai client untuk sebuah web service.

Persiapan Environment Untuk Mempermudah Pengkodean Program dengan AngularJS

Instalasi Bower (syarat sudah terinstal npm dari nodejs dan sedang terkoneksi dengan internet ) :

bowerinstall

bowersukses

tampilan gambar di atas adalah jika bower sukses terinstall atau dapat di cek di console (CMD) dengan perintah :

maka output text di console adalah : 1.7.9 (versi bower yang saya gunakan)

Membuat Hello Word Dengan Angular JS

Untuk mempermudah pemahaman, kita akan langsung mencoba membuat hello word dengan menggunakan angular js :D. Untuk mendownload kebutuhan dependency angular, penulis akan menggunakan bower, karena menggunakan bower maka anda diwajibkan untuk melakukan instalasi node js. Bagi anda yang belum melakukan instalasi node js, silahkan lihat di Instalasi Perlengkapan Coding Node JS. Silahkan buat sebuah folder dengan nama basicAngular, kemudian akses foder tersebut dengan terminal. Kemudian jalankan perintah berikut.

kemudian isikan konfigurasi seperti berikut :

bowerInit1

bowerInit2

Lalu tahap selanjutnya, kita akan mendownload dependency library yang diperlukan, silahkan jalankan perintah berikut.(saya download bootstrap dan angular secara bersama-sama)

perintah diatas akan mendownload dependency bootstrap untuk tampilan web nya dan angular js. (atau jika menginstall angularjs dan bootstrap secara terpisah dapat melihat tampilan berikut :

bowerBootskedua perintah akan menghasilkan folder dan file baru yang ada di dalam folder basicAngular seperti tampilan berikut :
resultfolder

Setelah selesai, silahkan buat sebuah file index.html lalu isikan codingan seperti berikut.

Berikut adalah penjelasan mengenai codingan diatas.

  • ng-app berfungsi untuk mendeklarasikan bahwa file html ini akan dihandle oleh angular js.
  • ng-model berfungsi sebagai model yang dapat menampung data, nantinya data ini akan ditampilkan.
  • {{nama}} berfungsi untuk menampilkan data, di dalam angular, kita akan menggunakan tanda {{}} untuk menampilkan data.

Instalasi Http-server 

Nah setelah selesai, selanjutnya kita akan menjalankan file index.html, untuk menjalankannya, kita akan menggunakan plugin http-server dari node js :D.

Untuk melakukan instalasi http-server, silahkan jalankan perintah berikut.

installhttpvianpm

Setelah selesai, jalankan perintah berikut pada root project untuk menjalankan http-server. maka akan running service yang dapat kita panggil di http:192.168.xxx.xxx. (dan lain lain ), silahkan di allow jika muncul konfirmasi tampilan windows security alert.

httpserverrun

berikut hasil tampilan di browser :

runningbrowserd

berikut service yang selalu realtime dapat kita lihat proses yang ada.servicecontrold

 

sekian untuk tutorial angular js selanjutnya tunggu episode berikut nya 🙂 .

sumber : https://rizkimufrizal.github.io/belajar-angular-js/

Leave a Reply

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