2016-07-13 15 views
19

Ich finde es schwierig, den wahren Unterschied zwischen Komponenten und Direktiven zu verstehen. Ich verstehe jetzt, dass Komponenten ein viel einfacheres Konzept sind.Angular 1.5: Richtlinien gegen Komponenten?

Wenn Sie das bedenken, gibt es dann einen Grund, weiterhin die Richtlinien zu verwenden, wenn Sie angular 1.5 verwenden?

Vielleicht fehlt mir hier der reale Kontext, aber es scheint, dass Komponenten eine einfachere API bieten.

Also welchen Grund hätte ich weiterhin eine Direktive zu verwenden?

Angular 2 gibt an, dass alles eine Komponente ist, so dass eine einfache Migration von 1.5 auf 2 möglich ist, wäre es nicht sinnvoll, nur noch Komponenten zu verwenden?

In der Vergangenheit habe ich Direktiven zum Erstellen, zum Beispiel, ein Auto-Lookup-Textfeld verwendet, gibt es keinen Grund, warum ich dies jetzt nicht innerhalb einer Komponente richtig machen sollte? Und dann kann ich diese Komponente in anderen von mir erstellten Komponenten wiederverwenden?

Ich würde wirklich schätzen, wenn jemand bestätigen kann, was ich tun sollte und den empfohlenen Weg vorwärts.

Dank

Antwort

24

nur den Winkel docs kopieren, da sie es in der besten Art und Weise setzen i

denken kann

Legendes Komponenten

In Angular ist eine Komponente eine besondere Art von Richtlinie, die eine einfachere Konfiguration verwendet, die für eine komponentenbasierte Anwendungsstruktur geeignet ist.

Dies macht es einfacher, eine App so zu schreiben, als ob sie Web Components verwendet oder die Anwendungsarchitektur von Angular 2 verwendet.

Vorteile der Komponenten:

  • einfachere Konfiguration als einfache Richtlinien
  • vernünftige Vorgaben und Best Practices fördern
  • für komponentenbasierte Architektur
  • Schreibkomponente optimiert Richtlinien wird es leichter aktualisieren zu Winkel 2

Wenn n ot zu Komponenten verwenden:

  • für Richtlinien, die auf DOM-Manipulation verlassen, das Hinzufügen Ereignis-Listener etc, weil die Kompilierung und Verknüpfungsfunktionen nicht verfügbar sind
  • wenn Sie erweiterte Richtlinie Definition Optionen wie Priorität benötigen, Terminal, multi -elementigen
  • , wenn Sie eine Richtlinie mögen, die durch ein Attribut oder CSS Klasse ausgelöst wird, sondern als ein Element

mehr Lesung: https://docs.angularjs.org/guide/component

+0

wäre es toll gewesen, wenn du die Unterschiede erwähnt hättest :) –

0

Komponenten sind im Grunde nur eine neue Art von Richtlinie, die für komponentenbasierte Architektur entwickelt wurde. In vielerlei Hinsicht sind Komponenten in ihrer Funktionalität eingeschränkter, stattdessen werden bessere Konventionen und Designs gefördert, die zu mehr wartbarem und wiederverwendbarem Code führen.

Zum Beispiel erzwingen Komponenten einen isolierten Bereich und fördern die Bindung in eine Richtung stark. Warum ist das wichtig? Dadurch wird die Komponente besser gekapselt und Sie werden davon abgehalten, Komponenten zu erstellen, die eng mit dem übergeordneten Element oder dem Bereich verbunden sind. Dies bedeutet, dass Sie die Komponente so schreiben, dass Sie in der Zukunft wahrscheinlich ohne Änderungen wiederverwenden können (anstelle von Copy-and-Paste-Wiederverwendung, wie es viele tun). Dies erleichtert auch die Verfolgung und Steuerung von Interaktionen und Änderungen an Daten.

Die Komponente kann immer noch mit dem übergeordneten Bereich interagieren, dies geschieht jedoch durch Rückrufe, die an Komponentenereignisse gebunden sind. Diese Einschränkung zwingt oder ermutigt zumindest das Software-Design, das die Wiederverwendung der Komponente erleichtert und die Interaktion der Komponente mit dem übergeordneten Bereich und externen Elementen erfasst.

Komponenten können mit der Methode component() eines AngularJS-Moduls registriert werden (zurückgegeben von angular.module()). Die Methode benötigt zwei Argumente:

1) Der Name der Komponente (als String).

2) Das Komponenten-Konfigurationsobjekt. (Beachten Sie, dass im Gegensatz zu der .directive() Methode, diese Methode nicht eine Fabrik-Funktion nicht übernehmen.)

// für eine Richtlinie

module.directive (Namen, fn);

// für Komponente

Modul.Komponente (Name, Optionen);

Verwandte Themen