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.

gnat
  • 21,442
  • 29
  • 112
  • 288
punkouter
  • 1,123
  • 2
  • 10
  • 18
  • related: [Should website frontends be rendered in client-side or server-side?](http://programmers.stackexchange.com/questions/195144/should-website-frontends-be-rendered-in-client-side-or-server-side) – gnat Oct 13 '14 at 19:08

2 Answers2

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:

Yusubov
  • 21,328
  • 6
  • 45
  • 71
  • 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. – Yusubov Aug 28 '13 at 15:56
  • Thanks for rectifying the SEO bit, I've retracted my downvote. – Benjamin Gruenbaum Aug 29 '13 at 18: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 06 '13 at 16:17
  • 12
    QueueHammer you must be real fun at parties. :-) – Thomas Stock Nov 07 '13 at 09:29
  • What's wrong with functions inside $(document).ready()??? – user1873073 Jan 08 '14 at 21:12
  • 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
  • He has only one `ng-controller="main"` through all pages ... I'm not sure if he's doing this correctly. – Gaui Aug 11 '14 at 23:50
  • This graph if anything demonstrates everything that is wrong with Angular. "The Angular Way" effectively means "Learn crazy way no one else does stuff, for good reason". – MrYellow Apr 27 '15 at 22:18
  • @MrYellow - graph does not reflect resent developments in AngularJS. Thus it is much different from 2013 :)) – Yusubov Jun 12 '15 at 19:35
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

Tom van Enckevort
  • 193
  • 2
  • 9
QueueHammer
  • 306
  • 1
  • 5
  • 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 05: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 05 '13 at 20:25
  • and what is the point of the partialsController.cs since it never calls any of these ? – punkouter Sep 05 '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 06 '13 at 16:13
  • I was wrong.. it DOES call the server PartialControllers.. Where is it doing this ? I though once all the partial views are loaded the first time and you don't go back to the server ? Also, what advantage is it going back to the server ? Is it useful to mix angular with razor syntax or something ? – punkouter Sep 10 '13 at 16:14
  • The partials are not loaded until the view is accessed. So once the user goes to the specific view then the template / partial is loaded, and then the controller is run to fill the view. Now I chose to return the partials though a controller because I find it aggravating to enable .html or .cshtml in routes and the web config. By having a controller serve the partials you keep all the options they offer and can be composed of other partials for very large views. The razor syntax should not be mixed with angular; e.g You should bind the data either server or client and not try to do both. – QueueHammer Sep 10 '13 at 18:58
  • So basically you are replacing the client angularJS routing system with the MVC server side routing system ? Still not sure of the advantage.. what do you mean 'options they offer'... What is the point of MVC Views except you give it a model and use RAZOR to bind to that model ? – punkouter Sep 13 '13 at 17:50
  • The options they offer are the viewbag and model binding which can be explicitly typed (also a feature). The views can also be nested which is not something Angular supports at the moment. Routing on the server and client are two different things. Local routes can only reflect state and in angular only a view in the app. Were as server routing is how you reach your resources/files and how they are presented to the user. – QueueHammer Sep 13 '13 at 18:07
  • Ok.. SO I could use model binding from MVC for an initial load or perhaps for HMTL items that would not change.. and then angular for the pieces in the page that will change.. So basically take advantage of MVC when I can.. and take advantage of angular when that makes sense. yes ? – punkouter Sep 13 '13 at 19:45
  • Absolutely! :-) – QueueHammer Sep 13 '13 at 19:59
  • ok.. that is interesting.. seems like a good thing to me.. though I heard others saying don't combine them.. use one or the other.. but I suppose there are times where MVC has some tools that make things easier and I can save angularjs for the core active area of the page. .the editable grid... the item details/validation.. ok. ill try using your example code for the next project. see how it goes. – punkouter Sep 16 '13 at 18:12