Angular Explained

Key Concepts

Angular is a comprehensive framework for building dynamic web applications. The key concepts include:

• Components
• Modules
• Directives
• Services
• Dependency Injection

Components

Components are the building blocks of an Angular application. Each component consists of a TypeScript class, an HTML template, and a CSS style sheet.

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '<h1>Hello, Angular!</h1>',
    styles: ['h1 { color: blue; }']
})
export class AppComponent {}
    

Modules

Modules are used to organize an application into cohesive blocks of functionality. Each Angular application has at least one module, the root module, which is conventionally named AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule {}
    

Directives

Directives are used to manipulate the DOM and add behavior to elements. There are three types of directives: component directives, attribute directives, and structural directives.

import { Directive, ElementRef } from '@angular/core';

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';
    }
}
    

Services

Services are used to share data and functionality across different components. They are typically used for tasks such as fetching data from a server.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
    providedIn: 'root'
})
export class DataService {
    constructor(private http: HttpClient) {}

    getData() {
        return this.http.get('https://api.example.com/data');
    }
}
    

Dependency Injection

Dependency Injection (DI) is a design pattern used to provide instances of classes to other classes that depend on them. Angular has a built-in DI framework that makes it easy to manage dependencies.

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
    selector: 'app-data',
    template: '<div>{{ data | json }}</div>'
})
export class DataComponent {
    data: any;

    constructor(private dataService: DataService) {
        this.dataService.getData().subscribe(data => {
            this.data = data;
        });
    }
}
    

Examples and Analogies

Imagine building a house:

• Components: Think of each room in the house as a component. Each room has its own layout, furniture, and decorations.
• Modules: Think of the blueprint of the house as a module. It outlines the structure and layout of the entire house.
• Directives: Think of directives as special features added to rooms, like a smart lighting system or a built-in entertainment center.
• Services: Think of services as the utility providers, like electricity, water, and internet, that are shared across all rooms.
• Dependency Injection: Think of DI as the process of connecting utility lines to each room, ensuring that every room has access to the necessary services.