Client Side MVC

Single Page Applications

MVC Pattern overview

Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to  the user.

MVC Components

  • Models represent knowledge. A model could be a single object, or it could be some structure of objects.
  • A view is a (visual) representation of its model. It would ordinarily highlight certain attributes of the model and suppress others.
  • A controller is the link between a user and the system. It provides the user with input by arranging for relevant views to present themselves in appropriate places on the screen.

MVC Components

Web MVC Example

Model
The classes which are used to store and manipulate state, typically in a database of some kind.

 

View
The user interface bits (in this case, HTML) necessary to render the model to the user.

 

Controller
The brains of the application. The controller decides what the user's input was, how the model needs to change as a result of that input, and which resulting view should be used.

Evolution of web MVC architectures

Presentation Layer evolution

(Past)

Browser

Server

HTTP Request

HTTP Response

HTML

+

JavaScript

V

M

C

Dispatcher

Browser

Server

M

V

SPA HTML5 - JS

Static content

RESTful Endpoints

Event publisher

JSON - REST

Web Sokets

Request / response

Presentation Layer evolution

(Present)

C

A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

What is Angular?

  • client-side  MVC framework for dynamic web apps;
  • perfect for building CRUD application: data-binding, templating, form validation, routing, dependency injection, reusable components;
  • designed to be testable: unit-testing, end-to-end testing, mocks.

Key features

  • Declarative HTML approach
  • 2 way data binding
  • reusable components - directives
  • MVC / MVVM design pattern
  • dependency injection
  • routing
  • templating
  • animations
  • form validation
  • E2E integration testing / unit testing
  • I18n & I10n

Basic structure

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title>Angular app</title>
   <script src="path/to/angular.js"></script>
   <script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
   <p>Hello {{name}}!</p>
   <input type="text" ng-model="name">  
</body>
</html>
//app.js
angular
   .module('myApp', [])
   .controller('MyCtrl', function($scope){
      $scope.name = 'World';
   });

Plunker Example

Demo

Example Link

How it works?

  • Browser loads the page and creates the DOM; 
  • Browser triggers DOMContentLoaded event;
  • Angular looks into the DOM for the ng-app attribute and if the attribute it's found Angular will:
    • load the module associated with the directive;
    • create the application injector;
    • compile the DOM into a Live View:
      • Compile: traverse the DOM and collect all of the directives - the result is a linking function;
      • Link:  combine the directive with a scope and produce a live view.

Data Binding

  • automatic propagation of data changes;
  • model it's the single-source-of-truth;
  • digest cycle;
  • the view it's updated automatically when the model is changed;
  • model is updated automatically when a value in the View has changed.
  • no DOM manipulation needed.

To Study

Implement Angular data binding mechanism

Client Side MVC & Angular

By Alexe Bogdan

Made with Slides.com

Client Side MVC & Angular

About MVC Pattern and how to apply it on client-side

  • 1,311

More from Alexe Bogdan