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

tereško
  • 58,060
  • 25
  • 98
  • 150
user2256870
  • 955
  • 1
  • 8
  • 9
  • 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. – MikeSmithDev Jan 13 '14 at 17:42
  • Here's a tutorial for building an Angular app with an ASP.NET Core Web API backend -> https://medium.com/@levifuller/building-an-angular-application-with-asp-net-core-in-visual-studio-2017-visualized-f4b163830eaa – Levi Fuller Aug 22 '17 at 00:57

4 Answers4

115

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

Community
  • 1
  • 1
null
  • 7,906
  • 3
  • 36
  • 37
  • 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 Jan 13 '14 at 18:15
  • Thanks, I also was wondering why we need both and came here. I see in the following post that not using MVC "makes your site invisible to search engines". http://stackoverflow.com/questions/19609148/with-angularjs-web-api-why-we-need-asp-net-mvc-and-iis What's the deal with that? – Narayana Jan 30 '14 at 15:58
  • 3
    @Narayana; [This](http://www.yearofmoo.com/2012/11/angularjs-and-seo.html) provides some SEO love. – null Jan 30 '14 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. – Sleeper Smith Mar 19 '14 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 Mar 20 '14 at 06:13
  • @null btw I'm not saying not to use Angular. I'm saying you can leverage and mesh both side. You can generate server side JS calling razor syntax for server side model property name and outputting it through cache + CDN. T4MVC can generate Ajax endpoint URL and pump it out through JS file, reference by RequireJS. – Sleeper Smith Mar 20 '14 at 07:36
  • @null OK, I get what you're saying and thank you for the explanation. But this still dos not entirely answer the question. MVC has a few very nice bult-in features that I am not sure how to implement that easily in Angular alone. For example Authentication and Authorization. Not to mention the easy way of implementing login for Google, Twitter etc.. I am confused about how to make use of all the good stuff that ASP.NET MVC offers if I decide to go for Angular alone. So, how to merge both? – AlexRebula Jul 12 '15 at 12:00
  • 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 Jul 12 '15 at 12:02
  • I really want to keep using the best of ASP.NET MVC. Watched a few courses, but haven't come across this answer yet. Can you help or point me to any direction? – AlexRebula Jul 12 '15 at 12:02
  • @null we've got cookies. Epic lulz – Leonardo Wildt Dec 11 '17 at 16:07
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.

moribvndvs
  • 42,191
  • 11
  • 135
  • 149
  • 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 May 06 '14 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 May 06 '14 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 Jul 13 '15 at 09: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 Jul 13 '15 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 Jul 15 '15 at 08: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).

Nathan S.
  • 5,244
  • 3
  • 45
  • 55
Braulio
  • 1,748
  • 14
  • 23
  • 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 Jul 13 '15 at 09: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 Jul 15 '15 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/#/

rinoy
  • 471
  • 4
  • 10