Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Belajar AngularJS part 2 : menggunakan Controller dan Array

Sebelumnya kita telah belajar cara membuat hello world sederhana dengan menggunakan bantuan ng-model pada angularJS. Nah, kali ini kita akan belajar tentang cara menggunakan controller secara sederhana. Seperti biasa, pertama-tama download angularJS atau gunakan yang sudah ada. Kemudian, buat struktur folder sebagai berikut:

angularjs folder structure

Setelah itu, buatlah template HTML sederhana seperti berikut ini pada file index.html:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Belajar Angular JS</title>
  <script src="angular.min.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

Jangan lupa untuk menambahkan ng-app pada tag html serta melakukan include script angularJS. Setelah itu, kita akan membuat sebuah controller sederhana. Controller akan kita buat pada bagian head dari template HTML yang kita buat diatas. Tambahkan script controller berikut pada bagian head:

  <script type="text/javascript">
  	function ContohCtrl($scope){
  		$scope.nilai = "Hello";
  	}
  </script>

Controller pada dasarnya hanyalah sebuah fungsi javascript biasa. Pada controller terdapat sebuah objek khusus bernama $scope yang memungkinkan komunikasi antara controller dan view. Dimana semua variabel yang ada pada view, dapat diakses menggunakan objek $scope pada controller. Dan semua variabel yang di set menggunakan objek $scope pada controller, dapat kita akses melalui view. Perhatikanlah pada contoh diatas, pada objek $scope terdapat variabel bernama nilai, dimana isi dari variabel nilai tersebut berupa tulisan ‘Hello’. Variabel nilai tersebut dapat kita akses melalui view. Tambahkan perintah berikut pada bagian body:

<div ng-controller="ContohCtrl">
	{{ nilai }}
</div>

Kode lengkapnya adalah sebagai berikut:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Belajar Angular JS</title>
  <script src="angular.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  	function ContohCtrl($scope){
  		$scope.nilai = "Hello";
  	}
  </script>
</head>
<body>

	<div ng-controller="ContohCtrl">
		{{ nilai }}
	</div>

</body>
</html>

Mengakses variabel dengan menggunakan ng-model

Pada artikel sebelumnya kita telah belajar menggunakan ng-model untuk menampilkan tulisan dari dalam textbox. Perlu diketahui bahwa ng-model bisa juga digunakan untuk menampilkan variabel dari objek $scope pada controller. Perhatikan contoh program berikut:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Belajar Angular JS</title>
  <script src="angular.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  	function ContohCtrl($scope){
  		$scope.nilai = "Hello";
  	}
  </script>
</head>
<body>

	<div ng-controller="ContohCtrl">
		<input ng-model="nilai">
	</div>

</body>
</html>

Pada contoh diatas, kita menampilkan variabel nilai pada sebuah textbox dengan menggunakan <input ng-model="nilai"> . Dengan demikian bisa disimpulkan bahwa variabel yang ada pada angularJS, bisa diakses dengan menggunakan ng-model, objek $scope pada controller dan dengan menggunakan syntax {{ nama_variabel }} pada view.

Membuat array pada controller dan menampilkannya sebagai list pada view

Pada controller angularJS, kita bisa mendefinisikan array pada objek $scope. Kemudian list dari isi array tersebut bisa ditampilkan pada view dengan menggunakan ng-repeat. Pertama-tama buatlah array sebagai berikut pada controller:

 $scope.users = [{name: "Dian", age: 21}, {name: "Swastika", age: 29}];

Kemudian tampilkan isi dari array tersebut dengan ng-repeat pada bagian body sebagai berikut:

<div ng-controller="ContohCtrl">
    <ul>
        <li ng-repeat="user in users">
            Name: {{user.name}}, {{user.age}} years old.
        </li>
    </ul>
</div>

Maka, list dari pengguna akan ditampilkan pada browser. Perhatikan pada tag <li> terdapat atribut sebagai berikut :

ng-repeat="user in users"

itu berarti selama isi dari variabel users masih ada maka tag <li> akan terus ditampilkan secara berulang-ulang. Dimana masing-masing item dari variabel users yang merupakan sebuah array dapat diakses dengan menggunakan variabel user (tanpa s). Dengan demikian, untuk mengakses nama pengguna kita menggunakan user.name dan untuk mengakses umur pengguna kita menggunakan user.age .

Menggunakan filter AngularJS

Pada controller anda juga bisa membuat sebuah textbox kemudian dibawahnya ditampilkan list item dari isi sebuah array. Perhatikan contoh program berikut:

<!doctype html>
<html ng-app>
  <head>
  <title>Belajar AngularJS</title>
    <script src="angular.min.js"></script>
    <script>
        function ContohCtrl($scope) {
            $scope.users = [
                { firstName: "Dian", lastName: "Robin" },
                { firstName: "Swastika", lastName: "Nami" },
                { firstName: "Endah", lastName: "Haruno" },
                { firstName: "Tifanny", lastName: "Hyuuga" },
                { firstName: "Melisha", lastName: "Hancock" },
                { firstName: "Utami", lastName: "Roger" }
            ];

            $scope.title = 'User list';
        }
    </script>
  </head>
  <body>
    <div ng-controller="ContohCtrl">
        <h1>{{title}}</h1>
        Search: <input ng-model="pencarian">
        <ul>
            <li ng-repeat="user in users | filter:pencarian">
                {{user.firstName}} {{user.lastName}}
            </li>
        </ul>
    </div>
  </body>
</html>

Jika anda buka dengan menggunakan browser, sebuah textbox akan ditampilkan dan list dari nama pengguna akan ditampilkan dibawahnya. Jika anda ketikan satu nama, maka sebuah nama akan ter-filter dari list tersebut, sehingga nama-nama yang lain tidak ditampilkan lagi:

belajar filter angularJS

Perhatikan pada tag li diatas terdapat perintah ng-repeat="user in users | filter:pencarian". Pada bagian tersebut, list yang ditampilkan di-filter berdasarkan isi dari textbox. Perhatikan bahwa nama filter harus sama dengan variabel ng-model pada textbox.

filter:pencarian

Harus cocok dengan

<input ng-model="pencarian">

Closure

Artikel ini memang, bukan sepenuhnya tentang controller pada AngularJS meskipun judulnya tentang penggunaan controller. Namun, dengan begitu diharapkan dapat memberikan gambaran bagi anda tentang penggunaan controller pada AngularJS.

belajar angularjs
  • http://themekom.biz/ themekom

    ditunggu nih part selanjutnya.

  • http://trendrumah.com/ sancoLgates

    bagus gan, ditunggu part 3 nya.