Episode 2 of 25

MVC Architecture

Understand the Model-View-Controller pattern that AngularJS is built upon.

AngularJS follows the MVC (Model-View-Controller) architectural pattern, which separates your application into three interconnected parts.

What is MVC?

  • Model — the data and business logic of your application
  • View — the HTML template that displays the data to the user
  • Controller — the JavaScript logic that connects the Model and View

How It Works in AngularJS

<!-- VIEW: HTML template -->
<div ng-controller="MainCtrl">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
</div>

<!-- CONTROLLER: JavaScript logic -->
<script>
app.controller('MainCtrl', function($scope) {
    // MODEL: data
    $scope.title = "Welcome!";
    $scope.message = "This is my AngularJS app.";
});
</script>

The Flow

  1. User interacts with the View (clicks a button, types in a field)
  2. The Controller handles the interaction and updates the Model
  3. The View automatically updates to reflect the new Model data

Why MVC?

  • Separation of concerns — each part has a clear responsibility
  • Maintainability — easier to update one part without breaking others
  • Testability — each layer can be tested independently
  • Team collaboration — designers work on views, developers on controllers

AngularJS vs Traditional JavaScript

Without a framework, your HTML, data, and logic are often mixed together. MVC gives you a clean structure to follow as your app grows.