Ketika kami menulis aplikasi AngularJS, sangat menantang untuk mendapatkan data (data) dan layanan yang disembunyikan dalam aplikasi melalui konsol JavaScript Chrome, Firefox, dan IE. Berikut adalah beberapa tips sederhana yang dapat membantu kita menggunakan konsol JavaScript untuk memantau dan mengontrol aplikasi sudut yang sedang berjalan, membuatnya lebih mudah untuk menguji, memodifikasi, atau bahkan menulis aplikasi sudut secara real time.
1: Dapatkan lingkup (lingkup)
Kita dapat menggunakan baris kode JS untuk mendapatkan ruang lingkup (atau bahkan lingkup yang terisolasi):
Salin kode sebagai berikut:> Angular.element (TargetNode) .scope ()
-> Childscope {$ ID: "005", this: childscope, $$ listeners: objek, $$ listenercount: objek, $ parent: scope…}
Atau mendapatkan lingkup yang terisolasi:
Salin kode sebagai berikut:> Angular.element (TargetNode) .isolatesCope ()
-> SCOPE {$ ID: "009", $$ Childtail: Childscope, $$ Childhead: Childscope, $$ ACVICIBLING: Childscope, $$ NextSibling: SCOPE ...}
TargetNode di sini mengacu pada node HTML (node html). Anda dapat dengan mudah menggunakan Document.QuerySelector () untuk mendapatkannya.
2: Pohon lingkup monitor (pohon lingkup)
Untuk men -debug aplikasi kita dengan lebih baik, kadang -kadang kita perlu memeriksa struktur ruang lingkup (lingkup) pada halaman. Saat ini, kita perlu menggunakan angularjs
Baratang dan NG-Inspector adalah dua ekstensi browser chrome untuk membantu kita melihat ruang lingkup secara real time. Dan, kedua ekstensi ini memiliki beberapa fitur lain yang sangat berguna.
(1) .angularjs baratang
(2) .ng-Inspector
3: Layanan Perayapan (Layanan)
Kami dapat menggunakan fungsi injektor yang mendefinisikan elemen NGAPP untuk mengambil layanan apa pun (Layanan) atau secara tidak langsung mendapatkan layanan (Layanan) melalui elemen apa pun dengan kelas NG-SCOPE.
Salin kode sebagai berikut:> angular.element (document.queryselector ('html')). Injector (). Get ('myservice')
-> objek {undo: function, redo: function, _pushaction: function, newDocument: function, init: function…}
// atau sedikit lebih umum
> angular.element (document.queryselector ('. ng-scope')). injector (). get ('myservice')
Selanjutnya kita dapat menggunakan layanan terkait seperti yang kita lakukan setelah disuntikkan dalam program.
4: Dapatkan pengontrol dari arahan
Ada arahan (instruksi) yang mendefinisikan fungsi tertentu (biasanya umum) sebagai pengontrol. Untuk mendapatkan contoh pengontrol dengan arahan tertentu dari konsol, kita hanya perlu menggunakan fungsi controller ().
Salin kode sebagai berikut:> angular.element ('my-pages'). Controller ()
-> konstruktor {}
Yang terakhir tidak umum digunakan tetapi merupakan teknik yang lebih canggih.
5: Fitur Konsol Chrome (Konsol)
Chrome memiliki banyak perintah pintasan yang sangat berguna untuk men -debug aplikasi web di konsol (konsol). Berikut adalah beberapa perintah yang paling bermanfaat untuk pengembangan sudut:
$ 0 - $ 4: Dapatkan 5 elemen DOM terakhir di jendela Inspotor (monitor). Metode jalan pintas ini dapat membantu kita mengambil lingkup (lingkup) dari elemen yang dipilih: Angular.element ($ 0) .scope ()
$ (pemilih) dan $$ (pemilih): Ini dapat dengan mudah menggantikan QuerySelector () dan QuerySelectorAll.
Terima kasih @zgohr untuk tip ini!
Meringkaskan
Dengan tips sederhana ini, kita bisa mendapatkan data dalam ruang lingkup apa pun, memantau hierarki ruang lingkup, layanan suntikan, dan arahan kontrol.
Jadi lain kali, ketika Anda ingin melakukan beberapa penyetelan, memeriksa kode, atau mengontrol aplikasi AngularJS dari konsol, saya harap Anda dapat mengingat tips seperti saya dan menggunakannya lebih banyak.
Untuk melihat lebih banyak sintaks AngularJS, Anda dapat mengikuti: Versi Bahasa Inggris Manual Referensi AngularJS, dan saya harap semua orang akan mendukung Wulin.com lebih lanjut.