AngularJS - Skop: Memahami Glue Aplikasi Anda

Hai sana, para ahli AngularJS masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia Skop AngularJS. Jangan khawatir jika Anda baru saja memulai dengan pemrograman - saya akan menjadi panduan yang ramah, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita masuk ke dalam!

Apa Itu Skop di AngularJS?

Pertama-tama - apa sebenarnya skop di AngularJS? Bayangkan Anda sedang membangun sebuah rumah. Skop adalah seperti dasar rumah Anda. Itu tempat di mana semua data dan fungsi Anda berada, dan menghubungkan HTML (tampilan) Anda dengan JavaScript (kontroler) Anda.

mari lihat contoh sederhana:

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{message}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello, AngularJS!";
});
</script>

Dalam contoh ini, $scope adalah objek skop kita. Kita menetapkan properti message di dalamnya, yang kemudian ditampilkan di HTML kita menggunakan {{message}}. Magic, kan?

Penerusan Skop

Sekarang, mari bicarakan sesuatu yang sedikit lebih lanjut - penerusan skop. Itu seperti pohon keluarga untuk data Anda!

Apa Itu Penerusan Skop?

Dalam AngularJS, skop dapat mewarisi dari skop induknya, sama seperti anak mewarisi ciri-ciri dari orang tua mereka. Ini berarti jika properti tidak ditemukan di skop saat ini, AngularJS akan mencari di skop induk, kemudian skop kakek, dan seterusnya.

mari lihat ini dalam aksi:

<div ng-app="myApp" ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "I'm the parent!";
});

app.controller('childCtrl', function($scope) {
// Skop anak mewarisi dari induk
});
</script>

Dalam contoh ini, keduanya akan menampilkan "I'm the parent!" karena skop anak mewarisi dari skop induknya.

Menimpa Properti Mewarisi

Tapi apa jika anak ingin menjadi separatis dan memiliki pesan sendiri? Tak ada masalah! Kita dapat menimpa properti mewarisi:

<div ng-app="myApp" ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
</div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('parentCtrl', function($scope) {
$scope.message = "I'm the parent!";
});

app.controller('childCtrl', function($scope) {
$scope.message = "I'm the child!";
});
</script>

Sekarang, induk akan mengatakan "I'm the parent!" dan anak akan mengatakan "I'm the child!". Anak telah berhasil menegakkan kemerdekaannya!

Contoh: Pohon Keluarga Skop

mari gabungkan semua ini dalam contoh yang lebih kompleks. Kita akan membuat pohon keluarga skop:

<div ng-app="familyApp" ng-controller="grandparentCtrl">
Grandparent: {{message}}
<div ng-controller="parentCtrl">
Parent: {{message}}
<div ng-controller="childCtrl">
Child: {{message}}
<div ng-controller="grandchildCtrl">
Grandchild: {{message}}
</div>
</div>
</div>
</div>

<script>
var app = angular.module('familyApp', []);

app.controller('grandparentCtrl', function($scope) {
$scope.message = "I'm the grandparent!";
});

app.controller('parentCtrl', function($scope) {
// Mewarisi dari kakek
});

app.controller('childCtrl', function($scope) {
$scope.message = "I'm the child!";
});

app.controller('grandchildCtrl', function($scope) {
// Mewarisi dari anak
});
</script>

Output

Ketika Anda menjalankan kode ini, Anda akan melihat:

Grandparent: I'm the grandparent!
Parent: I'm the grandparent!
Child: I'm the child!
Grandchild: I'm the child!

mariuraikan ini:

1. Kakek menetapkan pesan awal.
2. Induk tidak menetapkan pesan, jadi ia mewarisi dari kakek.
3. Anak menetapkan pesannya sendiri, menimpa yang mewarisi.
4. Anak kecil tidak menetapkan pesan, jadi ia mewarisi dari orang tua langsungnya (anak), bukan kakek.

Metode Skop

Skop tidak hanya untuk menyimpan data - mereka juga dapat mengandung metode! Ini adalah tabel dari beberapa metode skop umum:

Metode	Deskripsi
$watch()	Mendaftarkan pengguna yang dipanggil saat ekspresi yang diamati berubah
$apply()	Secara manual memulai siklus digest
$on()	Mendaftarkan pengguna yang dipanggil saat ada peristiwa
$emit()	Mengirimkan peristiwa ke atas melalui hierarki skop
$broadcast()	Mengirimkan peristiwa ke bawah ke semua skop anak

mari lihat contoh $watch() dalam aksi:

<div ng-app="watchApp" ng-controller="watchCtrl">
<input ng-model="name">
<p>{{greeting}}</p>
</div>

<script>
var app = angular.module('watchApp', []);

app.controller('watchCtrl', function($scope) {
$scope.name = 'World';
$scope.greeting = 'Hello, ' + $scope.name + '!';

$scope.$watch('name', function(newValue, oldValue) {
$scope.greeting = 'Hello, ' + newValue + '!';
});
});
</script>

Dalam contoh ini, kita menggunakan $watch() untuk memperbarui pesan saat nama berubah. Cobalah mengetik di field input - Anda akan melihat pesan diperbarui secara real-time!

Kesimpulan

Dan itu dia, teman-teman - sebuah perjalanan singkat ke dunia Skop AngularJS! Kita telah menjelajahi apa skop itu, bagaimana mereka mewarisi satu sama lain, dan bahkan menyelami beberapa konsep yang lebih lanjut seperti metode skop.

Ingat, skop adalah lem yang menghubungkan aplikasi AngularJS Anda. Itu adalah bagaimana data Anda mengalir dari JavaScript ke HTML, dan bagaimana interaksi pengguna di HTML dapat memperbarui JavaScript.

Sekarang Anda teruskan menjalankan perjalanan AngularJS Anda, Anda akan menemukan diri Anda kerap bekerja dengan skop. Tetapi jangan khawatir - dengan latihan, itu akan menjadi kebiasaan. Sebelum Anda sadari, Anda akan menjuggling skop seperti seorang pelawak profesional!

Tetap mengoding, tetap belajar, dan terutama, bersenang-senang! Dunia AngularJS luas dan menarik, dan Anda baru saja mengambil langkah pertama ke dalamnya. Sampai jumpa lagi, coding yang menyenangkan!

Credits: Image by storyset