As I’ve spent time with AngularJS, I’ve become very impressed with the clarity it brings to developing enterprise-level web applications. I thought it would also be valuable to create a GitHub repository with some examples of how one might integrate AngularJS with ASP.NET MVC.
Thus, the Angular-MVC-Cookbook repository was born. I hope that I (and perhaps some of my colleagues at Wintellect) can provide some good, practical examples of techniques that make the most out of the integration of these two valuable frameworks.
But maybe some overview first.
Why AngularJS?
There are many frameworks out there that try to reign in the complexities of web application development to varying degrees of success. Steve Sanderson does a good job of summarizing some of the options here. What makes AngularJS different? Let me offer a few opinions.
I’ve done a lot of development on both Windows and the Web. I’ve enjoyed writing MVVM applications in Silverlight and WPF (using .XAML and view models) but writing web applications never seemed to fit into a similar simple but effective model. However, the model that AngluarJS defines feels familiar and comfortable. For example:
- AngularJS provides declarative markup. You express your intent in the markup, including data bindings and custom HTML syntax.
- Where you worked with a view model and a data context in .XAML, you work with a controller and a scope in AngularJS.
- If you are manipulating view components in your controller (i.e. manipulating DOM elements), you are doing it wrong (similar to manipulating controls from your view model, which is another no-no).
- AngularJS does not place requirements on your models. For example, you do not have to use observable patterns in order to make use of the framework.
- AngularJS supports dependency injection, primarily because it supports a robust testing story from the ground up, not as an after-thought.
I’m not implying, of course, that AngularJS perfectly matches up to Silverlight/WPF programming, but the similarities are appealing. More importantly, the model that AngularJS provides should help developers be more productive, just like the MVVM pattern helped XAML developers.
Why ASP.NET MVC?
It might surprise you that I would even ask this, but I think it is an important question. ASP.NET MVC is a robust and mature platform for creating enterprise-level web applications, but there are of course other platforms out there that might be more appealing. Should one consider a Microsoft platform over Apache/LAMP, Node.js, or other alternative?
I would summarize my answer to this as follows:
- The .NET runtime is a very mature, well understood framework that remains very popular.
- The ASP.NET MVC framework provides a good, easy-to-use abstraction over web protocols, including web APIs.
- The platform is highly extensible. Parts of the framework can be easily replaced as necessary in order to provide enhanced functionality.
- Microsoft has continued to strengthen the underlying platforms that ASP.NET MVC builds upon in Windows Server and SQL Server.
- ASP.NET MVC provides a good testing story.
My purpose is not to make a sales pitch for Microsoft technologies, but I do believe that ASP.NET MVC is a strong platform for building enterprise web applications.
Why AngularJS and ASP.NET MVC?
As we all know, web development has moved forward. Whereas before we might create beautiful Flash or Silverlight applications to enhance the user’s web experience, those days are unfortunately gone. With the preponderance of devices using the web, we can’t depend on plug-ins to drive our applications.
Web standards have also moved forward. HTML5 and CSS3 are now the new goal posts for building an enhanced web experience. SPA (single-page applications) are the new normal.
Therefore the robustness of the ASP.NET MVC platform needs an equally robust client framework. I am convinced that AngularJS will be a great partner.
And, perhaps, as we add examples to this cookbook, you might be convinced as well.