What does AngularJS MVW mean?


When you search Google for Angular, it is returned:


AngularJS - Superheroic JavaScript MVW Framework

  • I know that MVC stands for Model-View-Controller but what is the W of the MVW Framework ?
  • Is this a new software architecture standard? A new design pattern?
  • What does it differ from the traditional MVC, MVVM, MVP
  • ?
asked by anonymous 25.05.2017 / 22:26

1 answer


I've noticed that this is a controversial topic that many developers can spend hours and hours debating and discussing, but I'll try to synthesize a little information.

MVW - Model View Whatever

The MVW standard is not really a standard, MVW, it means Model-View-Whatever , ie, what pattern do you think you will program in AngularJS, do not waste time, just do . Simply whatever works for you.

For several years, AngularJS was closer to MVC (or rather one of the client-side variants), but over time and thanks to many refactorings and API improvements, it is closer to MVVM - the $ scope object can be considered the View-Model that is being decorated by a function that is called Controller .




    Model-View-Controller(MVC)isanarchitecturalstandardusedinsoftwareengineeringwherethestandardisolatestheuser's"domain logic" (the application logic for the user) (input and presentation), enabling independent development, testing and maintenance of each (separation of concerns).


  • Model-view-presenter (MVP) is a derivative of the model-view-controller software standard, primarily used to construct user interfaces. In MVP, the presenter assumes the functionality of the "middle-man" (corresponding to the application controller in the MVC). In addition, view is responsible for manipulating UI events (such as mouse down, key down, etc.), which used to be the controller job. Eventually, the model becomes strictly a domain model.


  • Model-View-ViewModel (MVVM) is an architectural design standard for implementing user interfaces. Its primary focus is the separation of concern between View and Model using an intermediate layer called ViewModel to improve manageability, scalability, and testability .

Code Comparison

With DOM

<input type='text' id='bind-input'>
<label id='bind-output'></label>

And the JavaScript:

window.addEventListener('load', function() {
  var input = document.getElement('bind-input'),
      output = document.getElement('bind-output');

  input.addEventListener('change', function() {
    output.innerText = input.value;

We have to explain very specifically what we need the browser to do. We have to use the listener of certain events, make sure the DOM is loaded, track the ID's of our element, everything to update the label whenever the input changes .

With jQuery

<input type='text' id='bind-input'>
<label id='bind-output'></label>

And we still need JavaScript:

$(document).ready(function() {
  var $input = $('#bind-input'),
      $output = $('#bind-output');

  $input.on('change', function() {

As you can see, this is quite similar to the DOM approach. We need to explain to the browser exactly what we want to do.

With Angular

<input type='text' ng-model='bound'>
<label ng-bind='bound'></label>

We do not even need to write any code for this to work with Angular. (Obviously, we need an empty controller somewhere, but you can understand the idea.)

The declarative approach is mainly a way of abstracting the implementation details. Angular guidelines make it very easy to complete these common behaviors in small, reusable components that can be applied declaratively to our HTML.


AngularJS gives you a lot of flexibility to separate presentation logic from business logic and presentation state. All these denominations actually only separate the logical part of the visual part, no matter what. AngularJS makes this very explicit when you create a controller where the data will be treated and the HTML with the directives where the data will be exposed.


I think I could have an idea =)

12.06.2017 / 16:07