ASP.NET MVC 5 vs. AngularJS / ASP.NET WebAPI

Question

I'm currently evaluating the programming model for creating future Webapplications in my company. So I will decide between ASP.NET MVC 5 (with Razor Views) and AngularJS with ASP.NET WebAPI. What are the advantages / disadvantages of these two programming models?

Solution 1

My 2 cents. I personally prefer pure HTML views, an entirely angular front end along with a Web API/EF/SQL Server back end, basically no Razor. Razor is an abstraction to help programmers render HTML, these days everyone's coming to the conclusion that removing these abstractions is a better idea, hence the evolution of ASP.NET from web forms, to MVC etc. It's not really difficult for developers to get to grips with HTML and use an angular front end, moreover this makes UI designers jobs easier, they have pure HTML and JSON/Javascript, they don't need to go about understanding MVC, Razor, controllers and actions. We used to work completely on MVC, in our latest project we moved to a Web API back end and an angular front end, and we've noticed that our UI designer's productivity has vastly improved.

Solution 2

I believe you cannot compare. AngularJS is a Single Page Application (SPA) framework whereas ASP.Net MVC use the standard model where one navigates between pages. Whether you want to build a SPA is decided by factors like

• Do you want SEO. Which most of these JS rich framework have limited support.
• How can you structure your app as SPA or multiple SPAs.
• Coming from a type safe language C# to JavaScript programming is a challenge.
• Learning AngularJS and using it effectively.

We use the standard MVC 5 razor view to setup the initial AngularJS views so you can even combine them together if required.

See this answer Can you use AngularJS with Parse.com? to derive more context.

Comments

[Willem D'Haeseleer]

And i'd like to add to that, with angular you get to update your templates dynamically, which is obviously, awesome

[Mohammad Sepahvand]

Yea, when it comes to developing a more dynamic and responsive front end vs cost of development, there really is no competition.

[Admin]

"...whereas ASP.Net MVC use the standard model where one navigates between pages." This is simply false. MVC apps - using razor - can be designed as SPA's very easily.

[Giridhar Karnik]

AngularJS is not limited SPAs, you can very well build a multi page website with angular along with with deep linking....

[Tom Stickel]

AngularJS is not a SPA. You can use it like a SPA, but that is not automatic or necessary. Have have to add in the routing dependency ng-route in order to even have routing. AngularJS is incredible and can be a great SPA , but its just silly to say AngularJS = SPA.

[Kyle J V]

TypeScript is a good option for type safe js.

[Yoav]

@user189756 how are you delivering the HTML pages to the client when using the Web API approach?

[Mohammad Sepahvand]

@Yoav This is an old answer, but at the time it was an MVC host with a Single controller.

[Yoav]

@user189756 still a very informative answer :). so basically you used the MVC engine to deliver the layout page and the rest of the site navigation was handled using angular routing and the ng-view directive inside the layout page? or am I completely off track?

[Mohammad Sepahvand]

@Yoav Precisely. But I'll add that the other answer is also excellent, especially taking things like SEO into account.

[Worthy7]

AngularJS was made by Google. If it lacks in SEO they are doing something wrong.

[user441521]

No harm in using asp.nets routing to delivery the correct pages and then just having the views be pure HTML with Angular that make API calls (or hell could even be calls to the normal controller for data).

[ssougnez]

Google now parses JavaScript, so using AngularJS is not really an issue with Google, although it is with stuff like Facebook/Skype that (AFAIK) still don't parse AngularJS. However, solutions exist to fix this and with the emergence of all these web front end Framework, I'm pretty sure than this will be supported by the main tools sooner than later :-)

[ferr]

When you talk about SEO being problematic with AngularJS -- the problem lies in the client-side rendering of content -- i.e. Ajax GET requests upon page loading which may be missed by the average search indexer. Server-side rendering (SSR) has become popular now in JS frameworks to get around this limitation. It may also be true that Google has figured out how to crawl pages that are dynamic.. but that would be complicated and impossible for some scenarios.

[BornToCode]

Could you please explain what do you mean by "How can you structure your app as SPA or multiple SPAs"?

[Chandermani]

You can create a app with single entry point and hence a single SPA. Multiple SPA means, you are building multiple entry points into the application which load the complete SPA framework. For example for a single application you can have multiple SPA endpoints for each major feature.

[xpagesbeast]

If you are looking for a server side web application platform that supports single page design or multiple page design or even make the site feel like a desktop application managing state, web sockets, and running any front end framework, have a serious look at JavaServer Faces. One of the great implementations is by Prime Faces, you also have bootFaces, AngularFaces and ReactFaces... Salesforce Lightning is based on JSF, so is modern Domino Rapid Application Development with XPages, SpringBoot runs it.