Platzierung der ng-app-Direktive (html vs body)

103

Ich habe kürzlich den Code für eine mit eckig erstellte Webanwendung überprüft und festgestellt, dass er mit der ng-app="myModule"auf dem <body>Tag platzierten Direktive geschrieben wurde . Beim Lernen von Angular habe ich nur gesehen, dass es auf dem <html>Tag verwendet wird, wie in den Angular-Dokumenten hier , hier und in ihrem Tutorial empfohlen .

Ich habe das ein bisschen erkundet auf eigene Faust und fand SO Fragen, vor allem diese ein und in ähnlicher Weise diese ein , die für eine Seite mehrere Module diskutieren geladen. Diese Technik unterscheidet sich jedoch von meinem Fall, da ng-app auf Elementen im Körper platziert und manuelles Bootstrapping verwendet wird, um zwei eckige Apps gleichzeitig auszuführen.

Soweit ich das beurteilen kann, gibt es zur Laufzeit keinen Unterschied zwischen einer App mit ng-appon <html>oder <body>. Wie ich es verstehe, ng-appbezeichnet die Wurzel einer Winkel Anwendung, so dass die Platzierung auf der von ihm <body>abschneiden würde <head>der Winkel des Oszilloskops, aber ich kann von jeder größeren Art und Weise nicht , dass dies die Dinge beeinflussen würde. Meine Frage lautet also: Was ist der technische Unterschied zwischen dem Platzieren ng-appauf einem dieser Tags anstelle des anderen?

angularjs MattDavis
quelle

Antworten:

144

Es gibt keinen großen Unterschied, wo Sie setzen ng-app.

Wenn Sie es <body>anziehen, haben Sie einen kleineren Bereich für AngularJS, der etwas schneller ist.

Aber ich habe ng-appdas <html>zum Manipulieren benutzt <title>.

Haralan Dobrev
quelle

Danke für die Antwort! Dies ist im Grunde die Schlussfolgerung, zu der ich gekommen bin. Es ist also gut zu hören, dass andere in die gleiche Richtung denken. Ich bin genau daran interessiert, warum es schneller ist und wie viel schneller es sein könnte. Können Sie das mehr erklären oder haben Sie Referenzen, die dies veranschaulichen können?

MattDavis

Ich meine wirklich etwas schneller. Es ist minimal. Nur ein kleinerer Umfang bedeutet weniger Elemente, in denen AngularJS nach Anweisungen suchen muss. Wenn Sie beispielsweise eine Menge Metaelemente für Open Graph haben, kann dies nur geringe Auswirkungen haben.

Haralan Dobrev

Titel. Das ist der wahre Grund.

Ahnbizcad

Ich würde einfach nur Javascript verwenden, um den Titel zu ändern.

Sean_A91

@ Sean_A91 Wenn Sie jedoch die gesamte Seite von AngularJS ausführen lassen, ist es sinnvoller, Angular dafür zu verwenden. Es ist konsistenter, was die Wartbarkeit erhöht, und Sie können das Titelmodell auch im Seitenkörper wiederverwenden.

Haralan Dobrev

Ich war in einem Team, das an einer Legacy-App arbeitete, und fand es am besten, das ng-app-Tag in einem div zu verwenden, das als Wrapper verwendet wird, um neuen Code vom Legacy-Code zu isolieren.

Wir haben dies bei der Arbeit an der App entdeckt, die sich stark auf jqGrid und Dojo stützte.

Als wir dem Head-Tag ng-app hinzugefügt haben, hat es die Site in die Luft gesprengt, aber wenn wir einen Wrapper verwendet haben, konnten wir Angular ohne Probleme verwenden.

Peter Drinnan
quelle

Dies ist ein gutes Beispiel dafür, wo ich zwischen drei Anwendungsfällen für Angular unterscheide: "Single-Page-App", "Standalone" (dh übernimmt die Seite, verwendet aber normale Links zu anderen Seiten) und "Mixin" (dh nur ein kleines bisschen weiter) Die Seite). Sie haben die Verwendung des Mixins genau beschrieben und in diesem Fall sollte sich die vollständig vereinbarte ng-App nur auf dem Div befinden, auf dem das Mixin angewendet wird. Für Standalone- oder SPA-Anwendungen sollte es jedoch auf der <html> stehen.

narr4jesus

@ narr4jesus Kennen Sie zufällig Artikel über verschiedene Verwendungsoptionen für Angular? Natürlich gibt es eine Menge über die empfohlene SPA-Version, aber kürzlich musste ich Angular zur jQuery-lastigen Codebasis hinzufügen und fragte mich, was hier die beste Option ist, um sie mit Erfolg zu verwenden und nicht verrückt zu werden.

Senthe

Das kann schwierig sein @Senthe. Wie Sie zweifellos festgestellt haben, ist Angular gerne für seine eigene DOMain verantwortlich. Ich denke, es geht weniger um überlappende Bereiche der Seite als vielmehr um die Kontrolle dieses Bereichs. Das heißt, Sie können die Abfrage weiterhin in den Winkelbereichen verwenden, aber mit dem Winkelcode beginnen - nicht einfach, wenn die Seite bereits vorhanden ist! Mit anderen Worten, es sind nicht die jquery-Aufrufe, die ausgeführt werden müssen, sondern vielmehr das Material zwischen den <script> -Tags, das in eckige Konstrukte verschoben werden muss - Controller und Direktiven. Macht das irgendeinen Sinn?

narr4jesus

AngularJS bootet die erste ng-App, die es findet! Das ist es. Wenn Sie mehr als eine ng-App haben, wird nur die erste verarbeitet. Wenn Sie ein anderes Element booten möchten, verwenden Sie angle.bootstrap ()

Der Wert des Attributs ng-app ist ein Modul, das erstellt wurde mit:

angular.module("module_name", [])

Ein Modul definiert, wie eckig gebootet wird, da wir im Gegensatz zu anderen Programmiersprachen keine main () -Methode haben. Wenn der Wert von ng-app leer ist, wird standardmäßig das Standardmodul 'ng' verwendet.

Es soll etwas schneller sein, da Angular alle Elemente innerhalb des Elements verarbeitet, in dem sich ng-app befand. Aber ich bezweifle ein wenig, weil der Unterschied kaum spürbar sein wird, es sei denn, Sie haben ein sehr sehr sperriges DOM.

Wenn Sie Beispiele hier wünschen: http://noypi-linux.blogspot.com/2014/07/angularjs-tutorials-understanding.html

Noypi Gilas
quelle