87

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?

bitsmuggler
  • 1,689
  • 2
  • 17
  • 30
  • 4
    Well... if you're going to anchor AngularJS to ASP.NET... you're not really giving it a fair comparison. It's like you're looking to take the Javascript out of Angular, and that's just not the way it's meant to happen. Angular is meant to be your framework for the client, and works best when you use very little server side templating: https://www.simple-talk.com/blogs/2013/10/16/angularjs-on-top-of-asp-net-moving-the-mvc-framework-out-to-the-browser/. Things like authentication and such make sense, but leave razor out, and just go straight .NET and create an API layer for Angular with it. – Brian Vanderbusch Apr 15 '14 at 07:15
  • 3
    I think what you really need is just AngularJS with ASP.NET WebAPI. I think it has best of both world. I tried mixing MVC with AngularJS and it was not very nice experience when I ran into issues, so would suggest not to get in to that trap. One thing I miss with this approach is the device based views that MVC with Razor engine can provide. There must be a way to overcome this, but I didn't expriment enough yet. – Kiran May 07 '14 at 03:39
  • Having worked with Angular for just a few short months (although it seems like forever), I would never go back to Razor. The more you work with Angular, the more you come to appreciate it - flexibility and power, sometimes it feels like magic. I should say that Web API does not play nicely with Angular, at least on the form POST, but that could be worked out. It is not an easy transition for a C# programmer syntax wise, as javascript is not a strongly typed language. But as you overcome this hurdle, you would come to appreciate Angular. – Florida G. Nov 09 '15 at 00:14
  • Razor is a horrible thing even among templating engines. You'll notice a drastic increase in productivity when using angular over any templating engine (Jade, handlebar, razor etc). Use a backend which serves JSONs (can be web-api, node-express or PHP) and a angular front end. And just to note, knockout is not nearly as good as angular.... All the best... – Giridhar Karnik Jan 30 '16 at 19:59
  • 1
    @BrianVanderbusch Not really sure what you're talking about. The backend doesn't matter at all. It could be anything. He's saying he'll use ASP.NET as the backend and angular as the client side front end. Angular still needs to make calls to the server for data. This has nothing to do with not giving Angular a fair comparison. – user441521 Oct 14 '16 at 14:24
  • @BrianVanderbusch - that's what the question is asking. Angular with .NET API. Not Angular with .NET WebForms or MVC – Don Cheadle Mar 29 '17 at 14:55

2 Answers2

102

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.

Mohammad Sepahvand
  • 17,364
  • 22
  • 81
  • 122
  • 3
    And i'd like to add to that, with angular you get to update your templates dynamically, which is obviously, awesome – Willem D'Haeseleer Apr 15 '14 at 07:28
  • 4
    Yea, when it comes to developing a more dynamic and responsive front end vs cost of development, there really is no competition. – Mohammad Sepahvand Apr 15 '14 at 07:32
  • @user189756 how are you delivering the HTML pages to the client when using the Web API approach? – Yoav Jun 02 '16 at 07:43
  • @Yoav This is an old answer, but at the time it was an MVC host with a Single controller. – Mohammad Sepahvand Jun 02 '16 at 07:48
  • @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? – Yoav Jun 02 '16 at 07:55
  • 1
    @Yoav Precisely. But I'll add that the other answer is also excellent, especially taking things like SEO into account. – Mohammad Sepahvand Jun 02 '16 at 09:01
  • 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). – user441521 Oct 14 '16 at 14:27
54

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.

Community
  • 1
  • 1
Chandermani
  • 42,589
  • 12
  • 85
  • 88
  • 12
    "...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. –  Oct 23 '15 at 17:06
  • 7
    AngularJS is not limited SPAs, you can very well build a multi page website with angular along with with deep linking.... – Giridhar Karnik Jan 30 '16 at 19:56
  • 3
    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. – Tom Stickel Feb 03 '16 at 08:22
  • 5
    TypeScript is a good option for type safe js. – Kyle J V Mar 05 '16 at 16:20
  • 9
    AngularJS was made by Google. If it lacks in SEO they are doing something wrong. – Worthy7 Jun 09 '16 at 08:07
  • 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 :-) – ssougnez Feb 28 '17 at 11:41
  • 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. – ferr May 08 '17 at 15:54
  • Could you please explain what do you mean by "How can you structure your app as SPA or multiple SPAs"? – BornToCode Jul 02 '17 at 00:26
  • 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. – Chandermani Jul 03 '17 at 07:37
  • 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. – xpagesbeast Feb 05 '19 at 05:28