Zuletzt geändert am:
Analog zur Einbettung auf herkömmlichen Websites erfolgt die Einbettung des Formcentric-Clients in Angular ebenfalls über die Einbindung der hierfür notwendigen JavaScript Dateien.
Der im Artikel Allgemeine Einbettung beschriebene Einbettungsansatz lässt sich in der Regel auch in Single-Page-Anwendungen anwenden. Die im Folgenden beschriebenen Einbettungsschritte werden jedoch empfohlen, um eine schnellere Ladezeit der Ressourcen und mehr Freiraum bei der Entwicklung zu gewährleisten.
Navigieren Sie hierzu in das Root-Verzeichnis Ihres Projekts und führen Sie folgenden Befehl mit dem Package Manager Ihrer Wahl aus:
Danach sollte in Ihrem node_modules Verzeichnis der Formcentric-Client lokal installiert sein.
Um die Ressourcen der Bibiothek in Angular global zugänglich zu machen, fügen Sie diese Ihrer angular.json Konfiguration hinzu:
Erstellen Sie im Anschluss, analog zur allgemeinen Einbettung, einen Formular-Container in der gewünschten Komponente, hier jedoch als Angular-Template, anstatt als HTML.
Erstellen Sie eine neue Komponente in Angular :
Im erstellten Komponentenordner sollten nun alle Dateien von der Angular CLI erstellt worden sein:
formcentric.component.tsformcentric.component.spec.tsformcentric.component.htmlformcentric.component.scssPassen Sie nun die Dateien für die Verwendung des Formcentric-Clients an. Eine dynamisch konfigurierbare Formcentric-Komponente könnte dann beispielsweise folgendermaßen aussehen:
formcentric.component.ts
formcentric.component.html
Die Theme-Ressourcen können direkt als SCSS und JavaScript in die Anwendung integriert werden, ähnlich wie die Client-Skripte.
Beachten Sie dabei, dass die Anwendung für die Verwendung von SCSS konfiguriert sein muss. Danach können Sie die Styles des ausgewählten Themes als SCSS Dateien in die Anwendung importieren. Das Injizieren von CSS-Variablen wird dadurch überflüssig. Sowohl die Variablen als auch das Theme selbst können Sie dann in die zuvor generierte formcentric.component.scss Datei importieren:
Durch das Erstellen der Komponente mit der Angular CLI sollte die Datei bereits als Abhängigkeit in formcentric.component.ts unter styleUrls eingetragen sein (siehe Abschnitt Formcentric Angular-Komponente).
Fügen Sie nun die importierten SCSS-Dateien und die Formcentric JavaScript-Templates script.js in Ihrer angular.json hinzu. Achten Sie darauf, dass formcentirc.component.scss unter styles und node_module unter includePaths eingetragen sind, um das Preprocessing des Formcentric Themes zu gewährleisten:
formcentric.component.html
