Terlebih dahulu buat file index.html form seperti dibawah ini.
kemudian buat file js yaitu mytuta.js dan isikan kode berikut ini.Sehingga akan terlihat di browser seperti gambar 11.1 dibawah ini.
 |
| Tampilan Kalkulator Bitcoin |
Tampilkan postingan dengan label angularjs. Tampilkan semua postingan
Tampilkan postingan dengan label angularjs. Tampilkan semua postingan
Rabu, 31 Agustus 2016
Sehingga akan terlihat di browser seperti gambar 11.1 dibawah ini.
Bagaimana caranya ikuti catatan berikut ini.
buat file js yaitu search.js yang isinya:
Kemudian buat file search.html yang isinya kode berikut ini.Sehingga akan menghasilkan tampilan pada browser seperti gambar 11.0 dibawah ini.
 |
| Gambar 11.0 |
Senin, 29 Agustus 2016
Baca Sebelumnya:
kita membutuhkan sebuah service untuk dapat menampilkan object tersebut pada sebuah halaman web. maka untuk melakukannya kita membutuhkan sebuah controller. Sehingga dengan controller kita dapat mendefinisikan perilaku aplikasi kita dengan menetapkan function dan value.
Langkah-langkahnya ialah yang pertama buat modul untuk aplikasi angular kita yang diberi nama belanja dengan nama file app.js seperti dibawah ini.
Kemudian tambahkan controller yaitu BelanjaController.Dan masukan kedalam aplikasi kita, sehingga menjadi seperti kode dibawah ini.
Kemudian masukan variabel kantong diatas kedalamnya. sehingga menjadi rangkaian kode seperti dibawah ini.
Lalu kita set kantong sebagai properti dari controller tersebut dengan menambahkan kode sepeti dibawah ini.
this.produk = kantong;
Kode tersebut dimasukan kedalam controller sebagai properti dari controller tersebut yang di set sama dengan kantong. Sehingga menjadi kode aplikasi lengkap dengan nama file app.js seperti dibawah ini.
app.js
Kini sudah lengkap aplikasi angular kita tersebut, dan sekarang bagaimana cara mengatur agar object tersebut dapat terlihat pada halaman html. yaitu sebagai berikut
Disini kita memiliki file html pertama dengan kode awal yaitu.
Sekarang mari kita muat data dari angular kedalam halaman html dengan menambahkan ng-controller directive.ng-controller="BelanjaController as belanja"
Sehingga menjadi rangkaian kode lengkap sebagai berikut dengan nama file angular-controller.html untuk menampilkan data produk.
angular-controller.html
Tampilan angular-controller.html ketika dirender pada browser seperti gambar 4.0 dibawah ini |
| Gambar 4.0 |
Jika kita menggunakan Javascript untuk membuat sebuah website yang dinamis maka Angular adalah pilihan yang tepat dan bijaksana. karena dengan menggunakan Angular kita akan memperoleh beberapa keuntungan yaitu:
- Angular akan membantu mengorganisasikan javascript kita.
- Angular akan membantu dalam membuat website yang responsive dengan cepat.
- Angular bekerja dengan baik jika disandingkan bersama JQuery.
- Angular sangat mudah dalam pengujian dan perawatan.
Contoh sederhana AngularJS:
DIRECTIVE
Sebuah tanda directive pada tag html akan memberitahu angular untuk menjalankan beberapa kode javascriptsebagai contoh lihat kode dibawah ini:
1. angular-basic.html
2. angular-basic.jsDirective ng-controller=”BelanjaController” pada tag html memberitahu angular untuk menjalankan javascriptpada function BelanjaController sehingga akan terlihat seperti gambar 3.8 dibawah ini.
 |
| Gambar 3.8 |
Untuk dapat menggunakan angular yang kita butuhkan adalah angular.min.js dan bootstrap.min.css
- Download AngularJS – angular.min.js di https://angularjs.org/
- Download Twitter Bootstrap – bootstrap.min.css di http://getbootstrap.com/
Sehingga untuk dapat menggunakan angular pada html implementasinya seperti kode dibawah ini.
MODUL
Fungsi modul adalah:
- Dimana kita dapat membuat potongan-potongan dari aplikasi angular kita
- Membuat kode kita dapat dengan mudah di rawat, di uji coba juga di baca
- Dimana kita dapat menetapkan dependency pada aplikasi kita, karena sebuah modul dapat digunakan oleh modul lainnya.
Mari kita buat modul pertama kita seperti kode dibawah ini dengan nama file yaitu app.js
app.js
pada kode diatas angular merupakan pustaka AngularJS kemudian module adalah dimana kita sedang membuat modul dan belanja adalah nama aplikasi lalu tanda [ ] adalah tempat kita untuk menetapkan dependency. jika kita belum menetapkan dependency apapun maka dapat kita kosongkan saja.
maka untuk menggunakannya pada html kita, masukan file app.js tersebut dan gunakan ng-app dengan menggunakan nama aplikasi yang ada pada modul seperti kode sebagai berikut
ng-app adalah sebuah directive pada tag html yang yang akan menjalankan modul belanja ketika dokumen pertama kali dimuat.
EXPRESSIONS
Dengan menggunakan ekpresi pada angular kita diperbolehkan untuk memasukan nilai yang dinamis pada html seperti contoh dibawah ini:
{{ 4 + 2 }} akan menghasilkan 6 ini disebut operasi numerik
{{ “selamat” + ” datang”}} akan menghasilkan selamat datang ini disebut operasi string
dan masih banyak lagi operasi-operasi lainnya yang dapat anda cek di https://docs.angularjs.org/guide/expression
angular-module.html
Tampilan angular-module.html ketika dirender pada browser seperti gambar 3.9 dibawah ini |
| Gambar 3.9 |
1. Buat file chart.html kemudian tuliskan kode seperti berikut ini.
2. Sehingga akan menghasilkan sebuah grafik seperti terlihat pada gambar 3.4 dibawah ini. |
| Gambar 3.4 |
Reference:
- http://jtblin.github.io/angular-chart.js/
