Apa itu $Scope di AngularJS? Tutorial dengan Fungsi (Contoh)
James Hartman
Apa itu $scope di AngularJS?
$ruang lingkup di AngularJS adalah objek bawaan yang pada dasarnya mengikat "pengontrol" dan "tampilan". Seseorang dapat mendefinisikan variabel anggota dalam lingkup di dalam pengontrol yang kemudian dapat diakses oleh tampilan.
Perhatikan contoh di bawah ini:
angular.module('app',[]).controller('HelloWorldCtrl'
function($scope)
{
$scope.message = "Hello World"
});
Penjelasan Kode:
- Nama modulnya adalah "aplikasi"
- Nama pengontrolnya adalah “HelloWorldCntrl”
- Objek lingkup adalah objek utama yang digunakan untuk meneruskan informasi dari pengontrol ke tampilan.
- Variabel anggota ditambahkan ke objek cakupan
Menyiapkan atau menambahkan Perilaku
Untuk bereaksi terhadap peristiwa atau menjalankan semacam komputasi/pemrosesan dalam Tampilan, kita harus menyediakan perilaku pada ruang lingkup.
Perilaku ditambahkan ke objek cakupan untuk merespons peristiwa tertentu yang mungkin dipicu oleh Tampilan. Setelah perilaku didefinisikan di pengontrol, perilaku tersebut dapat diakses oleh tampilan.
Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta chrset="UTF 8">
<title>Guru99</title>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
{{fullName("Guru","99")}}
</div>
<script type="text/javascript">
var app = angular.module("DemoApp", []);
app.controller("DemoController", function($scope) {
$scope.fullName=function(firstName,lastname){
return firstName + lastname;
}
} );
</script>
</body>
</html>
Penjelasan Kode:
- Kami menciptakan perilaku yang disebut "Nama Lengkap". Perilaku ini adalah fungsi yang menerima 2 parameter (Nama Depan, Nama Belakang).
- Perilaku tersebut kemudian mengembalikan gabungan dari 2 parameter ini.
- Dalam tampilan tersebut kita memanggil perilaku dan meneruskan 2 nilai “Guru” dan “99” yang diteruskan sebagai parameter perilaku.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Di browser Anda akan melihat rangkaian nilai Guru & 99 yang diteruskan ke perilaku di pengawas.
Kesimpulan
- Berbagai variabel anggota dapat ditambahkan ke objek cakupan yang kemudian dapat direferensikan dalam tampilan.
- Perilaku dapat ditambahkan untuk bekerja dengan peristiwa yang dihasilkan untuk tindakan yang dilakukan oleh pengguna.
- AngularJS
$rootScopeadalah cakupan untuk keseluruhan aplikasi. Sebuah aplikasi hanya dapat memiliki satu $rootScope dan digunakan seperti variabel global. Dalam Angular JS $scopes adalah cakupan anak dan $rootScope adalah cakupan induk
