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 .

Differencesbetweendesignpatterns

**TheMVWstandardisnotreallyastandard,MVWstandsforModel-View-Whatever,thatis,donotwasteanytimeandkeeparguingabouttheseabsurdthingsMV*,justdo.

MVC

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).

MVP

• 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.

MVVM

• 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() {
    $output.html($input.value());
  });
});

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.

Conclusion

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.

Related

• Angular.js, is MVC, MVVM, or MVP ?
• What are the main differences between jQuery and AngularJS?
• What is MVP and MVVM?
• Comparing JavaScript vs. AngularJS? en
• Is AngularJS MVC? MVVM? MVWhatever?
• We have a question answered in our Big Brother SO about that.

I think I could have an idea =)