AngularJS MVC (Model-View-Controller) Architecture

AngularJS follows the MVC (Model-View-Controller) architecture to build structured and maintainable web applications. It helps in separating concerns by dividing an application into three interconnected components:

Model (M) → Manages application data
View (V) → Handles the UI
Controller (C) → Manages logic and user interactions

1. Understanding MVC in AngularJS

1.1 Model (M)

Represents data and business logic.
The $scope object acts as the Model in AngularJS.
It contains variables and functions that store and manipulate data.

1.2 View (V)

Represents the UI (User Interface).
It consists of HTML with AngularJS directives.
Displays the data from the Model and updates dynamically.

1.3 Controller (C)

Acts as a bridge between the Model and View.
Contains business logic to process and manipulate data.
Uses the $scope object to connect with the View.

2. MVC Flow in AngularJS

The Controller initializes data in the Model using $scope.
The View (HTML) binds to the Model using AngularJS directives (e.g., ng-model, ng-bind).
User interactions trigger changes in the Controller, which updates the Model.
The View automatically reflects the updated data due to two-way data binding.

3. Example: Implementing MVC in AngularJS

Step 1: Create an AngularJS Module and Controller

Create a file app.js and define an AngularJS module and controller.

// Define an AngularJS module
var app = angular.module("myApp", []);

// Create a Controller
app.controller("myController", function ($scope) {
    // Model (Data)
    $scope.message = "Welcome to AngularJS MVC!";
    $scope.count = 0;

    // Function to update the Model
    $scope.increment = function () {
        $scope.count++;
    };
});

Step 2: Create an HTML View

Create an index.html file and link it to AngularJS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS MVC Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <h1>{{ message }}</h1>
        <p>Button clicked: {{ count }} times</p>
        <button ng-click="increment()">Click Me</button>
    </div>
</body>
</html>

4. Explanation of Code

ng-app="myApp" → Initializes the AngularJS application.
ng-controller="myController" → Assigns the Controller to the HTML.
{{ message }} → Binds the Model data to the View.
ng-click="increment()" → Calls the function in the Controller to update the Model.
The View automatically updates when the Model changes (two-way data binding).

5. Advantages of AngularJS MVC Architecture

Separation of Concerns → Business logic, UI, and data management are separate.
Two-Way Data Binding → The View updates instantly when the Model changes.
Code Reusability → Controllers can be reused across multiple Views.
Easier Debugging & Maintenance → Structured code is easier to manage.
Improved Testing → Unit testing becomes simpler due to modular code.

6. MVC vs. Traditional JavaScript

Feature	Traditional JavaScript	AngularJS MVC
Code Structure	Mixed (HTML, JS, CSS together)	Organized (MVC-based)
Data Handling	Manually updated	Automatically updated (2-way binding)
Maintainability	Difficult for large apps	Easier and scalable
Reusability	Low	High
Testing	Harder	Easier