Understanding Angular Architecture: Modules, Components, and Directives
Angular is a powerful front-end framework for building dynamic web applications. Its architecture is based on a modular design that makes it scalable, maintainable, and efficient. Understanding the core building blocks—modules, components, and directives—is essential for developing Angular applications effectively.
This guide explores the fundamental concepts behind Angular architecture and how they work together.
1. Angular Architecture Overview
Angular applications are structured into multiple layers, ensuring code organization and reusability. The core elements include:
Modules (NgModules) – Organize the application into cohesive blocks.
Components – Define the UI and behavior of the application.
Directives – Extend the HTML structure and behavior.
Templates – Define how the UI is displayed.
Services & Dependency Injection – Handle business logic and data sharing.
Each of these elements plays a crucial role in Angular development.
2. Angular Modules (NgModules)
What is an Angular Module?
An Angular Module (NgModule) is a container that organizes components, directives, and services into a cohesive unit. Every Angular application has at least one module—the root module (AppModule).
Creating an Angular Module
A module is defined using the @NgModule decorator in app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent // Declaring components
],
imports: [
BrowserModule // Importing required modules
],
providers: [],
bootstrap: [AppComponent] // Defining the root component
})
export class AppModule { }
Key Properties of @NgModule
declarations – Declares components and directives.
imports – Imports other Angular modules.
providers – Registers services for dependency injection.
bootstrap – Specifies the root component that starts the application.
Larger applications use feature modules to organize functionality. For example, creating a UserModule:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from './user.component';
@NgModule({
declarations: [UserComponent],
imports: [CommonModule]
})
export class UserModule { }
This approach keeps the application modular and scalable.
3. Angular Components
What is a Component?
A component controls a section of the UI in an Angular application. Each component consists of:
A TypeScript class that defines logic.
An HTML template for UI representation.
A CSS file for styling.
Creating a Component
Use Angular CLI to generate a component:
ng generate component my-component
This command creates a new folder with the following files:
my-component.component.ts – The logic file.
my-component.component.html – The template file.
my-component.component.css – The stylesheet.
my-component.component.spec.ts – The test file.
Component Structure
A basic component definition in my-component.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
title = 'Hello, Angular!';
}
Component Template (HTML File)
The template defines what users see in the UI:
<h2>{{ title }}</h2>
<p>Welcome to my first Angular component.</p>
Using a Component in Another Component
To use MyComponent in another component (e.g., app.component.html), add its selector:
<app-my-component></app-my-component>
4. Angular Directives
What are Directives?
Directives extend the behavior of HTML elements. Angular has three types of directives:
Component Directives – Custom elements that control a portion of the UI.
Structural Directives – Modify the DOM structure (
*ngIf,*ngFor).Attribute Directives – Change the appearance or behavior of an element (
ngClass,ngStyle).
4.1 Structural Directives
*Using ngIf (Conditional Rendering)
The *ngIf directive conditionally adds or removes an element from the DOM.
<p *ngIf="isLoggedIn">Welcome back, user!</p>
<button (click)="toggleLogin()">Toggle Login</button>
export class MyComponent {
isLoggedIn = false;
toggleLogin() {
this.isLoggedIn = !this.isLoggedIn;
}
}
*Using ngFor (Looping Through Data)
The *ngFor directive is used to iterate over lists:
<ul>
<li *ngFor="let user of users">{{ user }}</li>
</ul>
export class MyComponent {
users = ['Alice', 'Bob', 'Charlie'];
}
4.2 Attribute Directives
Using ngClass (Applying Classes Dynamically)
ngClass allows adding classes dynamically:
<p [ngClass]="{'highlight': isActive}">This is a dynamic class.</p>
<button (click)="toggleActive()">Toggle</button>
export class MyComponent {
isActive = false;
toggleActive() {
this.isActive = !this.isActive;
}
}
Using ngStyle (Applying Inline Styles Dynamically)
ngStyle dynamically changes element styles:
<p [ngStyle]="{'color': isActive ? 'green' : 'red'}">Dynamic Styling</p>
4.3 Custom Directives
You can create your own attribute directive:
ng generate directive highlight
Modify highlight.directive.ts:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.el.nativeElement.style.backgroundColor = 'yellow';
}
@HostListener('mouseleave') onMouseLeave() {
this.el.nativeElement.style.backgroundColor = 'transparent';
}
}
Use the directive in HTML:
<p appHighlight>Hover over me to see the effect.</p>
Conclusion
Angular’s architecture is built on modules, components, and directives, which help in organizing and maintaining large-scale applications efficiently.
Modules group related functionalities.
Components define UI elements and behavior.
Directives extend HTML capabilities with dynamic features.
By understanding these core concepts, you can build scalable and maintainable Angular applications.
