What .NET server-side technology can be used with an AngularJS app?

Question

I'm trying to create my first web application using AngularJS . I'm used to using ASP.NET MVC 4, so I thought I would use that on the server side and Angular on the client side. But after watching videos and doing research, it appears that it's wrong to mix those two. One of the reasons for that is the routing: Angular routes its own way, as does ASP.NET MVC.

So, for someone familiar with ASP.NET MVC, what server-side web technology could be used with Angular on the front end? I'm at the point of creating a new project in Visual Studio 2013, and these are my choices:

Note: I'm not looking for a debate about why one choice would be better than another; I'm just hoping to hear what possibilities are available. I can investigate from there.

Note 2: I could also use the Angular seed template , and I might, but that doesn't answer the question of what to use on the server side.

Edit Maybe it makes sense to use ASP.NET Web API in this case? See https://stackoverflow.com/a/21098169/279516 .

Answer 1

To me it seems like you are trying to make a Single Page Application. I understand your confusion with routing, so I will explain how we do it.

We have a ASP.NET MVC5 project that also hosts ASP.NET Web API 2. All of our MVC5 routes are being handled by single action in a single controller:

routes.MapRoute("CatchAll", "{*url}",
                    new { controller = "Home", action = "Index" }
                        );

This action returns a view and this view is the basic HTML that we need to make the AngularJS application work. This HTML contains in the head the CSS and JavaScript files needed (frameworks and application logic like controllers, directives, services etc) and in the body it contains some basic HTML like the header, footer and the ng-view element where views for each route that you map are rendered.

Now, with the ASP.NET Web API we implement our REST web services that are consumed by the AngularJS application. These web services are returning JSON objects that are well understood by AngularJS and you will use them in your JavaScript application without any friction.

To conclude, any link that you will hit in your browser, like /Home/Index, /Home/Friends, /Account/Settings etc, the server will always return the same HTML and AngularJS will read the URL and will execute the appropriate controller and appropriate view that you have configured in your application.

To read more about Single Page Application: http://en.wikipedia.org/wiki/Single-page_application

To read more about Single Page Applications using AngularJS: http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating 2

To read more about REST services: http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api

---

This is not the end of the story though. I said that any route that you hit, the server will always return the same HTML. Then why use ASP.NET MVC5? This basic HTML can be a static file, right?

Well, this concept will not work when it comes to Search Engine Optimization. Search engines bots are not executing JavaScript, so they expect that all that they need is served with that single hit on your route (link). Also, Facebook does not execute JavaScript, but also expects HTML specific to the page that the user is trying to share.

So, what we did is we created the same routing on the server side as the one mapped on AngularJS and added a filter to each action. This filter checks if the request is being made from a browser, it returns the same HTML for every action. If it is a request from Google or Bing bot, or Facebook scraper, then the filter allows execution of the action and the action returns appropriate HTML for that route. This HTML is very basic, structured really well to be understood by Google, Bind and Facebook and does not include any CSS or JavaScript.

Answer 2

It is not wrong to do this. Out of the box, Web API can deliver the JSON data that Angular JS works with.

The vanilla ASP.NET MVC project provides you with the base web app and authentication. Individual views can then be adapted to leverage the single page capabilities that Angular provides.

.NET routing can be used like any other MVC site with some of the routes serving the base of your SPA pages allowing you to developer multiple, smaller SPAs within your overall web application. You can then use Angular's routing to switch between the different views of your mini SPAs.

Answer 3

Angular.js is a clientside framewrok and could work with any backend system, because it's platform independent. You could write plain html + WebApi or put angular code both to any Web Form or MVC views and successfully consume backend server with json (for example, but really could be any) so you could just select what you prefer/know better.

And by the way, about routings or any other stuff, it's just a source to solving a problem, but you no need to use it only if guys in video say that's a cool feature. Just use something which help you to solve the problem, and leave the rest for the other time.