Angular.js and ASP.NET MVC 4

Question

I have an ASP.NET MVC 4 project and I'm stuck on an architectural decision on which JavaScript framework or library to use Angular.js or Knock.js. I am currently leaning towards using Angular.js over Knockout.js, but don't want to find out midway during project development I made a mistake.

Here is some background:

• We need two-way model data binding
• We need the ability to test views. I want to be able to do end to end unit testing. Also, we are using continuous integration.
• "Save Changes" functionality. i.e. if a user makes changes on a page we need the ability to detect any changes and prompt the user to save their changes before they navigate away from the page
• "Notifications" functionality. i.e. user will be logged on approximately 8 hours and will need to be notified and updated of changes made by other users (errors, data status changes and the like)
• We need to "future proof" our application. Currently the business unit hasn't decided if we will need to support mobile devices, but I know it's just a matter of time.
• Our team consists of developers with varying experience levels from very junior to senior developers.
• Currently our models are complicated and may get even more so
• We need to also consider RAD, code reuse, and maintainability

I have read the excellent answer here and watched Scott Allen's interview about Angular here

Since we are unable to change from our current ASP.NET MVC 4 architecture to use something on the server side like Web API I have some concerns in trying to implement Angular.js with MVC 4. Will this cause us to have two models one on the server and one on the client?

I am not looking for a "which is better" discussion about Angular and Knockout because I think they both have their pros and cons. I am looking for actual code on implementing a JavaScript framework or library in an ASP.NET MVC 4 application. I need a solution that I can live with 2+ years from now :)

Any ideas or suggestions? Maybe the answer is not Knock or Angular, but some other JavaScript framework?

Answer 1

my 2 cents worth.

preamble - i have worked with both angular and knockout. I'm on my 3rd non trivial front end built with a MVVM/MVC lib.

I started with knockout because its MVVM is very similar to the wpf/silverlight mechanics. And it works well. The tutorials and documentation are top notch. All your coders will be able to work with knockout.js within days or if they have used mvvm under .net, then within hours.

However, these days I am using angular and will probably stick with it for the following reasons.

• angular is a complete framework - knockout is really about just the 2 way binding. you still need other libraries like backbone.js/jquery to do the rest of your work.

• angular has dependency injection. which is perfect for adding
  mocking for testing as well as giving structure to your code.

• angular treats normal JS variables as observables within its $scope object. that means you dont have to declare them in a special way

I'm not an angular fanboy, i still think they could move more over to the MVVM architecture instead of the "funky" MVVM/MVC hybrid architecture they currently have.

The biggest problem with angular is the documentation. Compared to knockout, it is woeful. It will add additional time and cost to getting your coders up to speed. Once they are there however, it is currently the best choice IMHO.

Answer 2

Glad to see this questions was of interest to the community ;) Just for completeness here's what I ended up doing:

I did go with AngularJS and ASP.NET MVC 4 and was glad that I did. Although, Angular has a steep learning curve but its worth it because of the power of directives.

• We need two-way model data binding - On occassion I needed to set some initial values coming from the MVC controller. I used the ng-init attribute to accomplish this.
• We need the ability to test views - I followed the AngularJS docs for testing
• "Save Changes" functionality - I implemented this using a directive in Angular
• "Notifications" functionality - I implemented this using toastr.js and and directives (schweet)
• We need to "future proof" our application - I don't know Google's plans for AngularJS, but after working with AngularJS I can't see it going anywhere anytime soon and expected it to become more widely adopted :)

Answer 3

I don't have a lot of input on AngularJs, but want to provide some thoughts on Knockout.

Knockout is primarily a data-binding library to connect views to view model, but doesn't really provide a lot of capabilities beyond that. I wouldn't recommend using knockout alone as the main library to build a complex client-based web site.

You didn't mention whether you're implementing spa-like functionality (i.e. hash-tag navigation) or whether you're primarily using MVC server-side views (e.g. Razor). If you're just looking for quick data-binding on a per-page level, I would even reconsider that. To me, both of these (angular or knockout) are designed to enhance the client-side development experience - not so much a server-side approach such as MVC.

If you're considering an SPA approach, even in part, you'll likely want some framework that provides some level of control over the view activation life cycle.

As far as data-binding power and reliability, I believe in Knockout. I have been using it extensively, and have grown quite fond of it. If you like the feel of knockout, you may want to look into Durandal. Durandal is a decent framework is able to meet the needs of many "spa" web projects. It's a client-side framework built on top of several proven libraries, including Knockout. It's a little (lot) more light-weight than Angular, and possibly easier to user.

We are building a fairly large ASP.Net MVC web site using Durandal with Knockout in conjunction with an additional facade to tighten things up from a development standpoint, and the integration with ASP.Net MVC is straight-forward. I don't recommend trying to use the server-side knockout stuff that's out there; I just find that to limit the real power of the MVVM pattern.