Overview:
Since the release of ASP.NET MVC, there are many open source libraries that developers can use in their ASP.NET applications. One of the most popular ones are the binding frameworks that come handy for SAML and Silverlight developers. The fact is that there are handful of JavaScript binding frameworks but the ones that stand out are Knockout, Backbone and Angular. Two questions always raised by many developers when it comes to choosing binding frameworks is 1. which framework should he/she be using for a given application and 2. why. Frankly, I have worked with both Angular and Knockout and explored others as well but I would like to say that I like them both. If you pressed me further on which one I prefer, I would vouch for Angular over Knockout. The reason is that you can do two-way binding, templating, currency formatting, pluralization, reusable controls, RESTful API handling, AJAX handling, modularization, and dependency injection. In other words, Angular is not just a binding framework but a full-fledged client MVC and MV* framework. In this post, I will not go through the features of Angular or compare how they measure up to other alternative frameworks, but rather mention tips on how to use Angular in .NET applications.
Angular is only for creating Single-Page Applications (SPA) is a myth:
I have spoken with .NET developers about the potential of using Angular when creating .NET applications and the answer I have come to is that Angular is only for creating SPA applications. In other words, Angular is just for SPA's and not worth using if you already have Knockout as an alternative for example. Is that really true? After working and investigating Angular and its capabilities, I have found Angular is full-fledged Model-View Controller, binding framework, MV* framework and much more. So my conclusion is that you can use Angular for SPA, mini SPA or just a binding framework and I will discuss these functions in the following points:
Using Angular with ASP.NET MVC as SPA:
Angular is true SPA framework that gives you the ability to easily write SPA's for mid- or large-scale applications. There is already a visual studio template extension where you can download it. This template gives developers an idea of how to use Angular combined with Twitter Bootstrap (CSS framework) to create responsive SPA's. There is also a demo to illustrate how to create a SPA and a tutorial from a respected online IT instructor, Dan Wahlin, as well. I recommend listening to the video and reading the tutorials and investigating the code of the demo to get a good understanding of the SPAs and how to create them using Visual Studio Angular Template.
Using Angular with ASP.NET MVC as mini SPAs:
Before I demonstrate the creation of mini SPAs, I would like to touch on what I mean by it. In a big-size enterprise web application, you can break the application into many modules, each module can be represented as a "mini web application". So in that sense, you can use Angular to create a mini SPA for a given module. I have found this feature useful when you need to maintain an existing application that was written before the existence of Angular and want to add the cool behaviors of a single page application. For you to create a mini SPA, there is no Visual Studio template. However, one good practice you should keep in mind (assuming you have an ASP.NET MVC application) is to declare an ng-app directive in the _layout.cshtml page and set it dynamically as shown in this line of code
<html data-ng-app=”@ViewBag.InitialModule”>
where initialModel is the mini SPA. Moreover, on the MVC view page that is called by a controller that will act as an index.cshtml page for a mini SPA, you can set the app directive there like
@{
ViewBag.Title="Title"
ViewBag.InitialModule ="xxxxx";
}
where xxxx represents the name of the module or mini SPA, if you will. From there you can implement your mini SPA like the SPA illustrated above.
Using Angular with Web API
If you want to use Angular as an MVC framework without using ASP.NET MVC, that is also a viable option and you can use Angular the same way Java or PHP developers are using it. You write client side MVC and utilize the routings, validation, binding, directives and restful API. You can just create web API controllers and post methods as JSON and do anything you want to do on the client side -- if you choose to do so. Or you can use it for just one-way or two-ways bindings in a smaller section of an HTML view or the entire view in MVC or in an ASPX page in the web form.
That being said, I expect Angular to be the choice for creating responsive ASP MVC applications. I could see it gaining popularity as JQuery and Entity Frameworks. This assertion is not because Google is behind it, but that Angular is the only test-driven client framework that I know of and is a full-fledged client binding framework.
How do you use Angular in .NET Applications? I look forward to hearing different thoughts and suggestions.
