{"id":11596,"date":"2025-06-02T09:00:00","date_gmt":"2025-06-02T07:00:00","guid":{"rendered":"https:\/\/wata.es\/?p=11596"},"modified":"2025-06-02T15:58:16","modified_gmt":"2025-06-02T13:58:16","slug":"bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development","status":"publish","type":"post","link":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/","title":{"rendered":"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development"},"content":{"rendered":"\n<p>If you&#8217;re reading this, chances are that you are already familiar with the <a href=\"https:\/\/wata.es\/hexagonal-architecture-introduction-and-structure\/\">hexagonal architecture<\/a>, the well-known design approach that helps decouple core business logic from external dependencies. But although it&#8217;s a very popular approach for backend development, you probably haven&#8217;t seen it applied as often in frontend development. <\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Introduction<\/strong><\/h2>\n\n\n\n<p>I think it&#8217;s due to the nature of frameworks like Angular, where business logic tends to be tightly coupled with built-in mechanisms coupled with the technology, such as components, services, pipes, directives and validators. As a result, frontend frameworks often align more naturally with patterns like MVVM, MVC or MVP.<\/p>\n\n\n\n<p>In recent years I had the opportunity to design the architecture of an Angular project. Coming from a backend-oriented background, I wanted to explore whether hexagonal architecture could fit for frontend development in a similar way that we had already successfully used it in many backend projects at WATA Factory. Initially, I was concerned that it might be an overkill or feel somewhat forced. However, over time, I found more benefits than drawbacks.<\/p>\n\n\n\n<p>One of the main advantages was the structured organization of files, which provided a clear and consistent architecture. Despite the additional boilerplate and interfaces, this approach made the project more accessible to both frontend and backend developers. The familiarity of the structure facilitated onboarding and collaboration. As a result, this architectural style is now being adopted in other projects at WATA Factory, where it has proven to enhance scalability and testability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Project-Structure-Overview\">Project Structure Overview<\/h2>\n\n\n\n<p>Our project is organized using a <strong>vertical slicing<\/strong> approach. This means that each feature is self-contained, including everything from business logic to presentation.<\/p>\n\n\n\n<p>The primary folders include:<\/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)\">Core Folder (<code>app\/core<\/code>)<\/h2>\n\n\n\n<p>This folder contains cross-cutting concerns such as dependency injection configuration and external library setups (e.g., JWT, translation services).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Dependency-Injection-(app\/core\/di)\">Dependency Injection (<code>app\/core\/di<\/code>)<\/h3>\n\n\n\n<p>Angular&#8217;s DI system works seamlessly with abstract classes, but not with interfaces. While I prefer using interfaces for strict contract enforcement without shared logic\u2014allowing for complete decoupling of the implementation\u2014there is a trade-off. Using interfaces requires additional boilerplate, specifically with the need to use <code>InjectionToken<\/code> to integrate them into Angular&#8217;s DI system.<\/p>\n\n\n\n<p>To configure this, we\u2019ll use a file called <code>injection.ts<\/code>, where we will establish default implementations using <code>InjectionToken<\/code> as part of the DI container pattern.<\/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>These providers are then added to <code>app.config.ts<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Shared-Folder-(app\/shared)\">Shared Folder (<code>app\/shared<\/code>)<\/h2>\n\n\n\n<p>This folder will also be structured to house reusable logic across features while maintaining clear separation of concerns. Ensure that everything within the <strong>shared<\/strong> folder aligns with the appropriate <strong>domain<\/strong>, <strong>application<\/strong>, <strong>infrastructure<\/strong>, or <strong>presentation<\/strong> layer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Feature-Folders-(app\/authentication)\">Feature Folders (<code>app\/authentication<\/code>)<\/h2>\n\n\n\n<p>Each feature follows a vertical slice, meaning it contains its own set of layers. Keep in mind that we will use <strong>Authentication<\/strong> just as an example of a feature. We follow the same vertical slicing strategy for other features as well, ensuring a consistent, maintainable, and scalable architecture throughout the project.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Domain-Layer-(app\/authentication\/domain)\">Domain Layer (<code>app\/authentication\/domain<\/code>)<\/h2>\n\n\n\n<p>Contains the core business logic, domain models, and validation rules.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"Domain-Models-(app\/authentication\/domain\/models)\">Domain Models (<code>app\/authentication\/domain\/models<\/code>)<\/h3>\n\n\n\n<p>Domain models encapsulate validation logic and domain-specific behavior:<\/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)\">Domain Exceptions (<code>app\/authentication\/domain\/errors<\/code>)<\/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)\">Domain Repository Interfaces (<code>app\/authentication\/domain\/repositories<\/code>)<\/h3>\n\n\n\n<p>This directory contains abstractions for data repositories, defining the contracts that repository implementations must follow.<\/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)\">Application Layer (<code>app\/authentication\/application<\/code>)<\/h2>\n\n\n\n<p>This layer contains application services that orchestrate use cases. We also integrate here NGRX stores to manage state, though a deeper dive into NGRX would require a separate post about it.<\/p>\n\n\n\n<p>Use Cases (<code>app\/authentication\/application\/use-cases<\/code>)<\/p>\n\n\n\n<p>Use cases implement business logic and interact with repositories. They follow a consistent interface <code>UseCase&lt;S, T&gt;<\/code>, where <code>S<\/code> is the input model and <code>T<\/code> is the output model:<\/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)\">Infrastructure Layer (<code>app\/authentication\/infrastructure<\/code>)<\/h2>\n\n\n\n<p>Manages implementations for external integrations such as API calls, database interactions, and other external services.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Presentation-Layer-(app\/authentication\/presentation)\">Presentation Layer (<code>app\/authentication\/presentation<\/code>)<\/h2>\n\n\n\n<p>This layer is tightly coupled with Angular and includes components, directives, services, and styles. Use cases are injected into components via interfaces to maintain separation from the application and infrastructure layers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"Conclusion\">Conclusion<\/h2>\n\n\n\n<p>At <strong>WATA Factory<\/strong>, we\u2019ve been using this architecture in our Angular projects, and it has brought us a ton of benefits. By structuring our code with <strong>hexagonal architecture<\/strong> and <strong>vertical slicing<\/strong>, we\u2019ve made our applications more maintainable, scalable, and testable.<\/p>\n\n\n\n<p>One of the biggest wins is that our business logic stays independent from Angular and other external dependencies. This makes our code modular, reusable, and much easier to adapt when requirements change.<\/p>\n\n\n\n<p>If you\u2019re looking for a way to keep your Angular codebase clean and future-proof, we highly recommend giving this approach a shot. It\u2019s been a game-changer for us!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re reading this, chances are that you are already familiar with the hexagonal architecture, the well-known design approach that helps decouple core business logic from external dependencies. But although it&#8217;s a very popular approach for backend development, you probably haven&#8217;t seen it applied as often in frontend development.<\/p>\n","protected":false},"author":45,"featured_media":11600,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2,180],"tags":[],"class_list":["post-11596","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development - 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\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development - WATA Factory\" \/>\n<meta property=\"og:description\" content=\"If you&#8217;re reading this, chances are that you are already familiar with the hexagonal architecture, the well-known design approach that helps decouple core business logic from external dependencies. But although it&#8217;s a very popular approach for backend development, you probably haven&#8217;t seen it applied as often in frontend development.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/\" \/>\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=\"2025-06-02T13:58:16+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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Victor Galo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/\"},\"author\":{\"name\":\"Victor Galo\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/2fe4cf3f05ff348d077f2b64ea1d4727\"},\"headline\":\"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development\",\"datePublished\":\"2025-06-02T07:00:00+00:00\",\"dateModified\":\"2025-06-02T13:58:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/\"},\"wordCount\":757,\"publisher\":{\"@id\":\"https:\/\/wata.es\/#organization\"},\"image\":{\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg\",\"articleSection\":[\"News\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/\",\"url\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/\",\"name\":\"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development - WATA Factory\",\"isPartOf\":{\"@id\":\"https:\/\/wata.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg\",\"datePublished\":\"2025-06-02T07:00:00+00:00\",\"dateModified\":\"2025-06-02T13:58:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#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},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wata.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development\"}]},{\"@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\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wata.es\/#organization\",\"name\":\"WATA Factory\",\"url\":\"https:\/\/wata.es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\":\"en-US\",\"@id\":\"https:\/\/wata.es\/#\/schema\/person\/image\/\",\"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\/author\/v-galowata-es\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development - 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\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/","og_locale":"en_US","og_type":"article","og_title":"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development - WATA Factory","og_description":"If you&#8217;re reading this, chances are that you are already familiar with the hexagonal architecture, the well-known design approach that helps decouple core business logic from external dependencies. But although it&#8217;s a very popular approach for backend development, you probably haven&#8217;t seen it applied as often in frontend development.","og_url":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/","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":"2025-06-02T13:58:16+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":{"Written by":"Victor Galo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#article","isPartOf":{"@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/"},"author":{"name":"Victor Galo","@id":"https:\/\/wata.es\/#\/schema\/person\/2fe4cf3f05ff348d077f2b64ea1d4727"},"headline":"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development","datePublished":"2025-06-02T07:00:00+00:00","dateModified":"2025-06-02T13:58:16+00:00","mainEntityOfPage":{"@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/"},"wordCount":757,"publisher":{"@id":"https:\/\/wata.es\/#organization"},"image":{"@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","articleSection":["News","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/","url":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/","name":"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development - WATA Factory","isPartOf":{"@id":"https:\/\/wata.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#primaryimage"},"image":{"@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/03\/Hexagonal-Architecture-scaled.jpg","datePublished":"2025-06-02T07:00:00+00:00","dateModified":"2025-06-02T13:58:16+00:00","breadcrumb":{"@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#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},{"@type":"BreadcrumbList","@id":"https:\/\/wata.es\/bringing-hexagonal-architecture-to-angular-a-scalable-approach-for-frontend-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wata.es\/"},{"@type":"ListItem","position":2,"name":"Bringing Hexagonal Architecture to Angular: A Scalable Approach for Frontend Development"}]},{"@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":"en-US"},{"@type":"Organization","@id":"https:\/\/wata.es\/#organization","name":"WATA Factory","url":"https:\/\/wata.es\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@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":"en-US","@id":"https:\/\/wata.es\/#\/schema\/person\/image\/","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\/author\/v-galowata-es\/"}]}},"_links":{"self":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/users\/45"}],"replies":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/comments?post=11596"}],"version-history":[{"count":5,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11596\/revisions"}],"predecessor-version":[{"id":12486,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/posts\/11596\/revisions\/12486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/media\/11600"}],"wp:attachment":[{"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/media?parent=11596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/categories?post=11596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wata.es\/wp-json\/wp\/v2\/tags?post=11596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}