ASP.NET MVC or ASP.NET Web API + AngularJS

Question

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

But I used only MVC + jQuery and only Web API + AngularJS.

I found several articles about mixing MVC + AngularJS, but I really didn't understand: why should I mix them?

So, my question now: - What are 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 using the Web API + Angular I will not miss anything (which, in my opinion, is)? Or what will I skip from MVC if I decided to go only for Web API + Angular, especially when I aimed at SPA?

Answer 1

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

Another reason to prefer the MVC approach is if you don't want to use the full range of Angular features. For example, you can use MVC for routing rather than the Angular route provider.

The drawback 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 anyone working on it will have to work with both languages.

Also, if you use only a small subset of angular, this might be a good indication that you could use a simpler javascript structure instead. For example, if you use only model binding, you can use Knockout .

Finally, you can use both MVC and the Web API with Angular to get the best of both worlds. For example, you can use MVC views for SEO related markup and use the web API to publish your model.

Answer 2

You really can only go for WebAPI + AngularJS. If you start building from scratch, there is no need for MVC. You can simply run the static index.html , which launches your AngularJS application and selects it from there.

I have done such projects in the past, but also did a project where we also decided to create an MVC application with AngularJS and WebAPi. With this we have created several SPA in webapp. I think I heard the term "SPA pockets" somewhere, probably in .NET Rocks !.

Therefore, if you need to display static data, just quickly push something together in MVC. If there is a page that uses a lot of user interaction, serve it with a simple controller + view and connect all the behavior through AngularJS and WebApi. In short: it allows you to use the “best of both worlds” approach, where you can quickly display static data using MVC and use AngularJS in case you have a very interactive page.

Answer 3

I’m not sure that such questions have the right answer, because most of the technologies used are related to specific business requirements.

If you are developing a back-office web application accessible only to registered users (or a small group of people), using WebAPI + Angular increases the overall user interface in terms of speed, productivity and speed.

If you are developing a website that focuses primarily on "guest users", SEO needs, indexing, complex usability requirements, etc., you should forget about all the interesting materials related to Single-Page-Application (I find most WebAPI + Angular applications) and switch to tools that will allow you to meet specific needs.

I don’t think you should take into account the differences between MVC + Angular vs WebAPI + Angular - the question is whether Angular is used in addition to the MVC + jQuery application. If you have a lot of logic in your views (and not business logic, of course), and you want to avoid binding data to a whole group of jQuery objects, require Angular and simplify your life. The Angular core does not have any routing function, therefore, saying that it can only be used with the SPA / SPI application is a little silly.

For most of my projects, I use jQuery to control the DOM and Angular to manage the data.