Posizionamento della direttiva ng-app (html vs body)

103

Recentemente ho esaminato il codice per una webapp costruita con angular e ho scoperto che era scritto con la ng-app="myModule"direttiva posta sul <body>tag. Durante l'apprendimento angolare, l'ho visto solo e sempre usato sul <html>tag, come raccomandato dai documenti angolari qui , qui e nel loro tutorial .

L'ho esplorato un po 'da solo e ho trovato domande SO, in particolare questa e analogamente questa , che parlano del caricamento di più moduli per una pagina. Tuttavia, questa tecnica è diversa dal mio caso, in quanto prevede il posizionamento di ng-app su elementi all'interno del corpo e l'utilizzo del bootstrap manuale per eseguire due app angolari contemporaneamente.

Per quanto posso dire, non c'è alcuna differenza in fase di esecuzione tra un app con ng-appil <html>o <body>. A quanto ho capito, ng-appdesigna la radice di un'applicazione angolare, quindi il posizionamento di esso sull'ottica <body>sarebbe tagliato <head>fuori dall'ambito angolare, ma non riesco a pensare a un modo importante in cui questo influirebbe sulle cose. Quindi la mia domanda è: qual è la differenza tecnica tra il posizionamento ng-appsu uno di questi tag anziché sull'altro?

angularjs

— MattDavis
fonte

Risposte:

144

Non c'è grande differenza dove metti ng-app.

Se lo indossi, <body>hai un ambito più piccolo per AngularJS che è leggermente più veloce.

Ma ho usato ng-appsul <html>per manipolare il <title>.

— Haralan Dobrev
fonte

Grazie per la risposta! Questa è fondamentalmente la conclusione a cui sono arrivato, quindi è bello sentire che gli altri pensano sulla stessa linea. Mi interessa esattamente perché è più veloce e quanto potrebbe essere più veloce, sei in grado di spiegarlo di più o hai qualche riferimento che possa illustrarlo?

— MattDavis

Intendo davvero leggermente più veloce. È minimo. Solo un ambito più piccolo significa meno elementi in cui AngularJS cerca le direttive. Se hai un sacco di meta elementi per Open Graph, ad esempio, potrebbe avere un piccolo impatto.

— Haralan Dobrev

titolo. questa è la vera ragione.

— ahnbizcad

Vorrei solo usare javascript semplice per cambiare il titolo.

— Sean_A91

@ Sean_A91 se tuttavia hai l'intera pagina gestita da AngularJS, ha più senso usare Angular per quello. È più coerente, il che aumenta la manutenibilità e puoi riutilizzare il modello del titolo anche nel corpo della pagina.

— Haralan Dobrev

Facevo parte di un team che lavorava su un'app legacy e ho trovato che fosse meglio utilizzare il tag ng-app in un div che viene utilizzato come wrapper per isolare il nuovo codice dal codice legacy.

L'abbiamo scoperto mentre lavoravamo sull'app che faceva molto affidamento su jqGrid e Dojo.

Quando abbiamo aggiunto ng-app al tag head, il sito è esploso, ma quando abbiamo utilizzato un wrapper potevamo usare Angular senza problemi.

— Peter Drinnan
fonte

Questo è un buon esempio di dove distinguo tra tre casi d'uso per Angular: "app a pagina singola", "standalone" (cioè prende il controllo della pagina ma usa collegamenti normali ad altre pagine) e "mixin" (cioè solo un po 'su la pagina). Hai descritto esattamente l'utilizzo del mixin e in tal caso, ng-app totalmente concordato dovrebbe essere solo sul div in cui si applica il mixin. Tuttavia, per utilizzi standalone o SPA, penso che dovrebbe essere su <html>.

— fool4jesus

@ fool4jesus Conosci qualche articolo sulle diverse opzioni di utilizzo di Angular? Ovviamente c'è un sacco di versioni SPA consigliate, ma recentemente ho dovuto aggiungere Angular al codebase jQuery e mi chiedevo quale fosse l'opzione migliore qui per usarlo con successo e non impazzire.

— Senthe

Può essere complicato @Senthe. Come hai scoperto senza dubbio, ad Angular piace essere responsabile del proprio DOMain. Penso che si tratti meno della sovrapposizione di aree della pagina e più del controllo di quell'area. Cioè, puoi ancora usare il jquery nelle aree angolari, ma inizia con il codice angolare - non è facile quando la pagina esiste già! In altre parole, non sono le chiamate jquery che devono essere eseguite, tanto quanto le cose tra i tag <script> devono spostarsi in costrutti angolari: controller e direttive. Ha senso?

— fool4jesus

AngularJS eseguirà il bootstrap della prima app ng che trova! Questo è tutto. Se hai più di un'app ng, elaborerà solo la prima. Se vuoi eseguire il bootstrap di qualsiasi altro elemento usa angular.bootstrap ()

Il valore dell'attributo ng-app è un modulo che è stato creato utilizzando:

angular.module("module_name", [])

Un modulo definisce come angular verrà avviato con il bootstrap perché non abbiamo un metodo main () a differenza di altri linguaggi di programmazione. Se il valore di ng-app è vuoto, utilizza per impostazione predefinita "ng", il modulo predefinito.

Si diceva che fosse leggermente più veloce perché angular elaborerà tutti gli elementi all'interno dell'elemento in cui si trovava ng-app. Ma dubito leggermente in parte perché la differenza sarà appena percettibile, a meno che tu non abbia un DOM molto molto ingombrante.

Se vuoi esempi qui: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

— Noypi Gilas
fonte