89

I come from using ASP.NET MVC/Web API and now I am starting to use Angular but I am not clear on the proper way to mix them.

Once I am using Angular does the MVC sever side concepts still provide any value ? Or should I strictly be using Web API purely to get data for the angular HTTP calls ?

Any tips you have for a ASP.NET MVC guy transitioning to Angular would be helpful

2
  • 4
    It would depend, but I would think "should I strictly be using Web API purely to get data for the angular HTTP calls" is correct way to do it. Commented Jan 13, 2014 at 17:42
  • Here's a tutorial for building an Angular app with an ASP.NET Core Web API backend -> medium.com/@levifuller/… Commented Aug 22, 2017 at 0:57

4 Answers 4

114

Pure Web API

I used to be pretty hardcore with ASP.NET MVC but since I've met Angular I do not see one reason why I would use any server side content generation framework. Pure Angular/REST(WebApi) gives a richer and smoother result. It's much faster and allows you to build websites that come quite close to desktop applications, without any funky hacks.

Angular does have a little learning curve, but once your team has mastered it, you'll build much better websites in less time. Mainly this has to do with the fact that you don't have all these state(less) issues anymore.

For example imagine a wizard form with any traditional server side framework. Each page needs to be validated and submitted separately. Maybe the content of the page is dependent on values from a previous page. Maybe the user pressed the back button and is re-submitting an previous form. Where do we store the state of the client? All these complications do not exist when using Angular and REST.

So ... come over to the dark side ... we've got cookies.

Similar question

10
  • I agree re: the speed and smoothness of developing apps via Angular. In MVC or WebForms (ugh) you spend this time getting it to spit out markup, and then have to do a couple of passes bolting client code onto it, which feels weird, is labor intensive, and because of the disconnected nature, wastes a lot of time doing simple things.
    – moribvndvs
    Commented Jan 13, 2014 at 18:15
  • 3
    @Narayana; This provides some SEO love.
    – null
    Commented Jan 30, 2014 at 19:39
  • 5
    Because when I rename a property on a particular model, I don't have to dig around AngularJS to for "magic strings"? Angular is nice, but in a strict type safe world of .net, tighter integration allows you to leverage type safety from the server side. Commented Mar 19, 2014 at 22:39
  • 6
    @Sleeper Smith: I've had this argument many times with people on my team, but in the end code conventions, unit testing and separation of concerns offers a lot more than all the type safety in the world. I too would love to see JS to be replaced by something like C#, but in reality that's just not the case. All that matters is the result you can achieve. Your customers probably don't care about your coding preferences, they want a cool looking, smooth performing website and they want it quick. Angular gets that job done.
    – null
    Commented Mar 20, 2014 at 6:13
  • 1
    For example, when using KnockoutJS I used to create a normal ASP.NET MVC app and each view would receive model data from the MVC Controller. Then this data from the server would be serialized into JSON and from there KnockoutJS would transform it into observable data, so I would get two-way data binding. And that was great! But what what do we do that now, since AngularJS has it's own routing system? What happens with MVC routing? Do we use it at all? What happens now with "_Layout" view and @RenderBody()?
    – AlexRebula
    Commented Jul 12, 2015 at 12:02
44

AngularJS is more associated with the single page application paradigm, and as such, doesn't benefit much from server-side technologies that render markup. There is no technical reason that precludes you using them together, but in a practical sense, why would you?

An SPA retrieves the assets it needs (JS, CSS, and HTML views) and runs on its own, communicating back to services to send or retrieve data. So, a server-side technology is still necessary for providing those services (as well as other means such as authentication and the likes), but the rendering parts are largely irrelevant and not particularly useful because it's a duplication of efforts, except MVC does it on the server side and Angular does it on the client. If you're using Angular, you want it on the client for best results. You can make Angular post HTML forms and retrieve partial views from MVC actions, but you'd be missing out on the best and easiest features of Angular and making your life harder.

MVC is pretty flexible and you could use it to service calls from an SPA application. However, WebAPI is more finely tuned and a bit easier to use for such services.

I've written a number of AngularJS applications, including a couple that migrated from pre-existing WebForms and MVC applications, and the ASP.NET aspect evolves towards a platform for delivering the AngularJS app as the actual client, and for hosting the application layer the client communicates to via REST (using WebAPI). MVC is a fine framework, but it usually finds itself without a job in these sorts of applications.

The ASP.NET application becomes another layer to the infrastructure, where its responsibilities are limited to:

  • Host the dependency container.
  • Wire the business logic implementations into the container.
  • Set up asset bundles for JS and CSS.
  • Host WebAPI services.
  • Enforce security, perform logging and diagnostics.
  • Interfacing with application caches for performance.

Another great thing about an SPA is it can increase bandwidth of your team. One group can blast out the services while the other lays in the client app. Since you can easily stub or mock REST services, you could have a fully working client app on mock services and swap out for the real ones when they're done.

You do have to invest up front on Angular, but it pays off big. Since you are already familiar with MVC, you have a leg-up on some of the core concepts.

5
  • Ok, so I want to go with Angular and have a .NET back-end to keep my productivity with the API, Entity Framework, security, etc. Do my pages still need a server-side master-child configuration/layout? What do I use for that - WebForms (nope - then I get viewstate), MVC, ASP.NET Web Pages, or something else?
    – Sean
    Commented May 6, 2014 at 10:08
  • 1
    Technically, you do not need any server pages, layout pages, etc. Just straight HTML will do. However, depending on the size and complexity of your application, you may want to break your Angular app into several distinct applications by functionality (and you can link from one app to another using a common nav or whatever). In that case, you could use a layout page to keep things DRY and consistent. Furthermore, you're probably using asset bundles for CSS or scripts, and having root pages that are Razor or whatever would bring those things together well.
    – moribvndvs
    Commented May 6, 2014 at 10:37
  • 1
    I have been using ASP.NET MVC for three years now on at least 8 big projects and I got used to this fine, mature server-side framework. However I know the importance of SPAs and I adore Angular, so I decided now to go for mini SPAs or hybrid apps... or "SPA silos" as Miguel Castro called them. My question is - What about authorization and authentication? I know ASP.NET MVC eases this task siginficantly. How is this done without ASP.NET MVC?
    – AlexRebula
    Commented Jul 13, 2015 at 9:49
  • 1
    @AlexRebula I think the question is more a question of how do you want to do authentication in WebApi vs MVC. Normally it's with cookies (you can even use FormsAuth or ASP.NET Identity cookies with WebApi) or headers (OAuth, etc.). Either approach is fully supported by both Web API and Angular, but requires you to make a choice on implementation. It's hard to give you a more precise answer without more details about what you are doing and what your specific goals are.
    – moribvndvs
    Commented Jul 13, 2015 at 16:20
  • @HackedByChinese I understand. And now I think it would be really great if I had more time to dig into Web API more...
    – AlexRebula
    Commented Jul 15, 2015 at 8:39
6

It depends on the project you are working on.

If angularJS is something new for you I would rather pick a small low risk/pressure project to get started and ensure you learn how to do things in the right way (I have seen many projects using Angularjs wrong because of pressure, deadlines... lack of time to learn it in a proper way, e.g. using JQuery or accesing the DOM inside the controllers, etc...).

If the project is a green field one, and you have got some experience on AngularJS, it makes sense to abandon ASP.net MVC and in the server side go for pure REST/WebAPI.

If it's an existing project, you can pick up a complex subset of functionality and build that page as a separate angularJS app (e.g. your app is composed of a big bunch of standard simple / medium complexity Razor based pages but you need and advanced editor / page, that could be the target piece to build with AngularJS).

2
  • 1
    I like your answer and agree in most what you said. However there is one thing that troubles me. ASP.NET MVC is a very nice and mature server-side web framework with great built-in features such as authentication and authorization. You wrote that one could abandon ASP.NET MVC in order to go for pure REST/WebAPI. Now I wonder: Is authentication and authorization as easy to accomplish as in ASP.NET MVC? Not to mention how easy it is to implement OAuth for Google etc.. So my question is, how easy it is to accomplish all those thigs with REST/WebAPI. So I would consider to have a mini SPA.
    – AlexRebula
    Commented Jul 13, 2015 at 9:36
  • In our case we setup a token in every http request (http default single place to add it) use ASP .net MVC / web api AuthorizeAttribute to check the token and permissions, you can as well inside the web api method get that token and perform more fine tuned security checking. If you need OAuth there are libraries as well on the angular side to help you with that.
    – Braulio
    Commented Jul 15, 2015 at 10:02
0

You can use Angular framework for front end development i.e to construct views. It provides you a robust architecture and once you learn you will find it's advantages over Asp.net MVC's razor view engine. To fetch data you have to use WebAPIs and now ASP.Net MVC project support both WebAPI and MVC controllers out of the box. You can refer below link start with Angular and ASP.Net MVC application development.

http://hive.rinoy.in/angular4-and-asp-net-mvc-hybrid-application/

There are two frameworks currently available for developing UI components for angular applications. I have used both these frameworks in one of the angular projects that I worked.

Material https://material.angular.io/

PrimeNG https://www.primefaces.org/primeng/#/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.