Setiap variabel yang terdapat pada AngularJS memiliki scope tersendiri. Scope ini dibatasi dengan yang namanya controller, jadi suatu blok html hanya bisa mengakses variabel yang terdapat pada controller yang merupakan scope-nya. Pusing dengan tulisan mending langsung saja lari ke kodingnya.
Langkah pertama tulis terlebih dahulu kerangka dasar Html-nya dimana kita me-load file angularjs dan sebuah file javascript yang bernama aplikasi.js yang nanti akan memuat fungsi controller. Jangan lupa tambahkan ng-app pada tag body
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <title>Scope Data</title> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="aplikasi.js"></script> </head> <body ng-app=""> </body> </html> |
Selanjutnya untuk variabel pada controller yang akan diakses oleh Html tadi kita buat menggunakan JSON dengan cara harcode saja, alias tulis langsung di controller. Simak kodenya di bawah ini, kode ini ditulis pada file aplikasi.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function BukuController($scope){ $scope.bukus={ "java":{ "kode":"java", "judul":"Java EE Programming", "penulis":"Rahman dkk" }, "javascript":{ "kode":"javascript", "judul":"Javascript 2014", "penulis":"Rully" }, "net":{ "kode":"net", "judul":"Advanced .Net platform", "penulis":"Rloio" }, "php":{ "kode":"php", "judul":"Php legacy code", "penulis":"Ruzman" } } } |
Dari kode di atas perhatikan nama fungsi-nya karena hal ini sangat penting berhubungan dengan scope data yang akan diakses pada Html.
Kembali pada Html. Di dalam tag body tambahkan sebuah blok div dimana di dalamnya akan memunculkan data yang diambil dari controller.
|
1 2 3 4 5 6 7 8 9 |
<div ng-controller="BukuController"> <div> <ul ng-repeat="b in bukus"> <li>Kode : {{b.kode}}</li> <li>Judul : {{b.judul}}</li> <li>Penulis : {{b.penulis}}</li> </ul> </div> </div> |
Blok di atas memiliki attribut ng-controller yang bernilai BukuController (sama dengan nama fungsi pada aplikasi.js). Artinya blok ini memiliki scope BukuController sehingga bisa mengakses variabel yang ada di dalamnya. Kemudian ng-repeat digunakan sebagai perulangan untuk mendapatkan isi array dari variabel pada controller yaitu bukus, yang sudah terbiasa dengan JSP+JSTL atau view engine lainnya pasti tidak asing dengan bentuk seperti itu.
Adapun kode lengkap Html setelah ditambahkan blok di atas menjadi seperti ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <title>Scope Data</title> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="aplikasi.js"></script> </head> <body ng-app=""> <div ng-controller="BukuController"> <div> <ul ng-repeat="b in bukus"> <li>Kode : {{b.kode}}</li> <li>Judul : {{b.judul}}</li> <li>Penulis : {{b.penulis}}</li> </ul> </div> </div> </body> </html> |
Ketika di buka pada browser maka akan ditampilkan data-data yang ada pada controller
Di awal saya sudah mengatakan bahwa suatu blok html hanya bisa mengakses variabel yang terdapat pada controller yang merupakan scope-nya. Untuk membuktikannya silahkan copas blok div yang berisi perulangan menampilkan data, taruh di bawah blok sebelumnya dan pada bagian ng-controller ubah nilainya menjadi kosong. Ketika dibuka pada browser maka tidak akan tertampil apapun, kosong belaka.
Simple dan ngerti heheh thks gan
Matap tutorial nya.
Punya contoh Spring MVC dengan Angular JS ga
Thx Tutorialnya, saya coba pada laravel versi barunya, tidak mau jalan, setelah saya ganti dengan versi lama baru jalan.
thx
Kalau ngambil data controller di controller gimana ya?
dan set title di controller bisa gak?
contohnya ane lihat disini -> http://angular.github.io/angular-phonecat/step-7/app/#/phones
setelah klik salah satu phone, apa bisa ganti title di halaman detailnya?
Terima kasih bang, semoga kedepannya ada tutorial yang baru dengan mengambil data dari DB..
buat CRUD dong gan pake angularjs. ditunggu yaaa
Halo Mas Robi, sudah banyak nih yang menanyakan soal CRUD di Angular
Masalahnya adalah sekarang Angular sudah muncul yang versi 2 yang mana itu beda sekali dengan versi 1 jadi kalau saya mau meneruskan yang versi 1 ini sayang. Dan saya belum belajar yang versi 2.