AngularJS : Controller dan Scope

Mahir Koding – Sesuai namanya, controller bertugas untuk mengontrol data dan alur kerja dari web yang kita buat. Konsep MVC menekankan kita untuk memisah semua alur proses program ke dalam controller-controller yang berbeda.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApps">
	<div ng-controller="userController">
		<input type="text" ng-model="name">
		<button ng-click="showResult()">Show Result</button>
	</div>
</body>
<script type="text/javascript">
	var app = angular.module("myApps", []);
	app.controller("userController", function($scope){
		$scope.name = "Dummy Name";
		$scope.showResult = function(){
			alert($scope.name);
		}
	})
</script>
</html>

Contoh diatas, kita akan membuat userController untuk menginisialisasi model name dan membuat function showResult untuk melakukan alert isi model name.

Pertama-tama, kita harus membuat variable angular module untuk “myApps”. Scope [] dalam inisialisasi angular module digunakan untuk menampung external dependencies jika diperlukan nantinya.

Lalu, apa itu variable scope?

Scope adalah sebuah object yang menampung model, sebagai perantara bagi controller dan view. Object tersebut dapat berisi method dan variabels. Coba perhatikan kembali snippet code diatas, kita bisa mengakses seluruh model dan function dalam userController lewat variable scope.

Perlu diketahui, $scope tidak hanya digunakan untuk mengambil/menampung variable model yang sudah ada. Namun kita juga bisa mendeklarasikannya sendiri tanpa harus menambahkan directive ng-model yang baru.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApps">
	<div ng-controller="userController">
		<input type="text" ng-model="name">
		<button ng-click="showResult()">Show Result</button>
	</div>
</body>
<script type="text/javascript">
	var app = angular.module("myApps", []);
	app.controller("userController", function($scope){
		$scope.degree = "S. Kom";
		$scope.name = "Dummy Name";
		$scope.showResult = function(){
			alert($scope.name+", "+$scope.degree);
		}
	})
</script>
</html>

Cara menggunakan $scope di AngularJS cukup dengan mempassing $scope di dalam function controller.

Jika ingin mengambil seluruh object dari luar controller yang berbeda, bisa gunakan $rootScope. Scope yang ada dalam object $rootScope mencakup keseluruhan dari isi app. (start from ng-app section)

Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasih.