Welcome to the free & complete Angular Tutorial.

In this lesson, we are going to learn more about Angular Architecture.

If you don’t have an idea about Angular architecture, this will help you to a get quick glimpse of what it is.

Though we discussed about Architecture in previous article, we need a real world example to compare the building blocks of Angular.

The real world example I took for our sake of discussion is: Three story building.

Confused, how is that related to Angular building blocks? Go ahead and read this article further.

Let’s get started.

Angular Architecture:

Here is the diagram from official Angular Docs, that shows the interaction between Modules, Components & Services.

Angular ArchitectureReference: Angular Docs

Modules

  • One thing we need to remember here while discussing about Modules: Angular Modules (NgModules) differ from and complement JavaScript (ES2015) modules.
  • NgModules associate Components with their relevant service code as single functional unit.
  • Each and every Angular application has one root module, named as AppModule, which gives bootstrap mechanism to launch the application.
  • Like JavaScript modules, NgModules can import and export functionalities from/to other Modules.
  • We can organize our code into different modules that helps in managing complex applications. Designing such a way helps in Lazy loading – Loading modules on demand.For ex: We can organize an Angular application into distinct modules like:
    1. Authentication Module
    2. Dashboard Module
    3. Contacts Module
    4. Blog Module

Want to know more about Modules? Angular Modules Explained?

Components

  • Each and every component has at least one component, the root component that connects a component hierarchy with the DOM.
  • Component defines a class that contains data and logic, associated with UI.

Deep dive into Components.

Services

  • Service is again a class that has data or logic that has to be shared across components.
  • Dependency Injection (DI) helps keeping the Component class tidy and efficient in delegating the tasks like Logging, fetching data from server etc., to Services.

Learn more about Services.

Three story building

Assume a building has three floors and an entrance (Main gate) to enter the building, and each floor plan is shown below. Utility services like Electricity, Plumbing are available through out the building.

Angular Architecture

Let’s compare it with Angular application.

Three story building vs Angular Application

Building Angular Application Explanation
Gate / Entrance Root Module (AppModule) It bootstraps the launch of application to enter the application similar to access the different floors of building.
Floors Modules Floors can be compared with distinct modules in Angular. Say Authentication, Dashboard, Contact, About Us Modules.
Hall, Kitchen, Bedroom etc., Individual components in Modules Components in module denotes individual portion of View associate with that module. Like how a Kitchen occupies a portion of space in Floor 1.
Plumbing, Electricity, Elevator Logging, Data retrieval from remote server Utility services in a building can be compared with Services like Logging, Http service etc., an application needs to make it fully functional.