Penempatan direktif ng-app (html vs body)

103

Saya baru-baru ini meninjau kode untuk aplikasi web yang dibuat dengan sudut dan menemukan bahwa itu ditulis dengan ng-app="myModule"arahan yang ditempatkan pada <body>tag. Saat mempelajari angular, saya hanya pernah melihatnya digunakan di <html>tag, seperti yang direkomendasikan oleh dokumen angular di sini , di sini , dan di tutorial mereka .

Saya telah menjelajahi ini sedikit sendiri dan menemukan pertanyaan SO, terutama yang ini dan juga yang ini , yang membahas memuat banyak modul untuk satu halaman. Namun, teknik ini berbeda dari kasus saya, karena melibatkan penempatan ng-app pada elemen di dalam tubuh dan menggunakan bootstrap manual untuk menjalankan dua aplikasi sudut secara bersamaan.

Sejauh yang saya tahu, tidak ada perbedaan saat runtime antara aplikasi dengan ng-appon <html>atau <body>. Seperti yang saya pahami, ng-appmenunjukkan root dari aplikasi sudut, jadi penempatannya di <body>akan memotong <head>cakupan sudut, tetapi saya tidak dapat memikirkan cara utama yang akan memengaruhi banyak hal. Jadi pertanyaan saya adalah: Apa perbedaan teknis antara menempatkan ng-apppada salah satu tag ini daripada yang lain?

angularjs

— MattDavis
sumber

Jawaban:

144

Tidak ada perbedaan besar di mana Anda meletakkan ng-app.

Jika Anda memakainya <body>maka Anda memiliki ruang lingkup yang lebih kecil untuk AngularJS yang sedikit lebih cepat.

Tapi aku telah menggunakan ng-apppada <html>untuk memanipulasi <title>.

— Haralan Dobrev
sumber

Terima kasih atas jawabannya! Ini pada dasarnya adalah kesimpulan yang akan saya dapatkan, jadi senang mendengar bahwa orang lain berpikir dengan cara yang sama. Saya tertarik pada mengapa ini lebih cepat dan seberapa cepat bisa, apakah Anda dapat menjelaskan lebih banyak atau apakah Anda memiliki referensi yang dapat menggambarkan ini?

— MattDavis

Maksudku sedikit lebih cepat. Ini minimal. Cakupan yang lebih kecil berarti lebih sedikit elemen di mana AngularJS mencari arahan. Jika Anda memiliki banyak elemen meta untuk Open Graph misalnya, itu bisa berdampak kecil.

— Haralan Dobrev

judul. itulah alasan sebenarnya.

— ahnbizcad

Saya hanya akan menggunakan javascript biasa untuk mengubah judul.

— Sean_A91

@ Sean_A91 jika bagaimanapun Anda memiliki seluruh halaman yang dijalankan oleh AngularJS, lebih masuk akal untuk menggunakan Angular untuk itu. Ini lebih konsisten yang meningkatkan pemeliharaan dan Anda dapat menggunakan kembali model judul di badan halaman juga.

— Haralan Dobrev

Saya berada di tim yang mengerjakan aplikasi lama dan merasa paling baik menggunakan tag ng-app di div yang digunakan sebagai pembungkus untuk memisahkan kode baru dari kode lama.

Kami menemukan ini saat mengerjakan aplikasi yang sangat bergantung pada jqGrid dan Dojo.

Saat kami menambahkan ng-app ke tag head, itu meledakkan situs, tetapi saat kami menggunakan pembungkus, kami dapat menggunakan Angular tanpa masalah.

— Peter Drinnan
sumber

Ini adalah contoh yang baik di mana saya membedakan antara tiga kasus penggunaan untuk Angular: "aplikasi satu halaman", "mandiri" (yaitu mengambil alih halaman tetapi menggunakan link normal ke halaman lain), dan "mixin" (yaitu hanya sedikit halaman). Anda telah menjelaskan dengan tepat penggunaan mixin dan dalam hal ini, ng-app yang sepenuhnya disetujui harus hanya pada div tempat mixin berlaku. Namun, untuk penggunaan standalone atau SPA, menurut saya harus ada di <html>.

— fool4jesus

@ Fool4jesus Apakah Anda mengetahui artikel tentang opsi penggunaan yang berbeda untuk Angular? Tentu saja ada banyak sekali versi SPA yang direkomendasikan, tetapi baru-baru ini saya harus menambahkan Angular ke basis kode jQuery-heavy dan bertanya-tanya apa pilihan terbaik di sini untuk menggunakannya dengan sukses dan tidak menjadi gila.

— Senthe

Itu bisa jadi hal yang rumit @Senthe. Seperti yang tidak diragukan lagi, angular suka bertanggung jawab atas DOMainnya sendiri. Saya pikir ini bukan tentang area halaman yang tumpang tindih dan lebih banyak tentang kontrol area itu. Artinya, Anda masih dapat menggunakan jquery di area sudut, tetapi mulai dengan kode sudut - tidak mudah jika halaman tersebut sudah ada! Dengan kata lain, bukan panggilan jquery yang harus pergi, sebanyak hal-hal di antara tag <script> harus pindah ke konstruksi bersudut - pengontrol dan arahan. Apakah itu masuk akal?

— Fool4jesus

AngularJS akan melakukan bootstrap pada aplikasi ng pertama yang ditemukannya! Itu dia. Jika Anda memiliki lebih dari satu ng-app, itu hanya akan memproses yang pertama. Jika Anda ingin mem-bootstrap elemen lain, gunakan angular.bootstrap ()

Nilai atribut ng-app adalah modul yang dibuat menggunakan:

angular.module("module_name", [])

Sebuah modul mendefinisikan bagaimana angular akan di-bootstrap karena kita tidak memiliki metode main () tidak seperti bahasa pemrograman lainnya. Jika nilai ng-app kosong, maka secara default menggunakan 'ng', modul default.

Dikatakan sedikit lebih cepat karena angular akan memproses semua elemen di dalam elemen tempat ng-app berada. Tapi saya ragu sedikit karena perbedaannya hampir tidak terlihat sama sekali, kecuali Anda memiliki DOM yang sangat besar.

Jika Anda menginginkan contoh di sini: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— Noypi Gilas
sumber