Apa itu `$scope` di AngularJS? Tutorial dengan Contoh

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.

Setiap pengontrol dalam sebuah AngularJS Aplikasi menerima instance `$scope`-nya sendiri melalui injeksi dependensi. Apa pun yang Anda lampirkan ke objek tersebut akan terlihat oleh template yang diatur oleh controller, sehingga `$scope` berperilaku sebagai model data bersama yang berada di antara aplikasi Anda dan controller. JavaLogika skrip dan markup HTML Anda.

Perhatikan contoh di bawah ini:

angular.module('app',[]).controller('HelloWorldCtrl',
	function($scope)
	{
		$scope.message = "Hello World"
	});

Code Penjelasan:

1. Nama modulnya adalah "aplikasi"
2. Nama controllernya adalah “HelloWorldCtrl”
3. Objek lingkup adalah objek utama yang digunakan untuk meneruskan informasi dari pengontrol ke tampilan.
4. Variabel anggota ditambahkan ke objek cakupan

Satu controller dan satu view hanyalah setengah dari gambaran keseluruhan. Aplikasi nyata menggunakan controller bertingkat, mengulang list, dan menggunakan kembali widget, yang berarti beberapa scope ada sekaligus.

Cara Kerja Hierarki Cakupan dan Pewarisan di AngularJS

Setiap aplikasi AngularJS memiliki tepat satu scope akar dan dapat memiliki sejumlah scope anak. Direktif membuat scope anak tersebut dan melampirkannya ke elemen DOM yang didekorasinya, sehingga pohon scope mencerminkan struktur halaman yang dirender.

Ketika AngularJS mengevaluasi ekspresi seperti {{siteName}}Pertama-tama, ia mencari properti tersebut pada cakupan yang melekat pada elemen. Jika properti tersebut tidak ada, pencarian berlanjut ke cakupan induk, dan terus naik hingga mencapai cakupan akar. JavaPara pengembang skrip mengenal perilaku ini sebagai pewarisan prototipe, dan cakupan anak mewarisi dari induknya dengan cara yang persis sama.

Contoh di bawah ini menyusun satu controller di dalam controller lain sehingga Anda dapat melihat bagaimana pewarisan terjadi.

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code Penjelasan:

1. ParentCtrl mendefinisikan siteName dalam lingkupnya sendiri.
2. ChildCtrl tidak pernah mendefinisikan siteName, namun div bagian dalam tetap tercetak Guru99 karena pencarian tersebut mengarah ke cakupan induk.
3. lesson Hanya berlaku pada lingkup anak, sehingga div induk tidak dapat membacanya.

Direktif mana yang menciptakan cakupan baru?

• ng-controller: Membuat cakupan anak untuk elemen tempat ia ditempatkan.
• ng-repeat: membuat satu cakupan anak per iterasi, itulah sebabnya setiap baris dapat menyimpan nilai yang berbeda untuk ekspresi yang sama.
• Arahan khusus: dapat meminta pemeriksaan endoskopi anak, atau memisahkan lingkup yang sengaja tidak mewarisi dari induknya.
• Arahan komponen: segala sesuatu yang terdaftar pada .component() helper selalu menerima cakupan terisolasi.

Karena cakupan anak (child scope) membaca ke atas, pengembang sering bertanya-tanya di mana puncak rantai tersebut berada. Objek tingkat atas tersebut disebut $rootScope.

$scope vs $rootScope: Apa Perbedaannya?

AngularJS $rootScope $rootScope adalah cakupan untuk seluruh aplikasi. Sebuah aplikasi hanya dapat memiliki satu $rootScope dan digunakan seperti variabel global. Setiap $scope adalah cakupan anak, dan $rootScope adalah induk di puncak pohon. Tabel di bawah ini membandingkan kedua objek tersebut.

Gunakan `$rootScope` dengan hemat. Apa pun yang ditempatkan di sana akan berlaku untuk seluruh aplikasi dan dapat dibaca di mana saja, jadi layanan bersama biasanya merupakan tempat yang lebih aman untuk status global. (Referensi resmi) Referensi $rootScope mencantumkan API lengkap.

Mengetahui di mana data berada adalah separuh dari pekerjaan. Separuh lainnya adalah mengajarkan cakupan (scope) cara merespons ketika pengguna melakukan sesuatu.

Mengatur atau menambahkan perilaku di AngularJS

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>

Code Penjelasan:

1. Kami menciptakan perilaku yang disebut "Nama Lengkap". Perilaku ini adalah fungsi yang menerima 2 parameter (Nama Depan, Nama Belakang).
2. Perilaku tersebut kemudian mengembalikan gabungan dari 2 parameter ini.
3. Dalam tampilan tersebut, kita memanggil perilaku dan meneruskan 2 nilai "Guru” dan “99” yang diteruskan sebagai parameter ke perilaku tersebut.

Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Di browser Anda akan melihat gabungan dari kedua nilai tersebut. Guru & 99 yang diteruskan ke perilaku di pengawas.

Binding seperti yang di atas akan diperbarui secara otomatis, dan mekanisme yang memungkinkan hal itu terjadi perlu dipahami sebelum aplikasi menjadi besar.

Mengapa Pengamat Lingkup dan Siklus Ringkasan Itu Penting

AngularJS menjaga agar tampilan tetap sinkron dengan cakupan melalui pengecekan perubahan (dirty checking) daripada melalui peristiwa perubahan (change events). Tiga API cakupan mendorong proses tersebut:

• $watch: mendaftarkan pendengar untuk suatu ekspresi. Interpolasi seperti {{fullName}} Mendaftarkan pengawas untuk Anda selama proses penautan templat.
• $apply: Memasuki konteks eksekusi AngularJS, mengevaluasi kode Anda, lalu memicu digest. Ini hanya diperlukan di dalam callback event kustom atau callback pustaka pihak ketiga, karena direktif bawaan sudah memanggilnya.
• $ringkasan: Menelusuri setiap pengawas pada $rootScope dan anak-anaknya, membandingkan nilai saat ini dengan nilai sebelumnya, dan mengulanginya hingga model berhenti berubah.

Karena sebuah digest dapat berjalan beberapa kali, ekspresi watch harus tetap efisien. Hindari akses DOM di dalamnya, karena membaca DOM jauh lebih lambat daripada membaca ekspresi watch. JavaProperti skrip.

Kedalaman pemantauan juga memengaruhi biaya. Pemantauan berdasarkan referensi adalah yang tercepat dan hanya menyadari ketika seluruh nilai telah diganti. $watchCollection Memantau item yang ditambahkan, dihapus, atau diurutkan ulang di dalam array atau objek. Pemantauan berdasarkan nilai menelusuri struktur bersarang pada setiap digest dan merupakan opsi yang paling mahal, jadi gunakan opsi ini terakhir.

Pertanyaan Umum Demo Slot