Apa itu $ Scope di AngularJS? Tutorial dengan Contoh

Daftar Isi:

Anonim

Apa itu $ scope di AngularJS?

$ scope di AngularJS adalah objek bawaan yang pada dasarnya mengikat "controller" dan "view". Seseorang dapat mendefinisikan variabel anggota dalam ruang lingkup di dalam pengontrol yang kemudian dapat diakses oleh tampilan.

Perhatikan contoh di bawah ini:

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

Penjelasan Kode:

  1. Nama modulnya adalah "app"
  2. Nama pengontrolnya adalah "HelloWorldCntrl"
  3. Objek Scope adalah objek utama yang digunakan untuk meneruskan informasi dari pengontrol ke tampilan.
  4. Variabel anggota ditambahkan ke objek cakupan

Menyiapkan atau menambahkan Behavior

Untuk bereaksi terhadap kejadian atau mengeksekusi semacam komputasi / pemrosesan di View, kita harus menyediakan perilaku ke ruang lingkup.

Perilaku ditambahkan ke objek lingkup untuk menanggapi peristiwa tertentu yang mungkin dipicu oleh View. Setelah perilaku didefinisikan di pengontrol, itu dapat diakses oleh tampilan.

Mari kita lihat contoh bagaimana kita bisa mencapai ini.

Guru99

Guru99 Global Event


{{fullName("Guru","99")}}

Penjelasan Kode:

  1. Kami menciptakan perilaku yang disebut "fullName". Perilaku ini adalah fungsi yang menerima 2 parameter (firstName, lastname).
  2. Perilaku tersebut kemudian mengembalikan penggabungan dari 2 parameter ini.
  3. Dalam pandangan kita memanggil perilaku dan menyampaikan 2 nilai "Guru" dan "99" yang diteruskan sebagai parameter perilaku.

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

Keluaran:

Di browser Anda akan melihat rangkaian nilai Guru & 99 yang diteruskan ke perilaku di pengontrol.

Ringkasan

  • Berbagai variabel anggota dapat ditambahkan ke objek lingkup 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 seluruh aplikasi. Sebuah aplikasi hanya dapat memiliki satu $ rootScope dan digunakan seperti variabel global. Dalam Angular JS $ lingkup adalah lingkup anak dan $ rootScope adalah lingkup induk