Skip to main content

AngularJS Model - ViewModel

Recently Robin Ward did a comparison between AngularJS and Ember (both the post and the comments are interesting read). One of the complaint that Robin had that AngularJS does not provide any specialized model class. As described in the blog

There is no standard Model base class, nor is there a component or interface in AngularJS that defines what a model is supposed to be.

What that means is that anything defined on $scope can acts as model, as this sample on the blog describes




For some (like me) this is the flexibility where as for others who want a more structural approach this is a nuisance.AngularJS does not even provide any definite guidelines around how the model should be actually designed to be effective with AngularJS

This leads to what we call as $scope pollution. We define multitude of properties on the $scope object and managing it becomes difficult.  Looking at the code one cannot tell what is the actual model and what properties are just to support UI logic.

Model Design - Convention

We have been using AngularJS for some time now and we have devised a convention which  has helped us to keep $scope pollution under control. Here is how we organize our model.
  • On the Controller scope we create a object viewModel. ViewModel according to us is a model which has been tailored to support a specific UI, helping in easing data binding.
  • We define a property model on either the controller scope or on the viewModel defined above. This model is something that is loaded from the server and updated back on edits.
This is how a sample controller looks 


So any controller defines only one or two property directly on the $scope and that's it !

What could be the advantage of this small convention? Many :)


Readability

To start with, anyone reading the code can know what the model is and what variable are just used to support AngularJS data binding (such variables are created on viewModel object).

Ease of passing model around

Any decent size angular app/page would consist of multiple partial views and directives working together to provide the necessary functionality. One of the challenge in such setup is how to keep partial views and directives as independent as possible.

For partial views (views loaded using ng-include) here is how we define our template and main view.



As you can see, any template that requires a model to work on, gets it through ng-init. Just looking at the ng-init assignment one can determine what does a partial template require. Passing model around to these sub views become easier. Each of these partials can have their own controller and create their own viewModel object.

For directive, this is what we can do



For directives it becomes easier for us to create isolated scope, which has great benefits in terms of re-usability.

As you can see in both cases dependencies are clearly defined and there is a single root object at all levels.

Comments

Jamie said…
Thanks
james said…
Do you add methods to these objects as well or just directly to scope?
chandermani said…
Well we keep the same conventions there to, vm has methods required by current scope, if the method needs to be shared with child controller we may define it on the scope directly.
james said…
Thanks

Popular posts from this blog

Caching Images downloaded from web on Windows Phone Isolated storage

I was helping on a Windows Phone application where the requirement was to cache the images the phone downloads on the isolated storage for offline viewing. I wanted a solution which was simple and as transparent as possible. While researching I found  someone wrote a Silverlight converter for loading images from isolated storage. Taking that as a base I created a converted which can Load image from web (http + https), and persist it to isolated storage. In case of network connectivity issues can load the same image from isolated storage. It does that by mapping the http url to a isolated storage location. In case the network is down and the image is neither there in cache, loads a default image, passed as parameter to converter. Here is the gist for the implementation. To use the converter Import the name space. Declare the converter as resource. Set the Image Source Property to use this converter like this 

Integrating ASP.Net MVC with AngularJS

We recently released a Project Template for ASP.Net MVC and AngularJS here and here . I did a follow up post detailing how the project template has been setup and how to make AngularJS and MVC play well together on my company blog . If you are interested in understanding how the template works head over to my blog post and read it!

IIS Url Rewrite and HTTP POST data

If you play around with IIS Url Rewriting rules and try to do redirects on an HTTP POST you loose your POST data. To make sure you get the post data you have to set the `redirectType` to `Temporary` within your rules. So the action configuration looks like this <action redirectType=" Temporary " type="Redirect" url="http://{HTTP_HOST}{REQUEST_URI}"> </action> You may think what scenario warrant a POST request redirect. We faced one such scenario while doing SSO with a federated Identity Provider (IP)  such as Google, Azure AD. In federated authentication scenario once the user is authenticated by the IP, it redirects back to your site with claim tokens in a POST request over secure channel (https). In our case we wanted to redirect to user back http after receiving the request. But any redirects were causing loss of token. By doing a 307 (Temporary) redirect we were able to preserve the post data.