AngularJS Direktive vs Service vs Controller

Ich bin dabei, eine Änderungsanforderung auf der internen Website meines Unternehmens zu implementieren, die eine Reihe von Feldern überprüft und sie hervorhebt, wenn sie bestimmten Richtlinien entsprechen. Wenn zum Beispiel das Geburtsdatum heute ist, wird dieses Feld umrandet und der Tooltipp lautet "Wünsche ihnen alles Gute zum Geburtstag!".

In den technischen Daten wird verlangt, dass dies geladen wird, nachdem der Rest der Seite gerendert wurde, damit die Ladezeit nicht verlängert wird. Da mir angleJS neu ist, bin ich mir nicht sicher, auf welche Art und Weise dies getan werden sollte.

Probleme:

Da dies das Hinzufügen von Rahmen, Bildern und Titelattributen (DOM-Manipulation) umfasst, sollte ich anscheinend eine Direktive verwenden.

Dies wird jedoch nicht wiederverwendbar oder "kurz" sein, wie es die meisten Richtlinien zu sein scheinen.

Die Hälfte der Daten, die ich überprüfen muss, wird beim Laden der Seite im ursprünglichen Aufruf zurückgegeben. Daher möchte ich diese speichern und keinen weiteren Aufruf vergeuden, um sie erneut abzurufen. Aus diesem Grund denke ich, dass ein Dienst zum Speichern all dieser Daten hilfreich wäre.

Ich weiß, wie man das alles im Controller macht, aber das ist schlecht, schlechter Code: P

Irgendwelche Ideen, wie dies am besten gemacht werden könnte? Grundsätzlich benötige ich einen http-Aufruf, um alle Daten zu überprüfen. Dadurch wird ein Objekt mit bool-Werten für jede Art von Call-Out zurückgegeben, die ich ausführen muss. Dann gehe ich diese Liste durch und füge einen Rahmen, ein Bild und einen QuickInfo-Text hinzu, wenn der Wert wahr ist.

Ich bin mir nicht sicher, ob diese Frage klar genug ist. Wenn Sie also möchten, dass ich einige Details hinzufüge, fragen Sie bitte. Vielen Dank!

Sie haben recht, es gibt viele Möglichkeiten.

Ein Controller ist ein guter Ort, um etwas Neues im Winkel zu schreiben. Durch das Verknüpfen eines Controllers mit einem Markup können Sie die bereits vorhandene Bibliothek mit Anweisungen von angle mit den vorhandenen Diensten von angular verwenden.

Nach kurzer Zeit werden Sie feststellen, dass Ihr Controller zu groß geworden ist. Nun ist es Zeit für eine Umgestaltung. Hier sind die allgemeinen Richtlinien, denen ich normalerweise folge.

• Controller: Controller verknüpfen und verwalten Werte / Funktionen, die an den Bereich $ gebunden sind. Letztendlich tendiert $ scope dazu, stark präsentationsgetrieben zu sein . IE ist ein Ansichtsmodell.
• Dienste: Dienste knüpfen in der Regel an die Infrastruktur, das Backend oder andere Browserfunktionen an
• Direktiven: Mit Direktiven können Sie DOM-Ereignisse / -Funktionen integrieren, die von vorhandenen Handlern nicht verarbeitet werden.

Sie möchten also den Code in eine von drei Richtungen verschieben:

1. Code von meinem Controller ist logischerweise ein weiterer Teil der Präsentationsdaten / -logik und sollte in einen anderen Controller aufgeteilt werden . Beachten Sie beim Arbeiten mit Elementen in $ scope, dass es am besten ist, Teile, für die jeder Controller verantwortlich ist, in seine eigenen Objekte in $ scope zu unterteilen. Zum Beispiel $ scope.creditCard. [Blah] für einen Controller vs $ scope.billingAddress. [Blah] für einen anderen Controller. Dies hilft, Probleme bei der Verwendung der Prototypvererbung in $ scope durch Angle zu vermeiden.

2. Code von meinem Controller ist ein Teil der Anwendungsinfrastruktur oder des Dienstprogramms, der möglicherweise über die App freigegeben werden muss und in einen Dienst aufgeteilt werden sollte

3. Code von meinem Controller ist stark mit der Präsentation / DOM-Organisation befasst und sollte daher in eine eigene Direktive aufgeteilt werden

Ein Beispiel für 1. könnte darin bestehen, die Eingabe / Validierung der Kreditkarte getrennt vom Rest des Zahlungsformulars durchzuführen. In einem Controller würde eine Reihe von Kreditkartenlogiken vorhanden sein, die von der Logik für die Eingabe von Adressen durch Benutzer getrennt sind, sodass es sich um logisch getrennte Controller handelt.

Ein Beispiel für 2 könnte darin bestehen, den Teil, der mit dem Kreditkarten-Backend-Service kommuniziert, zu verschieben, um die Zahlung zu akzeptieren / abzulehnen. Ein anderes Beispiel könnte ein Modul sein, das mit dem Backend kommuniziert, um die API für die Benutzererstellung zu handhaben.

Ein Beispiel für 3 könnte darin bestehen, eine Art Auto-Tab-Funktion zu erstellen, mit der der Cursor zwischen den 4 Bearbeitungsfeldern bewegt wird, nachdem die 4 Zahlen für eine Kreditkarte eingegeben wurden.

Teilen Sie Ihre App entsprechend auf.