MVC and MVVM Patterns in Angular.

Both the Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) architectural patterns are used in Angular, and they serve as fundamental design principles for structuring web applications.

Let’s explore each of them in detail

Model-View-Controller (MVC) Pattern:

1. Model (M): The Model represents the application’s data and business logic. In Angular, this is often represented by services or classes that manage data, perform operations, and interact with APIs. The Model is responsible for retrieving, updating, and manipulating data. In this case, it’s a service that provides a list of books.

// book.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class BookService {
  private books = [
    { id: 1, title: 'Angular Basics', author: 'John Doe' },
    { id: 2, title: 'JavaScript Mastery', author: 'Jane Smith' },
    // ...more books
  ];

  getBooks() {
    return this.books;
  }
}

2. View (V): The View is the user interface (UI) of the application. In Angular, the View is represented by HTML templates that define how the data from the Model should be displayed to the user. The View is responsible for presenting data and capturing user input.

// book-list.component.ts
import { Component } from '@angular/core';
import { BookService } from './book.service';

@Component({
  selector: 'app-book-list',
  template: `
    <h1>Book List</h1>
    <ul>
      <li *ngFor="let book of books">{{ book.title }} by {{ book.author }}</li>
    </ul>
  `,
})
export class BookListComponent {
  books = [];

  constructor(private bookService: BookService) {
    this.books = bookService.getBooks();
  }
}

3. Controller: In traditional MVC, the Controller acts as an intermediary between the Model and the View. It receives user input from the View, processes it, interacts with the Model to retrieve or update data, and updates the View accordingly. In Angular, the Controller role is largely replaced by Components.

BookListComponent class. It retrieves data from the Model (the BookService) and binds it to the View.

Angular Implementation of MVVM

In Angular, MVVM can be implemented using the following elements:

• Model: As with MVC, the Model is represented by services or classes responsible for data management.

// counter.model.ts
export class CounterModel {
  value: number = 0;
}

• View: Angular templates serve as the View, displaying data and capturing user input. Data binding, interpolation, and directives are used to bind the View to the ViewModel.

// counter.component.ts
import { Component } from '@angular/core';
import { CounterModel } from './counter.model';

@Component({
  selector: 'app-counter',
  template: `
    <h1>Counter</h1>
    <p>Value: {{ counterModel.value }}</p>
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
  `,
})
export class CounterComponent {
  constructor(public counterModel: CounterModel) {}

  increment() {
    this.counterModel.value++;
  }

  decrement() {
    this.counterModel.value--;
  }
}

• ViewModel: In Angular, the ViewModel is often represented by Components and associated TypeScript classes. The Component class contains the application logic and interacts with services to retrieve and manipulate data. It exposes properties and methods that the View can bind to. In Angular, this binding is achieved through data binding, which allows data to flow seamlessly between the ViewModel (Component) and the View (template). CounterComponent class. It interacts with the Model (the CounterModel class) and exposes the counter value to the View. In this example, the ViewModel (CounterComponent) directly binds to the Model (CounterModel) to update and display the counter value.

Angular’s two-way data binding, event binding, and template syntax facilitate the MVVM pattern by allowing for easy synchronization between the View and the ViewModel.

Thanks for reading, do follow and clap if its interesting :)