AngularJS - Skop: Memahami Glue Aplikasi Anda

Halo sana, para ahli AngularJS masa depan! Hari ini, kita akan melangsungkan sebuah perjalanan menarik ke dunia Skop AngularJS. Jangan khawatir jika Anda baru belajar pemrograman - saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu 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 semua data dan fungsi Anda berada, dan menghubungkan HTML Anda (tampilan) dengan JavaScript Anda (kontroller).

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, baik induk maupun anak akan menampilkan "I'm the parent!" karena skop anak mewarisi dari skop induk.

Menimpa Properti Terwarisi

Tapi apa jika anak ingin menjadi rebel dan memiliki pesan sendiri? Tidak masalah! Kita dapat menimpa properti yang diwarisi:

<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 katakan "I'm the parent!" dan anak akan katakan "I'm the child!". Anak telah berhasil mengassert 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 diwarisi.
4. cucu tidak menetapkan pesan, jadi ia mewarisi dari orang tua langsung (anak), bukan kakek.

Metode Skop

Skop tidak hanya untuk menyimpan data - mereka juga dapat berisi metode! Ini adalah tabel 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 mendengarkan suatu peristiwa
$emit()	Mengirimkan suatu peristiwa ke atas melalui hierarki skop
$broadcast()	Mengirimkan suatu 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 mengetikkan di field input - Anda akan melihat pesan diperbarui secara real-time!

Kesimpulan

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

Ingat, skop adalah glue yang menghubungkan aplikasi AngularJS Anda. Itu adalah cara data Anda bergerak 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 bekerja dengan skop secara terus-menerus. Tetapi jangan khawatir - dengan latihan, itu akan menjadi kebiasaan. Sebelum Anda sadari, Anda akan bermain dengan skop seperti seorang pelawak profesional!

Terus coding, terus 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