Pengenalan AngularJS part 2

Pada kesempatan sebelumnya kita sudah mencoba membuat sebuah halaman dengan menggunakan angular. Pada kesempatan kali ini kita akan mencoba memisahkan data dengan halaman html yang akan digunakan. Pada angular terdapat $scope yang merupakan variable perantara antara controller dengan view.

Mari kita mulai saja dengan membuat code di bawah ini pada file index.html dan tes.js:

index.html

tes.js

Dapat dilihat pada index.html kita mendeklarasikan tes.js sebagai salah satu source script untuk halaman tersebut. Pada index.html kita mendekalarsikan ng-app sebagai SeperatedData dan pada tes.js kita membuat variable app yang merupakan angular modul untuk SepatedData. Dalam app tersebut kita dapat mendeklarasikan beberapa controller yang nantinya dapat digunakan dalam halaman html SeparatedData.

Pada index.html kita tambahkan ng-controller="UsersController" dan ng="AbsenController" controller tersebut hanya akan berjalan di lingkup tag tempat dimana tag tersebut berada. Contohnya pada index.html UsersController pada tag id="usersData, maka lingkup controller tersebut hanya berada di tag div usersData saja.

Sedangkan untuk data, pada tes.js dapat dilihat data di declarasikan pada $scope. Seperti yang telah dijelaskan di atas bahwa $scope merupakan perantara atau data binding yang digunakan antara controller dengan view. Dengan mendeklarasikannya pada $scope, index html dapat mengakses data tersebut dengan memanggil nama variablenya saja. 

Hasilnya adalah seperti berikut : 

Demikian cara memisahkan data dan penggunaan $scope dalam controller. Semoga membantu.