Click here to Skip to main content
15,891,762 members
Articles / Programming Languages / Javascript

AngularJS Does Not Have a Model: It's not MV*, But Rather VM*

Rate me:
Please Sign up or sign in to vote.
5.00/5 (1 vote)
11 Feb 2015CPOL2 min read 9.1K   2   4
AngularJS does not have a Model: It's not MV*, But rather VM*

Where is the "model" in AngularJS? The answer to this question is:

AngularJS does not work with a real model but just with a view model. Therefore, it shouldn't be called an MVC framework, and neither an MV* framework, but rather a View-Model-Whatever (or VM*) framework.

A real MV* framework is based on model classes, like BackboneJS or ASP.NET MVC. A model class does not only define properties and methods for the objects that instantiate it. It also defines property constraints that are checked when validating user input. These constraints are defined in the model, but they are not only checked in the model (before save), but also in the view (on field input, on field change and on form submit).

AngularJS does not have any real concept of model class. It requires to define the validation logic in the view instead of the model. AngularJS binds HTML form fields and other HTML elements to special variables defined as properties of a view controller's $scope object (or of a resource object when using ng-resource). These variables represent view model fields, rather than properties of a model class. The resource classes that can be defined with ng-resource do not allow to express any substantial model class logic (like property constraints, as well as associations and inheritance relationships with other model classes).

The fact that AngularJS supports reading and saving the values of its $scope (or resource) object proerties from/to a remote data store doesn't turn these view fields into model properties. It just means that the AngularJS approach implies forwarding the field values directly to a cloud storage service or to the model of a back-end application without using the logic of a real model (class). The problem with this approach is not only a lack of model logic for constraint validation, but also a lack of model logic for associations and for inheritance relationships between model classes.

Apparently, the assumption of the AngularJS developers is that it's sufficient to have a model class in the back-end application without using its logic in the front-end. But this assumption is questionable. First, there may be no back-end application in the case of a front-end app with local storage. Second, if there is a back-end application with model classes, the (validation, association and inheritance) logic defined in these model classes should also be used in the front-end part of the app.

In summary, in an AngularJS app, there is only a view model and a view, but no model!

This article was originally posted at http://web-engineering.info/blog-feed.xml

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Instructor / Trainer
Germany Germany
Researcher, developer, instructor and cat lover.

Co-Founder of web-engineering.info and the educational simulation website sim4edu.com.

Comments and Discussions

 
GeneralLet's say Flexible Model instead of no Model Pin
RobTeixeira12-Feb-15 10:59
RobTeixeira12-Feb-15 10:59 
You bring up some valid points, but I think it might be more appropriate to say that Angular has a flexible model system. Frameworks like Knockout have very strict requirements for you models. With Angular, you can make your models as heavy or as anemic as you like. We are using Angular for several projects, and are using BreezeJS as a model framework. Angular works great with it (in fact, the Breeze team wrote their framework with DI, and wrote providers that specifically allow Breeze to work wonderfully with Angular). By using Breeze, we are basically stating that we have a heavier model - it comes complete with constraints, annotations, validation rules, and even inheritance. But not everyone likes that - some people prefer anemic models which are little more than state containers.

Also, angular has directives that expose native HTML forms validation, but that doesn't mean you have to use them. Angular is very flexible in that respect too. Our validations are done in the Breeze model classes, and the validation artifacts are exposed through Angular bindings on the form elements (we don't use the native HTML validation). But Angular works with this approach just fine too. Again, it gives you a great amount of flexibility.

Finally, be aware that Angular 2.0 is almost a complete re-write, compared to 1.x. It will come with certain features natively that will give you more tools to create feature-rich models. But unlike other MV* or VM frameworks, it will still have a lot a lot of flexibility in allowing you to define your classes the way you prefer.
GeneralRe: Let's say Flexible Model instead of no Model Pin
Gerd Wagner12-Feb-15 13:22
professionalGerd Wagner12-Feb-15 13:22 
QuestionWhat about ngresource ? Pin
Nicolas Penin11-Feb-15 18:41
Nicolas Penin11-Feb-15 18:41 
AnswerRe: What about ngresource ? Pin
Gerd Wagner11-Feb-15 22:08
professionalGerd Wagner11-Feb-15 22:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.