ASP.NET MVC or ASP.NET Web API + AngularJS [closed]

Question

I have some experience in the three technologies, MVC, Web API, and AngularJS.

But I used MVC + jQuery alone, and Web API + AngularJS alone.

I found some articles about mixing MVC + AngularJS, but actually I didn't get the point: why do I need to mix them?

So my question now: - What the pros and cons of mixing "MVC + AngularJS" over "Web API + AngularJS"

Edit: How to get the best of all worlds by mixing MVC +Angular? Or by using Web API +Angular I will not miss anything (which is what I think is the case)? Or what will I miss from MVC if I decided to go for Web API + Angular alone, especially when I am targeting SPA?

Answer 1

The main advantage of using MVC + Angular over Web API + Angular is that your server can directly manipulate the html markup within a view before sending it to the client. In the case of Web API, the server only produces a json serialized model and the view is fully Angular's concern.

Another reason to prefer the MVC approach would be if you do not wish to make use of the full range of Angular capabilities. For example, you might choose to use MVC for routing rather than the Angular route provider.

A disadvantage of the MVC + Angular approach is that your html markup will contain mixed angular and razor code. This will probably make it less readable and any person working on it will have to be able to work with both languages.

Also, if you end up using only a small subset of angular, it might be a good indication that you could have used a simpler javascript framework instead. For example, if you only use model binding, you could use Knockout.

Finally, you might consider using both MVC and Web API along with Angular in an effort to get the best of both worlds. You could for example use MVC views for SEO related markup and use Web API for exposing your model.

Answer 2

I am not sure questions like this have correct answer cause most times used technologies are bound to specific business requirements.

If you are developing back-office web application, accessible only for registered users(or small group of people), using WebAPI + Angular increases overall user experience in terms of speed, performance and responsiveness.

If you are developing a website which is dedicated mostly for 'guest users', needs SEO, needs to be indexed, has complex usability requirements etc. you should forget about whole cool stuff connected with Single-Page-Application(I believe most WebAPI + Angular apps) and switch to tools which enables you to fulfill specific needs.

I don't think you should consider differences between MVC + Angular vs WebAPI + Angular - the question is to use Angular in addition to MVC + jQuery app. If you have a lot of logic in your views(not business logic of course) and want to avoid binding data to whole bunch of jQuery objects, require Angular and make your life easier. Angular core doesn't have any routing functionality so saying that it can be used only with SPA/SPI application is a bit stupid.

For most of my projects I use jQuery to manipulate DOM and Angular to manipulate data.

Answer 3

You could indeed go for just WebAPI + AngularJS. If you start building from scratch, there's no need for MVC. You can just serve up a static index.html that fires up your AngularJS application and take it from there.

I've done projects like this in the past, but also have done project where we also decided to have an MVC app with AngularJS and WebAPi. With that we created several SPA's within the webapp. I think I've heard the term 'pockets of SPA' somewhere probably in .NET Rocks!.

So in case you need to display static data, just quickly throw something together in MVC. If there's a page that uses a lot of user-interaction, serve it up with a simple controller + view and hook up all the behavior through AngularJS and WebApi. In short: it allows you to use 'best of both worlds' approach, where you can quickly display static data using MVC, and leverage AngularJS in case you have a very interactive page.