JavaScript AngularJS - View mit unterschiedlicher Darstellung

[marcOcram]

// EDIT: Sorry, jetzt hab ich vergessen den Titel anzupassen "AngularJS - View mit unterschiedlicher Darstellung"

Moin,

ich bin momentan dabei mich für ein laufendes Projekt in AngularJS (1.6.x) reinzufuchsen. Dabei stellt sich mir die Frage wie ich folgendes Problem am elegantesten lösen könnte und was der von AngularJS eigentlich vorgesehene Weg dafür ist.

Ich habe eine View mit einer Tabelle und pro Zeile können drei verschiedene Buttons (A, B & C) angezeigt werden. Diese View möchte ich auf unterschiedlichen Seiten anzeigen. Soweit kein Problem. Nun möchte ich, dass auf Seite 1 die Tabelle ohne Buttons, auf Seite 2 die Tabelle mit Buttons A und B und auf Seite 3 nur mit dem Button C angezeigt wird. Da ich den Code nicht drölf Mal wiederholen möchte, möchte ich das möglichst weit kapseln.

Die erste Idee war, dass ich mir eine Directive erstelle welche ich über Attribute konfigurieren kann. Dort würde der Controller alle Funktionalitäten kennen, in der View würde aber nur die gewünschte Funktionalität angezeigt werden.

<div id="page1">
    <my-table></my-table>
</div>
<div id="page2">
    <my-table includeA="true" includeB="true"></my-table>
</div>
<div id="page3">
    <my-table includeC="true"></my-table>
</div>

Andere Idee wäre, dass die View alles beinhaltet und nicht konfigurierbar ist. Dafür aber je nach Anwendungsfall einen Controller schreibe, welcher vom tableController erbt und die gewünschte Funktionalität für die Buttons erweitert. Im tableController wäre dann standardmäßig keine Funktionalität für A, B und C vorgesehen. Die spezifischen Controller können die Funktionalität dann überschreiben und somit aktivieren.

<div id="page1" ng-controller="tableController">
    <my-table></my-table>
</div>
<div id="page2" ng-controller="tablecontrollerWithA_B">
    <my-table></my-table>
</div>
<div id="page3" ng-controller="tablecontrollerWithC">
    <my-table></my-table>
</div>

Gibt es noch einen anderen (besseren) Weg wie man das lösen könnte?
Besten Dank!

 

[Nafi]

Ich würde die Variante mit der Direktive nehmen Oder alternativ auch eine Komponente

 

[benneq]

Oder einfach ganz stumpf ein Attribut / Binding an my-table übergeben, womit sich die Komponente per JSON konfigurieren lässt. Macht keinen wirklichen Unterschied zu deiner Variante mit den extra Direktiven, aber man muss halt keine extra Direktiven schreiben. Hängt natürlich davon ab, wie Spezialisiert deine Table Komponente sein soll.

Den ng-controller und Parent Scope Kram solltest du auf jeden Fall nicht mehr nutzen. Das führt zu extrem unleserlichen Code bzw. zu sehr verstreuter Logik, in die sich nach einem Jahr niemand mehr einarbeiten will

EDIT: Es gibt natürlich auch noch einen anderen Weg: Transclusion. Ist in diesem Fall sicherlich ziemlich umständlich, aber möglich wäre es bestimmt. Sieht dann so aus:

<my-table>
  <kram-der-dargestellt-werden-soll-als-komponente></kram-der-dargestellt-werden-soll-als-komponente>
</my-table>

 

[Sithys]

Ich würd erstmal gucken, dass ich das Projekt langsam auf Angular > JS umstelle... das ist doch seit Jahren „alt“. Und dann wie @benneque geschrieben hat -> Komponenten.

 

[benneq]

@RedGunPanda Leider ist das nicht immer so einfach. ng-upgrade funktioniert nur einfach, wenn die AngularJS Applikation auch sauber geschrieben ist.
Ich sitze hier auch seit Jahren auf einer AngularJS 1.7 Anwendung. Da sind teilweise richtig perverse Direktiven drin, die sich nicht so einfach refactoren lassen. Da gab's schon mehrere Anläufe, die gescheitert sind.
Und es gibt keine sauberen Abhängigkeiten zwischen den Modulen. In AngularJS haben die Module ja keinen wirklichen Zweck und man kann trotzdem alles überall benutzen.
Dazu kommt noch, dass es an einigen Stellen HTML Seiten vom Backend geladen werden, wo das Backend Variablen injected, die dann via ng-include eingebunden werden.
Kurz und knapp: Hölle! Hölle! Hölle!

Aber da so langsam eh mal ein 2.0 Rewrite ansteht, wird nach und nach eine Angular 8 App von Grund auf neu gebaut.

 

[Sithys]

Ja... mit Migrieren ist da nichts von AngularJS zu einer größeren Version. Da trifft es Dein "Hölle! Hölle! Hölle!" am ehesten

 

[pcBauer]

Kann den Anderen nur beipflichten, zukunftsorientiert (wobei das ja schon lange aktuell ist..) component-basiert ohne ng-controller in freier Wildbahn Arbeiten.

Und ich bin auch ein leidgeplagter vom Upgrade, hab muntere 9 Monate an dem Update auf angular geschrieben, mit Bugfixes und neuen Features nebenher natürlich
Vor allem der Router macht richtig Spaß, zumindest wenn man den ui-router verwendet hat.

Hölle Hölle Hölle!

 

[marcOcram]

Danke für die Antworten. Ich werde dann die Direktive nehmen. Kommt der Komponente am nächsten. Die Umstellung auf Angular.io wird nicht ohne weiteres funktionieren. Zu wenig Personen, zu viele Probleme und viel zu wenig Zeit.

@benneque das mit der Transklusion hatte ich auch gesehen. Da hab ich aber direkt abgewunken. Das hätte zwar mit Sicherheit funktioniert, wäre aber noch unschöner als die Sache mit den Controllern gewesen.