Angular Architecture Pattern
By: Ankita Joshi
Tags: Software Architecture, Domain Driven Design, Angular, Web App Development, Software Development

Image source — Archeyes

While working with front-end applications we need a more reliable architecture, that is both maintainable and scalable. In modern front-end applications at the current stage, my preference is domain-driven architecture or design.

Software architecture — Whenever we discuss any architecture and patterns we need to understand software architecture first. Software architecture exposes the structure of a system while hiding the implementation details. Each structure consists of software elements, relations among them, and properties of both elements and relations. These structures can have a considerable impact on the quality, maintainability and performance, and overall success of the project.

Domain-Driven Design — Domain-driven is about designing software based on models of the underlying domain. The domain (business logic perceptive) is the center of this project while designing. For example, if a project is about travel business management, our project should have class names like hotelBooking, travelBooking, and searchForFlight.

Advantages of DDD — We will talk about more effective advantages of DDD.

Here the first advantage is communication, a common nomenclature (it will have names regarding domain) is used by the team to write a code. It is easy to know terms and definitions by reading names. Flexibility — DDD is based on object-oriented programming. So everything from the project will be an object and hence encapsulated and modular.

Looking into the above structure we can think about angular architecture. Angular architecture is defined in main three layers is Core layer, Abstraction layer, and Presentation layer. This is also called High-Level Architecture. Here I am explaining it in very simple words. The above image refers to high-level architecture. In which we can see how major three layers of application can describe.

Presentation Layer — This layer is mainly responsible for the design and user interface. Here we are defining all our angular components. It is displaying all templates and handling user events. Presentation layer also responsible for Unidirectional data flow.

Unidirectional data flow — In angular, we have a concept of the hierarchical tree structure. It means we have parents and children concept for components. They are connected via parent and children relationship. Here data flow between each component with events (actions). The child component will send action using @output and every component will accept it using @input.

Abstraction layer — The abstraction layer decouples the presentation layer from the core layer. This layer will behave as a mediator and the facade for the presentation layer. It means that it will expose an API and coordinate the communication between presentation layer components and the core of the application. For example, here we call services to have data communication between template and core layer.

Core layer — This layer is the innermost layer of an application, though all outside communication happens here. In this layer, one can place all state management, core modules, and services. The core layer is responsible for encapsulating the state and behavior of an application. In angular, we have services to write all API calls which contain @Injectable to inject APIs to communicate with outside. All services lie in the core layer. In this layer, we could also place any validators, mappers, or more advanced use-cases that require manipulating many slices of our UI state.

Conclusion — This story gives foundational know-how of Angular project architecture which hopefully will help you build a project in minimum time, and will also create fewer complexities in the project building process.