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.
Here is the diagram from official Angular Docs, that shows the interaction between Modules, Components & Services.
Reference: Angular Docs
- 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.
- 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:
- Authentication Module
- Dashboard Module
- Contacts Module
- Blog Module
Want to know more about Modules? Angular Modules Explained?
- 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.
- 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.
Let’s compare it with Angular application.
Three story building vs Angular Application
|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.|