Should I be using both AngularJS and ASP.NET MVC?

Question

I started learning AngularJS and ASP.NET MVC, but am not sure why to use them both together in the same project?

Aren't they both MVC frameworks? Should I be using them both in the same application? Isn't it one or the other?

Answer 1

If you're building a single page application (SPA), then you probably don't need the "MVC" in ASP.NET MVC. Views, especially dynamic views, are likely delivered/manipulated client-side. Angular handles that just fine.

But maybe you don't want a 100% SPA. Then what? Imagine instead 10 pages, but 10 pages that are very dynamic. After a user logs on, there's a little user badge up in the right-hand corner. That's not dynamic. It just shows a few nifty things like the user's "score" and their latest selfie. You cache the nifty things so they can be easily retrieved. Now, you can go two ways with this. If you're a client-side MVC purist, you just fetch the badge data after the initial HTML payload is delivered, just like all the other data. But maybe you're not a purist. Maybe you're the opposite of a purist. Maybe you're an impurist. So, instead of delivering the initial HTML, delivering some JavaScript that will post back to your server, post via JavaScript to grab badge data, and then ultimately merge that data into a view via client-side MVC, you simply decide to merge the data already in your cache into a view on the server and then deliver that as your initial HTML. After your initial HTML is delivered, you proceed with your typical client-side MVC antics.

So... MVC on the server and on the client is just a convenient way to organize code that used to be a mess in 2001. You don't have to choose one or the other. You can choose both. Granted, the more you do after that initial HTML is delivered, the less you need server-side MVC. Still, it's there for you if you need it. For example, I worked on a ASP.NET MVC/Angular application where external Angular templates might actually be .NET MVC ActionResult. That means your server controller could merge data into its view, deliver it to Angular as a template, and Angular's controller could then merge its data into the view. I'm not saying this is a good idea, but it just shows that one form of MVC doesn't make the other obsolete.

Besides, no matter how you deploy Angular, you're going to need a way to deliver that initial HTML, the templates, and most importantly the data. Why not use a platform that makes it easy? There are many, but .NET MVC is no slouch. Like I said, you can make the initial HTML and external Angular templates the result of an MVC action, but better yet, you can use .NET'S Web API to deliver the data. Web API is as delicious as apricot compote.

Summarized: MVC is just a pattern. You may want to use that pattern on any number of physical layers. It can't be used up. Use it freely if it makes sense. Besides, Angular may not be MVC anyway (so says people who care about these things), so feel free to use it with a tool that has "MVC" in the name. Hell, even if it is MVC, mix and match as desired.

Answer 2

ASP.NET MVC is a server-side framework; it doesn't care what JavaScript libraries do you use. AngularJS is a client-side library, which doesn't care what server-side technology powers the website—it can be Python, ASP.NET MVC, or even the plain old bunch of static HTML files stored directly on disk.

ASP.NET MVC and AngularJS are both compatible, and there are plenty of projects out there which use them together.

Do you need to use both? Not really. It depends entirely on the needs of your project.

• If your website is dynamic, you have to use some server-side scripting. You could use ASP.NET, and the fact that you are using AngularJS won't make your server-side code more MVC. If you want to be able to structure your server-side application as MVC, you'll rather pick ASP.NET MVC.

• Similarly, the fact that you are using ASP.NET MVC doesn't imply anything about the structure of your client-side code. You can put all your JavaScript in a single file without any thought about the structure and be happy with that (until the project starts to grow). Here again, AngularJS presents itself as a way to structure your application on client-side.

---

Side note: you tagged your question ASP.NET MVC 3. Unless this is a legacy project you have to maintain or you have specific constraints when hosting the application on legacy servers which weren't updated for the last four years, you could use ASP.NET MVC 4 or 5 instead.

Answer 3

If you are using visual studio there is a new 'single page app' MVC website template which includes angular and MVC Web Api controllers.

This works well because your MVC server-side code provides json endpoints for the angular client side code to call.

Additionally you can use the MVC controllers to serve the basic html view or views for your single page app. this gives you the power of the server side generation, authorization, redirects, error handling etc

Often you will want a small amount of server generated html/javascript even on a single page app, things like endpoint urls for different environments, different languages, or even the odd authentication page which may just be easier to do server side.

Answer 4

3 years later, use ASP.NET Web API to serve up your data and Angular (js or newer) to structure your app on the client side. If you're making a static site then just use ASP.NET MVC.