Angular MVC

Angular doesn't strictly adhere to the classic Model-View-Controller (MVC) architectural pattern.

instead, it follows a different architecture, which can be described as a variation of MVC called the Model-View-ViewModel (MVVM) pattern.

Here's how Angular's architecture aligns with MVVM:

Model:

In Angular, the Model represents the application's data and business logic.

This includes data objects, services, and other entities responsible for managing application state. In Angular, services often serve as the model layer, providing data and functionality to components.

Example:

// orders.model.ts
export interface Orders {
    orderId: number;
    productName: string;
    productPrice: number;
    productDescription: string;
    quantity: number;
    totalProductPrice: number;
}

View:

The View in Angular is the user interface of the application, responsible for presenting data to the user and capturing user interactions. It is typically defined using HTML templates with Angular-specific syntax.

Angular views are defined using HTML templates that incorporate Angular directives, bindings, and components to create dynamic and interactive user interfaces.

Example:

<!-- orders-list.component.html -->
<div *ngFor="let order of orders">
    <h3>{{ order.productName }}</h3>
    <h5>{{ order.productDescription }}</h5>
    <p>Quantity - ${{ order.quantity}}</p>
    <p>Total Amount - ${{ order.totalProductPrice}}</p>
</div>

Services:

Services in Angular are used to encapsulate reusable logic and data manipulation tasks. They provide a way for components to share data and functionality.

Example:

// order.service.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Orders } from './orders.model';

@Injectable({
    providedIn: 'root'
})
export class OrderService {
    private orders: Orders[] = [
        { 
           orderId: 1, 
           productName: 'Order 1', 
           productPrice: 100, 
           quantity: 3,  
           productDescription: "Product Description 1",
           totalProductPrice: 300
         },
        { 
          orderId: 2, 
          productName: 'Order 2', 
          productPrice: 300, 
          quantity: 2, 
          productDescription: "Product Description 2" 
          totalProductPrice: 600
        }
    ];

    constructor() { }

    getOrders(): Observable<Orders[]> {
        return of(this.orders);
    }
}

ViewModel (Component):

In MVVM, the ViewModel acts as an intermediary between the View and the Model.

It exposes data from the Model to the View and handles user interactions, updating the Model as necessary.

In Angular, this role is fulfilled by components. Components encapsulate application logic and manage the interaction between the Model (data) and the View (UI).

Example:

// product-list.component.ts
import { Component, OnInit } from '@angular/core';
import { OrderService } from './order.service';
import { OrderModel } from './orders.model';

@Component({
    selector: 'app-order-list',
    templateUrl: './order-list.component.html',
    styleUrls: ['./order-list.component.css']
})
export class OrderListComponent implements OnInit {
    orders: OrderModel[];

    constructor(private orderService: OrderService) { }

    ngOnInit(): void {
        this.getOrders();
    }

    getOrders(): void {
        this.orderService.getOrders()
            .subscribe(orders => this.orders = orders);
    }
}

Note:

Angular's components serve as the ViewModel, providing a clear separation between the UI logic and the application logic.

They bind to data from the Model and manipulate it as needed for display in the View. Components also respond to user actions, updating the Model accordingly.

Angular's architecture shares similarities with MVVM, it also incorporates concepts from other patterns, such as dependency injection for managing component dependencies and services for encapsulating shared functionality.

This makes Angular a powerful framework for building complex, maintainable web applications.

<-- Angular Introduction

Getting Started -->