Blending ASP.NET MVC with Angular

ASP.NET MVC is an opensource framework, created by Microsoft, for developing next generation web applications, with focus on the server-side logic. ASP.NET MVC embraces a patterns-based way to build extensible and maintainable applications while enabling a clean separation of concerns. For the client-side, it relies by default on jQuery, in order to enable some interactive features and also improve the user’s overall experience.

It’s true that jQuery has been playing a major role in the development of web applications over the past years, mostly because it is easy to learn, plus it supports a consistent syntax across different browsers. The problem is that jQuery code is practically impossible to test, hard to extend, and most importantly, hard to maintain.

On the other hand, browsers have evolved into powerful programmable platforms, enabling applications to deliver highly interactive, seamless experiences. Given the significant shift of functionality from the server to the client, developing for the browser has become more important than ever. Unfortunately, jQuery’s shortcomings make this challenge harder to tackle.

Introducing Angular

Angular is a opensource JavaScript framework, maintained by Google, designed for building dynamic web applications. Angular uses pure HTML as its template language, but allows us to extend HTML’s syntax and combine it with functionality in order to build higher-level components.

Moreover, it supports patterns such as dependency injection (DI) and data binding, which eliminate the need for much of the code we otherwise have to write, and enable us to write automated tests for our applications, or even practice test-driven development (TDD).

A major difference between jQuery and Angular is that in jQuery we consume HTML through JavaScript code, whereas in Angular we mostly consume JavaScript code through HTML.

Getting the best of both worlds

Blending two full-blown frameworks can lead to some truly impressive results, although there are a few challenges to be aware of, such as overlapping features (e.g. routing) and lack of native Angular support by ASP.NET MVC (e.g. Razor helpers). Its up to us to strike a balance between the frameworks and use exactly what we need from each one, depending on the specific project, its requirements and constraints. Over the next few blog posts I will be documenting a number of strategies on how to get the best of both worlds.

The first post of the series: Building Angular Templates with Razor

If you liked this post, share your thoughts in the comments section below, and stay tuned!