40

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 server side concepts still provide any value? Or should I strictly be using Web API purely to get data for the angular HTTP calls?

Is there maybe a more stripped down starting point I should use if the VS template is adding a lot of stuff I don't need?

I like the idea of a strict divide of server side = pure data and client side = pure HTML processing.

Improve this question
1

2 Answers 2

Reset to default
17

The easiest way to think about it is that the server serves a state. Angular can manage collecting the updates to that state and send it to an web/api on the server. If you want to go more single page app, then the server side code would be just the initial state of your app.

Web API is a excellent place to start for for pulling your data into your app. You will eventfully update the default routs to meet your environments design requirements and if you want, to be strictly rest-full.

There are quire a few libraries that ASP4 included by default and those were also included in the MVC4 templates. There really are many things included in the page that are not needed, as wells as included in the project and never even referenced by their default pages. You should be safe removing everything except jQuery and I even go as far as taking out jQueryUI. Many of the defaults mean well but once you start to fill in your domain knowledge you will use libs that meets your specific needs.

Even with a strict divide you will find server side mvc is still a very clean backing to a single page app. Effective routing in delivering your page and your api calls is a prime example. Another useful feature are controllers that return views that don't use the master page or are only a partial view. Angular has a "view" that it can fill with a template, which can be a static file or a partial from one of your routes.

I read you comment earlier today and threw together a demo solution to show what I originally mentioned. The solution also has some of the original "fluff" removed though when adding Angular and Bootstrap you get the core libraries and every derivation there with. That's the trade off of using nuGet.

Check it out: https://github.com/QueueHammer/AngularWithPartialViewViews

In learning Angular I found the Angular-Seed program fairly helpful. Especially after I tried the demos on their site. The sample project is just different enough that it helps you learn. After that I looked at Angular-Require-Seed but that's another post. Angular Step by Step http://docs.angularjs.org/tutorial Angular Seed: https://github.com/angular/angular-seed

Improve this answer
12
  • So would it make sense to have a few server side Views that is how MVC normally works.. and then for each of those views there will be multiple client side angular views (maybe a create/details/edit for some specific entity) .. If so, then I wish I could find a template like that to put me on a good path to using MVC and angular together
    – punkouter
    Aug 28, 2013 at 15:36
  • Added a link to the demo project and where I first started to look into Angular. I'm going to blog about SPAs in general and some of the better patterns/libraries that solve their architectural challenges over the next couple of months. I'll update my post when I do.
    – QueueHammer
    Aug 29, 2013 at 5:52
  • just got your link.. looked at the demo. looks good.. first question is.. so.. You are keeping the ASP.NET MVC functionality in place as the main page you start at.. beyond that page everything else is angular partial views.. Could you have TWO main ASP.NET MVC views? in other words.. the ASP.NET MVC view is a parent to the angular partial views.. for example.. maybe I don't want ALL partial views under ONE ASP.NET view.. does that make sense? Could you show me that? That what put me in a good spot for a starting point I think.... or maybe what I am saying doesn't make sense ?
    – punkouter
    Sep 5, 2013 at 20:25
  • and what is the point of the partialsController.cs since it never calls any of these ?
    – punkouter
    Sep 5, 2013 at 20:27
  • You can put the partials almost anywhere. You could make more controllers with an action per view, i used one "partialsController.cs" the routs in the project matche up with the views defined in the angular app module. So, partial/view1 is calling the partials controller and getting the action viewOne which then gets the view ViewOne. In the actions you can call View(); with a string parameter pass the location of your view. So you have flexibility to organize it almost any way you like.
    – QueueHammer
    Sep 6, 2013 at 16:13
18

Is there maybe a more stripped down starting point I should use if the VS template is adding a lot of stuff I don't need?

These VS templates are good to trim down initial setup and learning curve in the beginning, however you would need to customize them for your real project needs.

For example, on this site http://www.reviewstoshare.com, my friend using AngularJS along with ASP.NET MVC. Keep in mind that this site was already built using ASP.MVC + Jquery for in page interaction as needed.

On the other hand there is still some "Ajaxy" nature to the site like comments, voting, flagging etc. Not too different than Stackoverflow itself. Before AngularJS it was a mess of Jquery plugins and functions within $(document).ready() callback, not to mention the JS code was not testable much.

Overall, having a proper mix of both make your site slick and functional.

enter image description here

Some good references to look:

Improve this answer
10
  • Or if under a collection of angular partial pages there are a few regular MVC views wouldn't that help (as I mentioned in my above comment)
    – punkouter
    Aug 28, 2013 at 15:38
  • This is true, the SEO issues has been resolved by fresh updates.
    – Yusubov
    Aug 28, 2013 at 15:56
  • 3
    So, not to criticize but wouldn't the negative statements on the chart actually be below the x axis? That would make the chart look like an ever expanding sin wave. I know its not your chart, but its bad science.
    – QueueHammer
    Sep 6, 2013 at 16:17
  • 12
    QueueHammer you must be real fun at parties. :-)
    – Thomas Stock
    Nov 7, 2013 at 9:29
  • 1
    I am totally stuck in the two lower points of the wave on either side of the 'Very Cool!' bubble, as one combined shitty angular hell.
    – MetaGuru
    Jul 10, 2014 at 20:32

Your Answer

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

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