Adakah yang bisa menjelaskan perbedaan antara $ scope dan $ rootScope?
kupikir
Kita bisa mendapatkan properti model-ng di pengontrol tertentu dari halaman tertentu dengan menggunakan ini.
Kita bisa mendapatkan semua properti model-ng di pengontrol mana pun dari halaman mana pun dengan menggunakan ini.
Apakah ini benar? Atau sesuatu yang lain?
Jawaban:
"$ rootScope" adalah objek induk dari semua objek bersudut "$ scope" yang dibuat di halaman web.
$ scope dibuat dengan ng-controllersementara $ rootscope dibuat dengan ng-app.
Perbedaan utamanya adalah ketersediaan properti yang ditetapkan dengan objek. Properti yang ditetapkan dengan $scopetidak dapat digunakan di luar pengontrol tempat properti didefinisikan sedangkan properti yang ditetapkan dengan$rootScope dapat digunakan di mana saja.
Contoh: Jika dalam contoh di bawah ini Anda mengganti $rootScopedengan $scopeproperti departemen tidak akan diisi dari pengontrol pertama di yang kedua
angular.module('example', [])
.controller('GreetController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}
])
.controller('ListController', ['$scope',
function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="example">
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
</body>Menurut Panduan Pengembang Angular untuk Cakupan :
Setiap aplikasi Angular memiliki tepat satu cakupan root, tetapi mungkin memiliki beberapa cakupan turunan. Aplikasi dapat memiliki beberapa cakupan, karena beberapa perintah membuat cakupan turunan baru (lihat dokumentasi direktif untuk melihat perintah mana yang membuat cakupan baru). Saat cakupan baru dibuat, cakupan tersebut ditambahkan sebagai turunan dari cakupan induknya. Ini membuat struktur pohon yang paralel dengan DOM tempat mereka terpasang.
Baik pengontrol dan arahan memiliki referensi ke ruang lingkup, tetapi tidak untuk satu sama lain. Susunan ini mengisolasi pengontrol dari direktif serta dari DOM. Ini adalah poin penting karena membuat tampilan pengontrol menjadi agnostik, yang sangat meningkatkan kisah pengujian aplikasi.
Dengan cara lain kita bisa melihat ini; $rootScopebersifat global sedangkan $scopebersifat lokal. Ketika Controllerditugaskan ke halaman, jadi $scopevariabel dapat digunakan di sini karena terikat ke pengontrol ini. Tetapi ketika kami ingin membagikan nilainya ke pengontrol atau layanan lain, maka $rootScopedigunakan (** ada cara alternatif, kami dapat berbagi nilai tetapi dalam hal ini kami ingin menggunakannya $rootScope).
Pertanyaan kedua Anda tentang bagaimana Anda mendefinisikan kedua kata itu benar.
Terakhir sedikit keluar jalur, gunakan $rootScopedengan hati-hati. Mirip dengan cara Anda menggunakan variabel global, bisa jadi merepotkan untuk di-debug dan Anda mungkin secara tidak sengaja mengubah variabel global di suatu tempat di dalam pengatur waktu atau sesuatu yang membuat pembacaan Anda salah.
Setiap aplikasi memiliki setidaknya satu rootScope tunggal dan siklus hidupnya sama dengan aplikasi dan setiap pengontrol dapat memiliki cakupannya sendiri, yang tidak dibagikan dengan yang lain.
Lihat artikel ini:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Saya sarankan Anda membaca dokumentasi resmi Angular mendalam untuk cakupannya. Mulailah di bagian 'Hierarki Cakupan':
https://docs.angularjs.org/guide/scope
Pada dasarnya, $ rootScope dan $ scope keduanya mengidentifikasi bagian tertentu dari DOM di dalamnya
Apa pun yang termasuk dalam $ rootScope tersedia secara global di seluruh aplikasi Angular Anda, sedangkan apa pun yang termasuk dalam $ scope tersedia dalam bagian DOM tempat cakupan itu berlaku.
$ RootScope diterapkan ke elemen DOM yang merupakan elemen root untuk aplikasi Angular (oleh karena itu dinamai $ rootScope). Saat Anda menambahkan direktif ng-app ke elemen DOM, ini menjadi elemen root DOM tempat $ rootScope tersedia. Dengan kata lain, properti $ rootScope dll. Akan tersedia di seluruh aplikasi Angular Anda.
Angular $ scope (dan semua variabel dan operasinya) tersedia untuk subset tertentu dari DOM dalam aplikasi Anda. Secara khusus, $ scope untuk kontroler tertentu tersedia untuk bagian DOM di mana kontroler tertentu telah diterapkan (menggunakan direktif ng-controller). Perhatikan juga bahwa arahan tertentu misalnya ng-repeat, ketika diterapkan dalam bagian DOM tempat pengontrol telah diterapkan, dapat membuat cakupan anak dari lingkup utama - dalam pengontrol yang sama - pengontrol tidak harus hanya berisi satu ruang lingkup.
Jika Anda melihat HTML yang dihasilkan saat menjalankan aplikasi Angular, Anda dapat dengan mudah melihat elemen DOM mana yang 'berisi' cakupan, karena Angular menambahkan class ng-scope pada elemen apa pun yang telah diterapkan cakupan (termasuk elemen root dari aplikasi, yang memiliki $ rootScope).
Ngomong-ngomong, tanda '$' di awal $ scope dan $ rootScope hanyalah pengenal di Angular untuk hal-hal yang dicadangkan oleh Angular.
Perhatikan bahwa menggunakan $ rootScope untuk berbagi variabel, dll. Antara modul dan pengontrol umumnya tidak dianggap sebagai praktik terbaik. Pengembang JavaScript berbicara tentang menghindari 'polusi' cakupan global dengan berbagi variabel di sana, karena mungkin akan ada bentrokan nanti jika variabel dengan nama yang sama digunakan di tempat lain, tanpa pengembang menyadarinya sudah dideklarasikan di $ rootScope. Pentingnya hal ini meningkat dengan ukuran aplikasi dan tim yang mengembangkannya. Idealnya, $ rootScope hanya akan berisi konstanta atau variabel statis, yang dimaksudkan untuk selalu konsisten di seluruh aplikasi. Cara yang lebih baik untuk berbagi barang di seluruh modul mungkin menggunakan layanan dan pabrik, yang merupakan topik lain!
Keduanya adalah objek skrip Java dan perbedaannya diilustrasikan dengan diagram seperti di bawah ini.
NTB:
Aplikasi sudut pertama mencoba menemukan properti model atau fungsi apa pun di $ scope, jika tidak menemukan properti di $ scope, maka cari di lingkup induk di hierarki atas. Jika properti masih tidak ditemukan di hierarki atas, maka sudut mencoba menyelesaikan di $ rootscope.
Gaya baru, seperti John Papa's AngularJS Styleguide , menyarankan agar kita tidak menggunakan sama sekali $scopeuntuk menyimpan properti halaman saat ini. Sebagai gantinya kita harus menggunakan controllerAs with vmpendekatan di mana tampilan mengikat objek pengontrol itu sendiri. Kemudian gunakan variabel tangkap untuk ini saat menggunakan sintaks controllerAs. Pilih nama variabel yang konsisten seperti vm, yang merupakan singkatan dari ViewModel.
Anda masih membutuhkan $scopeuntuk kemampuan menontonnya.