{"id":11608,"date":"2025-06-02T09:00:00","date_gmt":"2025-06-02T07:00:00","guid":{"rendered":"https:\/\/wata.es\/?p=11608"},"modified":"2026-02-05T10:26:48","modified_gmt":"2026-02-05T09:26:48","slug":"hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung","status":"publish","type":"post","link":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/","title":{"rendered":"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung"},"content":{"rendered":"\n<p>Wenn du diesen Artikel liest, kennst du wahrscheinlich bereits die <a href=\"https:\/\/wata.es\/de\/hexagonale-architektur-einfuehrung-und-aufbau\/\">hexagonale Architektur<\/a> \u2013 ein bekanntes Designprinzip, das dabei hilft, die Kern-Business-Logik von externen Abh\u00e4ngigkeiten zu entkoppeln. W\u00e4hrend dieser Ansatz im Backend-Development weit verbreitet ist, sieht man ihn im Frontend-Bereich eher selten.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Einleitung<\/strong><\/h2>\n\n\n\n<p>Ich denke, das liegt an der Natur von Frameworks wie Angular, bei denen die Business-Logik oft eng mit eingebauten Mechanismen der Technologie verkn\u00fcpft ist, wie Komponenten, Services, Pipes, Direktiven und Validatoren. Dadurch neigen Frontend-Frameworks eher dazu, sich an MVVM, MVC oder MVP auszurichten.<\/p>\n\n\n\n<p>In den letzten Jahren hatte ich die Gelegenheit, die Architektur eines Angular-Projekts zu entwerfen. Da ich aus einem backend-orientierten Hintergrund komme, wollte ich herausfinden, ob sich die hexagonale Architektur auch f\u00fcr die Frontend-Entwicklung eignet \u2013 \u00e4hnlich wie wir sie bei WATA Factory bereits erfolgreich in vielen Backend-Projekten eingesetzt haben. Anfangs war ich besorgt, dass dieser Ansatz \u00fcbertrieben oder unnat\u00fcrlich wirken k\u00f6nnte. Doch mit der Zeit zeigte sich, dass die Vorteile \u00fcberwogen.<\/p>\n\n\n\n<p>Einer der gr\u00f6\u00dften Vorteile war die strukturierte Organisation der Dateien, die eine klare und konsistente Architektur erm\u00f6glichte. Trotz des zus\u00e4tzlichen Boilerplates und der Schnittstellen wurde das Projekt f\u00fcr sowohl Frontend- als auch Backend-Entwickler leichter zug\u00e4nglich. Die vertraute Struktur erleichterte das Onboarding und die Zusammenarbeit erheblich.<\/p>\n\n\n\n<p>Inzwischen wird dieser architektonische Stil auch in anderen Projekten bei WATA Factory \u00fcbernommen, da er sich als skalierbar und gut testbar erwiesen hat.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Project-Structure-Overview\"><strong>Projektstruktur-\u00dcbersicht<\/strong><\/h2>\n\n\n\n<p>Unser Projekt ist nach dem <strong>Vertical-Slicing-Ansatz<\/strong> organisiert. Das bedeutet, dass jede <strong>Funktionalit\u00e4t<\/strong> in sich geschlossen ist und sowohl die <strong>Business-Logik<\/strong> als auch die <strong>Pr\u00e4sentation<\/strong> umfasst.<\/p>\n\n\n\n<p>Die Hauptverzeichnisse sind:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>app\/\n\u2502\u2500\u2500 core\/                  # Cross-cutting concerns (DI, external libs, etc.)\n\u2502\u2500\u2500 shared\/                # Shared logic across features\n\u2502    |\u2500\u2500 domain\/           # Shared business logic, domain models, validation\n\u2502    |\u2500\u2500 application\/      # Shared application use cases\n\u2502    |\u2500\u2500 infrastructure\/   # Shared infrastructure (APIs, repositories, utilities, adapters)\n\u2502    |\u2500\u2500 presentation\/     # Shared presentation logic (UI components, directives, pipes)\n\u2502\u2500\u2500 authentication\/        # Feature: Logic for Authentication (example)\n\u2502    |\u2500\u2500 domain\/           # Feature: Business logic, domain models, validation\n\u2502    |\u2500\u2500 application\/      # Feature: Application use cases\n\u2502    |\u2500\u2500 infrastructure\/   # Feature: External integrations (APIs, DB, services)\n\u2502    |\u2500\u2500 presentation\/     # Feature: UI components, directives, services, styles\n\u2502\u2500\u2500 other-feature\/         # Another feature (follows the same structure)\n     |\u2500\u2500 domain\/\n     |\u2500\u2500 application\/\n     |\u2500\u2500 infrastructure\/\n     |\u2500\u2500 presentation\/<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Core-Folder-(app\/core)\"><strong>Core-Verzeichnis (app\/core)<\/strong><\/h2>\n\n\n\n<p>Dieses Verzeichnis enth\u00e4lt querschnittliche Anliegen wie die Konfiguration der Dependency Injection und die Einrichtung externer Bibliotheken (z. B. JWT, \u00dcbersetzungsdienste).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Dependency-Injection-(app\/core\/di)\"><strong>Dependency Injection (app\/core\/di)<\/strong>Das DI-System von Angular arbeitet nahtlos mit abstrakten Klassen, aber nicht mit Interfaces.<br>Obwohl ich Interfaces bevorzuge, um eine strikte Vertragserf\u00fcllung ohne gemeinsam genutzte Logik zu gew\u00e4hrleisten (und somit die Implementierung vollst\u00e4ndig zu entkoppeln), gibt es dabei einen Kompromiss:<\/h3>\n\n\n\n<p>Die Verwendung von Interfaces erfordert zus\u00e4tzlichen Boilerplate-Code, insbesondere weil InjectionToken genutzt werden muss, um sie in Angulars DI-System zu integrieren.<\/p>\n\n\n\n<p>Um dies zu konfigurieren, verwenden wir eine Datei namens injection.ts, in der wir Standardimplementierungen mithilfe von InjectionToken definieren \u2013 ein zentraler Bestandteil des DI-Container-Patterns<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export const AUTH_REPOSITORY_TOKEN = new InjectionToken&lt;AuthRepository&gt;(\n\t'AuthRepository',\n);\n\nexport const DI_PROVIDERS = &#91;\n\t{\n\t\tprovide: AUTH_REPOSITORY_TOKEN,\n\t\tuseClass: ApiAuthRepository,\n\t},\n\t\/\/ other providers\n];<\/code><\/pre>\n\n\n\n<p>Diese Provider werden dann zur app.config.ts hinzugef\u00fcgt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Shared-Folder-(app\/shared)\"><strong>Shared-Verzeichnis (app\/shared)<\/strong><\/h2>\n\n\n\n<p>Dieses Verzeichnis ist ebenfalls strukturiert, um wiederverwendbare Logik \u00fcber verschiedene Features hinweg bereitzustellen, dabei aber eine klare Trennung der Verantwortlichkeiten aufrechtzuerhalten.<br>Es ist wichtig sicherzustellen, dass alle Inhalte im <strong>shared<\/strong>-Ordner der entsprechenden Ebene zugeordnet sind \u2013 sei es <strong>Domain, Application, Infrastructure oder Presentation<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Feature-Folders-(app\/authentication)\"><strong>Feature-Verzeichnisse (app\/authentication)<\/strong><\/h2>\n\n\n\n<p>Jede Funktionalit\u00e4t folgt einem Vertical-Slicing-Ansatz, das bedeutet, dass sie ihre eigenen Schichten enth\u00e4lt.<br>Wir verwenden <strong>Authentication<\/strong> nur als Beispiel f\u00fcr ein Feature. Dieselbe vertikale Slicing-Strategie gilt auch f\u00fcr andere Features, um eine einheitliche, wartbare und skalierbare Architektur im gesamten Projekt zu gew\u00e4hrleisten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Domain-Layer-(app\/authentication\/domain)\"><strong>Domain Layer (app\/authentication\/domain)<\/strong><\/h2>\n\n\n\n<p>Enth\u00e4lt die zentrale Business-Logik, Domain-Modelle und Validierungsregeln.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Domain-Models-(app\/authentication\/domain\/models)\">Domain-Modelle (app\/authentication\/domain\/models)<\/h3>\n\n\n\n<p>Die Domain-Modelle kapseln die Validierungslogik und das dom\u00e4nenspezifische Verhalten:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export class UsernameModel {\n readonly value: string;\n\n  constructor(value: string) {\n    if (!value) {\n      throw new EmptyUsernameError();\n    }\n    \n    const usernameRegex = \/^(?=.*&#91;A-Za-z])(?=.*\\\\d)(?=.*&#91;@$!%*?&amp;])&#91;A-Za-z\\\\d@$!%*?&amp;]{8,}$\/; \n    \n    if (!usernameRegex.test(value)) {\n      throw new InvalidUsernameError();\n    }\n\n    this.value = value;\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Domain-Exceptions-(app\/authentication\/domain\/errors)\"><strong>Domain Exceptions (app\/authentication\/domain\/errors)<\/strong><\/h3>\n\n\n\n<p>This directory contains domain-specific exceptions that represent business rule violations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Domain-Repository-Interfaces-(app\/authentication\/domain\/repositories)\"><strong>Domain Repository Interfaces (app\/authentication\/domain\/repositories)<\/strong><\/h3>\n\n\n\n<p>Dieses Verzeichnis enth\u00e4lt Abstraktionen f\u00fcr Daten-Repositories und definiert die Vertr\u00e4ge, die Repository-Implementierungen einhalten m\u00fcssen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export interface AuthRepository {\n\tloginAttempt(loginModel: LoginModel): Observable&lt;AuthTokenModel&gt;;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Application-Layer-(app\/authentication\/application)\"><strong>Application Layer (app\/authentication\/application)<\/strong><\/h2>\n\n\n\n<p>Diese Schicht enth\u00e4lt Anwendungsservices, die Use Cases orchestrieren.<br>Hier integrieren wir auch NGRX Stores zur Zustandsverwaltung, wobei eine detaillierte Betrachtung von NGRX einen separaten Beitrag erfordern w\u00fcrde.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Use Cases (<code>app\/authentication\/application\/use-cases<\/code>)<\/strong><\/h2>\n\n\n\n<p>Use Cases implementieren die Gesch\u00e4ftslogik und interagieren mit Repositories.<br>Sie folgen einer konsistenten Schnittstelle UseCase&lt;S, T&gt;, wobei S das Eingabemodell und T das Ausgabemodell ist.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export class LoginUseCase implements UseCase&lt;LoginModel, UserStatusModel&gt; {\n  \n\tconstructor(private authRepository: AuthRepository) {\n    }\n\n  \texecute(loginModel: LoginModel): Observable&lt;UserStatusModel&gt; {\n  \t\treturn this.authRepository.loginAttempt(loginModel);\n  \t}\n  \n}<\/code><\/pre>\n\n\n\n<p>The interface is defined in <code>app\/shared\/application\/use-cases\/base\/use-case.ts<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Observable } from 'rxjs';\n\nexport interface UseCase&lt;S, T&gt; {\n  execute(params: S): Observable&lt;T&gt;;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Infrastructure-Layer-(app\/authentication\/infrastructure)\"><strong>Infrastructure Layer (<code>app\/authentication\/infrastructure<\/code>)<\/strong><\/h2>\n\n\n\n<p>Diese Schicht verwaltet Implementierungen f\u00fcr externe Integrationen wie API-Aufrufe, Datenbankinteraktionen und andere externe Dienste.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Presentation-Layer-(app\/authentication\/presentation)\"><strong>Presentation Layer (app\/authentication\/presentation)<\/strong><\/h2>\n\n\n\n<p>Diese Schicht ist eng mit Angular verkn\u00fcpft und umfasst Komponenten, Direktiven, Services und Styles.<br>Use Cases werden \u00fcber Schnittstellen in Komponenten injiziert, um die Trennung von Application- und Infrastructure-Layer aufrechtzuerhalten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Conclusion\"><strong>Fazit<\/strong><\/h2>\n\n\n\n<p>Bei <strong>WATA Factory<\/strong> setzen wir diese Architektur in unseren Angular-Projekten ein und haben zahlreiche Vorteile daraus gezogen.<br>Durch die Kombination von <strong>hexagonaler Architektur<\/strong> mit <strong>Vertical Slicing<\/strong> konnten wir unsere Anwendungen wartbarer, skalierbarer und testbarer machen.<\/p>\n\n\n\n<p>Einer der gr\u00f6\u00dften Vorteile ist, dass unsere Business-Logik unabh\u00e4ngig von Angular und anderen externen Abh\u00e4ngigkeiten bleibt.<\/p>\n\n\n\n<p>Das macht unseren Code modular, wiederverwendbar und viel einfacher anpassbar, wenn sich Anforderungen \u00e4ndern.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn du diesen Artikel liest, kennst du wahrscheinlich bereits die hexagonale Architektur \u2013 ein bekanntes Designprinzip, das dabei hilft, die Kern-Business-Logik von externen Abh\u00e4ngigkeiten zu entkoppeln. W\u00e4hrend dieser Ansatz im Backend-Development weit verbreitet ist, sieht man ihn im Frontend-Bereich eher selten.<\/p>\n","protected":false},"author":45,"featured_media":11601,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[68,181],"tags":[],"class_list":["post-11608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-neuigkeiten","category-technologie"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung - WATA Factory<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung - WATA Factory\" \/>\n<meta property=\"og:description\" content=\"Wenn du diesen Artikel liest, kennst du wahrscheinlich bereits die hexagonale Architektur \u2013 ein bekanntes Designprinzip, das dabei hilft, die Kern-Business-Logik von externen Abh\u00e4ngigkeiten zu entkoppeln. W\u00e4hrend dieser Ansatz im Backend-Development weit verbreitet ist, sieht man ihn im Frontend-Bereich eher selten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/\" \/>\n<meta property=\"og:site_name\" content=\"WATA Factory\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/watafactory\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-02T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-05T09:26:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Victor Galo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@watafactory\" \/>\n<meta name=\"twitter:site\" content=\"@watafactory\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Victor Galo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/\"},\"author\":{\"name\":\"Victor Galo\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/2fe4cf3f05ff348d077f2b64ea1d4727\"},\"headline\":\"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung\",\"datePublished\":\"2025-06-02T07:00:00+00:00\",\"dateModified\":\"2026-02-05T09:26:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/\"},\"wordCount\":759,\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"articleSection\":[\"Neuigkeiten\",\"Technologie\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/\",\"url\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/\",\"name\":\"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung - WATA Factory\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"datePublished\":\"2025-06-02T07:00:00+00:00\",\"dateModified\":\"2026-02-05T09:26:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/Hexagonal-Architecture-scaled.jpg\",\"width\":2560,\"height\":1440,\"caption\":\"Abstrakte geometrische W\u00fcrfelstruktur mit roten und blauen Farbverl\u00e4ufen auf hexagonalem Hintergrund\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wata.es\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wata.es\\\/#website\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"name\":\"WATA Factory\",\"description\":\"IT Consulting &amp; Outsourcing for your company\",\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wata.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\",\"name\":\"WATA Factory\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"width\":688,\"height\":176,\"caption\":\"WATA Factory\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/watafactory\\\/\",\"https:\\\/\\\/x.com\\\/watafactory\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wata\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/2fe4cf3f05ff348d077f2b64ea1d4727\",\"name\":\"Victor Galo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g\",\"caption\":\"Victor Galo\"},\"url\":\"https:\\\/\\\/wata.es\\\/de\\\/author\\\/v-galowata-es\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung - WATA Factory","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/","og_locale":"de_DE","og_type":"article","og_title":"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung - WATA Factory","og_description":"Wenn du diesen Artikel liest, kennst du wahrscheinlich bereits die hexagonale Architektur \u2013 ein bekanntes Designprinzip, das dabei hilft, die Kern-Business-Logik von externen Abh\u00e4ngigkeiten zu entkoppeln. W\u00e4hrend dieser Ansatz im Backend-Development weit verbreitet ist, sieht man ihn im Frontend-Bereich eher selten.","og_url":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/","og_site_name":"WATA Factory","article_publisher":"https:\/\/www.facebook.com\/watafactory\/","article_published_time":"2025-06-02T07:00:00+00:00","article_modified_time":"2026-02-05T09:26:48+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","type":"image\/jpeg"}],"author":"Victor Galo","twitter_card":"summary_large_image","twitter_creator":"@watafactory","twitter_site":"@watafactory","twitter_misc":{"Verfasst von":"Victor Galo","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/#article","isPartOf":{"@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/"},"author":{"name":"Victor Galo","@id":"https:\/\/wata.es\/#\/schema\/person\/2fe4cf3f05ff348d077f2b64ea1d4727"},"headline":"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung","datePublished":"2025-06-02T07:00:00+00:00","dateModified":"2026-02-05T09:26:48+00:00","mainEntityOfPage":{"@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/"},"wordCount":759,"publisher":{"@id":"https:\/\/wata.es\/#organization"},"image":{"@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","articleSection":["Neuigkeiten","Technologie"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/","url":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/","name":"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung - WATA Factory","isPartOf":{"@id":"https:\/\/wata.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/#primaryimage"},"image":{"@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","datePublished":"2025-06-02T07:00:00+00:00","dateModified":"2026-02-05T09:26:48+00:00","breadcrumb":{"@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/#primaryimage","url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","width":2560,"height":1440,"caption":"Abstrakte geometrische W\u00fcrfelstruktur mit roten und blauen Farbverl\u00e4ufen auf hexagonalem Hintergrund"},{"@type":"BreadcrumbList","@id":"https:\/\/wata.es\/de\/hexagonale-architektur-fuer-angular-ein-skalierbarer-ansatz-fuer-die-frontend-entwicklung\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wata.es\/de\/"},{"@type":"ListItem","position":2,"name":"Hexagonale Architektur f\u00fcr Angular: Ein skalierbarer Ansatz f\u00fcr die Frontend-Entwicklung"}]},{"@type":"WebSite","@id":"https:\/\/wata.es\/#website","url":"https:\/\/wata.es\/","name":"WATA Factory","description":"IT Consulting &amp; Outsourcing for your company","publisher":{"@id":"https:\/\/wata.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wata.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/wata.es\/#organization","name":"WATA Factory","url":"https:\/\/wata.es\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/","url":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","width":688,"height":176,"caption":"WATA Factory"},"image":{"@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/watafactory\/","https:\/\/x.com\/watafactory","https:\/\/www.linkedin.com\/company\/wata\/"]},{"@type":"Person","@id":"https:\/\/wata.es\/#\/schema\/person\/2fe4cf3f05ff348d077f2b64ea1d4727","name":"Victor Galo","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5faa9d6a28e2ec94ae73bbd2358ed9b3f4080791f503a4013e3c98390500e70b?s=96&d=mm&r=g","caption":"Victor Galo"},"url":"https:\/\/wata.es\/de\/author\/v-galowata-es\/"}]}},"_links":{"self":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/11608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/comments?post=11608"}],"version-history":[{"count":5,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/11608\/revisions"}],"predecessor-version":[{"id":15925,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/11608\/revisions\/15925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/media\/11601"}],"wp:attachment":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/media?parent=11608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/categories?post=11608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/tags?post=11608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}