Wednesday, April 01, 2015

AngularJS by Example - My new book on AngularJS

For some time now i have been blogging on my corporate blog instead of my personal one. But this is something that i should share on my personal blog too as it is big :)

I have a book out there "AngularJS by Example"! Published by Packt this book targets beginners to intermediate audience.

Head over to my blog post here to learn more about the book. 

You can also checkout and buy the book on Packt website.

Happy reading!

Monday, March 10, 2014

Wednesday, February 12, 2014

Thursday, December 05, 2013

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!

Monday, September 23, 2013

Visual Studio Project Template for AngularJS SPA + ASP.Net MVC \ Webapi

I am very exited to announce that our team at Technovert has release a Visual Studio project template for AngularJS. More details on how to install and use this template are available on the Technovert Blog 

Knockout.js has been a standard library that .Net devs have been using for creating rich interactive business apps. But AngularJS from Google provides a more complete framework and is gaining a lot of dev community support. This project template can help you get up and running with AngularJS in no time and evaluate it for your future needs.

Tuesday, August 06, 2013

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


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.

Friday, May 03, 2013

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.