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.

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

  • 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 '13 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 '13 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 '13 at 20:25
  • and what is the point of the partialsController.cs since it never calls any of these ? – punkouter Sep 5 '13 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 '13 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:

  • 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 '13 at 15:38
  • This is true, the SEO issues has been resolved by fresh updates. – EL Yusubov Aug 28 '13 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 '13 at 16:17
  • 12
    QueueHammer you must be real fun at parties. :-) – Thomas Stock Nov 7 '13 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 '14 at 20:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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