Ng-app direktifinin yerleştirilmesi (html vs body)


103

Kısa bir süre önce açısal ile oluşturulmuş bir web uygulamasının kodunu inceledim ng-app="myModule"ve <body>etikete yerleştirilen yönerge ile yazıldığını buldum . Açısal öğrenirken, buradaki , buradaki ve öğreticilerindeki<html> açısal dokümanlar tarafından tavsiye edildiği gibi , sadece etiketinde kullanıldığını gördüm .

Bunu biraz kendi başıma araştırdım ve bir sayfa için birden fazla modül yüklemeyi tartışan SO soruları buldum, özellikle bu ve benzer şekilde bu soru . Ancak, benim durumunda, bu teknik, farklı, bu elemanlar üzerine ng-uygulamasını yerleştirmek içermektedir olarak içinde gövde ve aynı zamanda iki köşeli uygulamalarını çalıştırmak için elle yüklemeyi kullanan.

Anlayabildiğim kadarıyla, ng-appaçık <html>veya üzerinde olan bir uygulama arasında çalışma zamanında hiçbir fark yoktur <body>. Anladığım kadarıyla, ng-appbir açısal uygulamanın kökünü belirtir, bu yüzden onun üzerine yerleştirilmesi açısal kapsamı <body>keser <head>, ancak bunun işleri etkileyeceği büyük bir yol düşünemiyorum. Öyleyse sorum şu: ng-appBu etiketlerden birini diğerinin yerine yerleştirmek arasındaki teknik fark nedir ?

Yanıtlar:


144

Koyduğunuz yerde büyük bir fark yok ng-app.

Eğer onu <body>takarsanız, AngularJS için biraz daha hızlı olan daha küçük bir kapsamınız olur .

Ama ng-appüzerinde <html>manipüle etmek için kullandım <title>.


Cevap için teşekkürler! Bu temelde vardığım sonuç, bu yüzden başkalarının da aynı şekilde düşündüğünü duymak güzel. Tam olarak neden daha hızlı ve ne kadar hızlı olabileceği ile ilgileniyorum, bunu daha fazla açıklayabilir misiniz veya bunu açıklayabilecek referanslarınız var mı?
MattDavis

10
Gerçekten biraz daha hızlı demek istiyorum . Minimal düzeydedir. Daha küçük kapsam, AngularJS'nin direktifleri arayacağı daha az öğe anlamına gelir. Örneğin, Açık Grafik için bir ton meta öğeniz varsa, bunun küçük bir etkisi olabilir.
Haralan Dobrev

12
Başlık. gerçek sebep bu.
ahnbizcad

2
Başlığı değiştirmek için sadece düz javascript kullanırdım.
Sean_A91

3
@ Sean_A91 Ancak sayfanın tamamı AngularJS tarafından yönetiliyorsa, bunun için Angular'ı kullanmak daha mantıklıdır. Sürdürülebilirliği artıran daha tutarlıdır ve başlık modelini sayfa gövdesinde de yeniden kullanabilirsiniz.
Haralan Dobrev

21

Eski bir uygulama üzerinde çalışan bir ekipteydim ve yeni kodu eski koddan ayırmak için sarmalayıcı olarak kullanılan bir div'de ng-app etiketini kullanmayı en iyi şekilde buldum.

Bunu, büyük ölçüde jqGrid ve Dojo'ya dayanan uygulama üzerinde çalışırken keşfettik.

Baş etiketine ng-app eklediğimizde siteyi havaya uçurdu, ancak bir sarmalayıcı kullandığımızda Angular'ı sorunsuz kullanabildik.


14
Bu, Angular için üç kullanım durumu arasında ayrım yaptığım iyi bir örnektir: "tek sayfalı uygulama", "bağımsız" (yani, sayfayı devralır ancak diğer sayfalara normal bağlantılar kullanır) ve "karıştırın" (ör. sayfa). Mixin kullanımını tam olarak tanımladınız ve bu durumda, tamamen mutabık kalınan ng-app, yalnızca mixin'in geçerli olduğu div'de olmalıdır. Bununla birlikte, bağımsız veya SPA kullanımları için <html> üzerinde olması gerektiğini düşünüyorum.
fool4jesus

@ fool4jesus Angular'ın farklı kullanım seçenekleri hakkında herhangi bir makale biliyor musunuz? Tabii ki önerilen SPA sürümü hakkında bir ton var, ancak son zamanlarda jQuery-heavy kod tabanına Angular'ı eklemek zorunda kaldım ve burada başarılı bir şekilde kullanmak ve delirmemek için en iyi seçeneğin ne olduğunu merak ediyordum.
Senthe

Bu biraz zor olabilir @ Senthe. Şüphesiz keşfetmiş olduğunuz gibi, angular kendi DOMaininden sorumlu olmayı sever. Bence bu, sayfanın üst üste binen alanlarıyla ilgili değil, daha çok bu alanın kontrolüyle ilgili. Yani, jquery'yi açısal alanlarda kullanmaya devam edebilirsiniz, ancak açısal kodla başlayın - sayfa zaten var olduğunda kolay değil! Başka bir deyişle, <script> etiketleri arasındaki öğelerin açısal yapılara - denetleyiciler ve yönergelere taşınması gerektiği kadar, gitmesi gereken jquery çağrıları değildir. Bu mantıklı geliyor mu?
fool4jesus

4

AngularJS, bulduğu ilk ng uygulamasını önyükleyecektir! Bu kadar. Birden fazla ng uygulamanız varsa, yalnızca ilkini işleyecektir. Başka herhangi bir öğeyi önyüklemek istiyorsanız, angular.bootstrap () öğesini kullanın.

Ng-app özniteliğinin değeri, aşağıdakiler kullanılarak oluşturulmuş bir modüldür:

angular.module("module_name", [])

Bir modül, diğer programlama dillerinden farklı olarak main () yöntemimiz olmadığından açısal olarak nasıl önyükleneceğini tanımlar. Ng-app değeri boşsa, o zaman varsayılan olarak varsayılan modül olan 'ng'yi kullanır.

Biraz daha hızlı olduğu söyleniyordu çünkü açısal, ng-app'in bulunduğu öğenin içindeki tüm öğeleri işleyecektir. Ancak kısmen biraz şüpheliyim çünkü çok büyük bir DOM'a sahip değilseniz, fark neredeyse hiç fark edilmeyecek.

Burada örnekler istiyorsanız: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.