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?
Add a comment
|
4 Answers
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.
answered Dec 25, 2015 at 7:54
-
3
-
Can you tell me, for example if there's a web api that's providing me with data, and I want to show this data in grid, do I do the looping and templating using Angular or MVC? Do I call the web api service using which how? How do you decide from the beginning of the project which way you're going to go?– NatalieCommented Dec 25, 2015 at 13:01
-
1@Natalie If the data is from Web API, you're likely fetching it client-side. This means you're binding in Angular, not .NET MVC. You don't explicitly loop. You bind the data to your grid/table using ngRepeat. To fetch the data, you'd likely use the $http module and call your Web API endpoint. As for deciding which approach to use, that's quirky. There's no black and white answer. You have to experiment, evaluate, and follow your instincts. Commented Dec 25, 2015 at 22:47
-
... one word of caution. If you haven't used Angular or other full-service JavaScript framework before, you'll need to spend some hard hours learning the ropes. They're not necessarily straightforward. I can assure you, though, that they make your life easier in the long run. Work hard. Stick with it. You'll do great. Commented Dec 25, 2015 at 22:50
-
1@ScantRoger I apologize, but your answer did not clear things up for me. If I'm using a MVC server-side framework, where the View is agnostic, how do I tie Angular in with it? The server (the web API) already contains the Model and Controller definitions. So, if I use Angular, I'm being imposed MVC again. So does it end up being MCVCM...? (Model & Controller definitions both on client side and server side) Or is that the reason I shouldn't be using an client-side MVC framework, such as Angular, if I'm already using a MVC framework for my Web API Commented Aug 15, 2016 at 12:26
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.
answered Dec 25, 2015 at 1:58
-
1thanks MainMa. I am aware that AngularJS is client side, and MVC is server side. I am also aware that other libraries such as handlebars, knockoutjs can be used in MVC.NET, and Angular can be used in php, java applications. What am asking is why to use both of them together, since both of them do the same thing which is "MVC", but one is client side and one is server side. Why mixing the MVC frameworks in client side and server side? Can't we do an application that's only Angular application? Or an application that's only MVC.net application?– NatalieCommented Dec 25, 2015 at 2:04
-
@Natalie: I see. I edited the answer to provide more information about that. A short response is that you mix those two frameworks in projects where it makes sense to have a specific structure on both server and client sides. Commented Dec 25, 2015 at 11:32
-
Can you tell me, for example if there's a web api that's providing me with data, and I want to show this data in grid, do I do the looping and templating using Angular or MVC? Do I call the web api service using which how? How do you decide from the beginning of the project which way you're going to go?– NatalieCommented Dec 25, 2015 at 13:02
-
I have the same questions in my mind. I couldn't find a reason to use asp.net MVC at all. I mean it looks like Asp.net Web API on server side and Angular on client side would be enough. But I thought first; Web API = Data Access Layer, Asp.Net MVC = Business Logic Layer, Angular = UI layer. But from Angular side we can only make Web API calls so we can not use Asp.Net MVC server side. I think we need a good example why we may need to use Asp.Net MVC. Commented Jun 28, 2017 at 20:20
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.
-
1When creating the standard SPA template in VS 2015 CE, I see bootstrap, jquery, knockout, respond, and sammy in the script folder, but no angular. Am I missing something?– TK-421Commented Jun 2, 2016 at 19:36
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.
