Hello awesome people👋, welcome back!

This post is part of the Angular Tutorial - Series, and I am going to discuss Angular architecture to understand the building blocks of Angular apps.

As we know Angular is a platform and framework for developing web applications using HTML and Typescript, we need to understand how the platform is built, using what and other core details of it.

Building blocks of Angular

The basic building block of Angular applications is NgModules, which provides the grouping of Components in a compilation context.

You may now have a question on your mind: What is a component?

Components are basically views that comprises of Design elements (UI) and code-behind logic. Components also use services, to perform functionalities that are not related to Views.

So the building blocks of Angular are:

1. Modules
2. Components
3. Services

Modules

• One thing we need to remember here while discussing Modules: Angular Modules (NgModules) differ from JavaScript (ES2015) modules completely.
• NgModules associate Components with their relevant service code as a single functional unit.
• Each and every Angular application has one root module, named as AppModule, which gives a 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 help in managing complex applications. Designing such a way helps in Lazy loading i.e Loading modules on demand. For sake of conversation: We can organize an Angular application into distinct modules like:
  • Authentication Module
  • Dashboard Module
  • Contacts Module
  • Blog Module
• NgModule is basically a class marked with decorator @NgModule.

// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// @NgModule decorator with its metadata
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Components

• Each and every Module 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.
• Component = UI (HTML) + Class (TS) + Style (CSS/SCSS)

Services

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

Hope you find this article useful, please feel free to share it with your friends/colleagues.

If you got any questions, feel free to post them in the comments section down below.

Happy learning!

I tweet a lot about Web development, Java, and Productivity Hacks, so feel free to follow me on Twitter at AskUdhay.

Here is one of my recent tweets:

References:

angular.io/guide/ngmodules

angular.io/guide/component-overview

angular.io/guide/architecture-services