2013-04-03 24 views
99

我最近查看了使用angular構建的web應用程序的代碼,發現它是使用<body>標記上的ng-app="myModule"指令編寫的。在學習角度時,我只見過它在<html>標籤上使用,正如角度文檔here,heretutorial所推薦的。ng-app指令的放置(html vs body)

我已經探討了這一點,我自己發現了一些問題,特別是this one和類似this one,討論加載頁面的多個模塊。然而,這種技術與我的情況不同,因爲它涉及將ng-app放置在內部內,並使用手動引導同時運行兩個角度應用程序。

據我所知,在ng-app<html><body>的應用程序在運行時間沒有區別。據我瞭解,ng-app指定角度應用程序的根目錄,所以它在<body>上的位置會將<head>從角度範圍中刪除,但我想不出任何主要方式會影響事情。所以我的問題是:將ng-app放置在這些標記之一而不是其他標記之間的技術區別是什麼?

回答

135

你把ng-app放在哪裏沒有太大的區別。

如果你把它放在<body>那麼你對AngularJS的範圍就小一些,這是稍微加快

但我在<html>上使用ng-app來操作<title>

+0

謝謝你的答案!這基本上是我想要得出的結論,所以很高興聽到其他人也在思考相同的觀點。我感興趣的是爲什麼它的速度更快,速度更快,你能解釋一下,還是你有任何可以說明這一點的參考? – MattDavis

+10

我的意思是__slightly__更快。它是最小的。只有更小的範圍意味着AngularJS查找指令的元素更少。例如,如果您有大量元素用於Open Graph,則可能會產生一些影響。 –

+12

標題。這是真正的原因。 – ahnbizcad

19

我在一個工作在遺留應用程序的團隊中,發現最好在用作封裝的div中使用ng-app標記,以便從遺留代碼中隔離新代碼。

我們在處理嚴重依賴於jqGrid和Dojo的應用程序時發現了這個問題。

當我們將ng-app添加到head標籤時,它將站點炸燬,但是當我們使用包裝時,我們可以使用Angular而不會出現任何問題。

+14

這是一個很好的例子,我區分了Angular的三個用例:「單頁面應用程序」,「獨立」(即接管頁面,但使用普通鏈接到其他頁面)和「mixin」(即只是一點點在頁面上)。你已經準確地描述了mixin的用法,在這種情況下,完全同意的ng-app應該只在mixin適用的div上。但是,對於獨立或SPA用途,我認爲它應該在上。 – fool4jesus

+0

@ fool4jesus你碰巧知道關於Angular的不同使用選項的任何文章嗎?當然,關於推薦的SPA版本有很多,但是最近我不得不將Angular添加到jQuery代碼庫中,並且想知道在成功使用它並且不會發瘋的時候,最好的選擇是什麼。 – Senthe

+0

這可能是一個棘手的@Senthe。正如您毫無疑問地發現的那樣,角色喜歡負責自己的DOMain。我認爲這不是關於頁面的重疊區域,而是更多關於該區域的控制。也就是說,你仍然可以在角度區域使用jquery,但是從角碼開始 - 當頁面已經存在時不容易!換句話說,這不是jQuery的調用,而是

  • 11. PHP imap_search()BODY vs TEXT
  • 12. jQuery問題:body overflow vs body margin
  • 13. $ document.find('body')。eq(0)vs $ document [0] .body
  • 14. 哪裏是放置指令依賴關係的正確位置?
  • 15. 在模板中放置attrs指令。 AngularJS
  • 16. jQuery $('html,body')。not()
  • 17. HTML CSS body autosizing
  • 18. cpu_idle_loop vs halt/wfe/sevl指令
  • 19. 角指令:範圍VS bindToController
  • 20. ruby​​ chef指令:include_attribute vs. include_attributes
  • 21. NGX-翻譯:管VS指令
  • 22. 角2:指令VS管道
  • 23. 角2 HTML指令和屬性指令
  • 24. 放置在另一個指令的link()方法中的指令不會渲染
  • 25. 在body或html中設置背景
  • 26. 創建在使用位置以外插入HTML的指令
  • 27. HTML不角指令
  • 28. apache camel split()vs split(body())
  • 29. 窗口調用函數,onload vs body
  • 30. 在角度指令中放置輔助函數的位置?