AngularJS: ngInclude vs Direktive

Ich verstehe nicht ganz, wann ich eine Direktive verwenden soll und wann es angemessener wäre, nginclude zu verwenden. Nehmen Sie dieses Beispiel: Ich habe einen Teil, password-and-confirm-input-fields.htmldas ist der HTML-Code zum Eingeben und Bestätigen eines Passworts. Ich benutze dies sowohl unter der Anmeldeseite als auch unter der Seite zum Ändern des Passworts. Diese beiden Seiten haben jeweils einen Controller, das teilweise HTML hat keinen dedizierten Controller.

Soll ich die Richtlinie verwenden oder ngIncludedafür?

Es hängt alles davon ab, was Sie von Ihrem Codefragment erwarten. Persönlich, wenn der Code keine Logik hat oder nicht einmal einen Controller benötigt, dann gehe ich mit ngInclude. Normalerweise füge ich große "statischere" HTML-Fragmente hinzu, die die Ansicht hier nicht überladen sollen. (dh: Nehmen wir an, eine große Tabelle, deren Daten ohnehin vom übergeordneten Controller stammen. Es ist sauberer <div ng-include="bigtable.html" />als all diese Zeilen, die die Ansicht überladen.)

Wenn es Logik oder DOM-Manipulation gibt oder wenn Sie möchten, dass sie in verschiedenen Fällen anpassbar ist (auch bekannt als anders rendern), dann directivesist dies die bessere Wahl (sie sind zunächst entmutigend, aber sie sind sehr leistungsfähig, geben Sie ihr Zeit). .

ngInclude

Manchmal werden Sie sehen, ngInclude'sdass von ihrem Äußeren $scope/ betroffen sind interface. Wie zum Beispiel ein großer / komplizierter Repeater. Diese beiden Schnittstellen sind deshalb miteinander verbunden. Wenn sich etwas in der Hauptsache $scopeändert, müssen Sie Ihre Logik innerhalb Ihres eingeschlossenen Teils ändern.

Richtlinien

Auf der anderen Seite, Richtlinien können explizite Tive / controllers / usw. Also , wenn Sie denken an ein Szenario , in dem Sie die Wiederverwendung etwas mehrere Male haben möchten, können Sie sehen , wie würde seine eigenen Rahmen verbunden ist das Leben leichter machen und weniger verwirrend.

Außerdem sollten Sie immer dann, wenn Sie überhaupt mit dem DOM interagieren, eine Direktive verwenden. Dies macht es besser zum Testen und entkoppelt diese Aktionen von einem Controller / Service / etc, was Sie wollen!

Tipp: Stellen Sie sicher, dass Sie nicht einschränken: 'E' verwenden, wenn Sie sich für IE8 interessieren! Es gibt Möglichkeiten, dies zu umgehen, aber sie sind ärgerlich. Machen Sie einfach das Leben leichter und bleiben Sie bei Attribut / etc.<div my-directive />

Komponenten [Update 01.03.2016]

In Angular 1.5 hinzugefügt, handelt es sich im Wesentlichen um einen Wrapper .directve(). Die Komponente sollte die meiste Zeit verwendet werden. Es entfernt viel Code von Boilerplate-Anweisungen, indem standardmäßig Dinge wie verwendet werden restrict: 'E', scope : {}, bindToController: true. Ich empfehle dringend, diese für fast alles in Ihrer App zu verwenden, um einfacher auf Angular2 umsteigen zu können.

Abschließend:

Sie sollten die meiste Zeit Komponenten und Richtlinien erstellen .

• Erweiterbarer
• Sie können Ihre Datei extern vorlegen und haben (wie ngInclude).
• Sie können den übergeordneten Bereich oder einen eigenen isolierten Bereich innerhalb der Direktive verwenden.
• Bessere Wiederverwendung in Ihrer gesamten Anwendung

Update 01.03.2016

Jetzt, da Angular 2 langsam fertig ist und wir das allgemeine Format kennen (natürlich wird es hier und da noch einige Änderungen geben), wollte ich nur hinzufügen, wie wichtig es ist components(manchmal Anweisungen, wenn Sie sie einschränken müssen: ' E 'zum Beispiel).

Komponenten sind Angular 2 sehr ähnlich@Component . Auf diese Weise kapseln wir Logik und HTML im selben Bereich.

Stellen Sie sicher, dass Sie so viele Dinge wie möglich in Komponenten einkapseln. Dies erleichtert den Übergang zu Angular 2 erheblich! (Wenn Sie sich für den Übergang entscheiden)

Hier ist ein schöner Artikel, der diesen Migrationsprozess beschreibt directives(sehr ähnlich, wenn Sie natürlich Komponenten verwenden würden): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/