3

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:

enter image description here

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.

Community
  • 1
  • 1
Bob Horn
  • 33,387
  • 34
  • 113
  • 219
  • My company is implementing a large-scale MVC/AngularJS project, as those were my boss' requirement due to the customer's wishes. I was not aware about how it's wrong to mix those two. We didn't have any issues. All of the URLs were generated using `@Url.Action()` in the _Layout page to ensure that changes to the routing would be mirrored in the client. I'd like to see those links. – krillgar Apr 02 '14 at 20:44
  • Are you using Angular's routing? If so, that would mean that you're not using MVC's controllers, right? – Bob Horn Apr 02 '14 at 20:46
  • Can you please expand on problems with routing in MVC you are facing? Often people have problem with MVC routing be way to flexible/forgiving rather than too rigid... – Alexei Levenkov Apr 02 '14 at 20:47
  • I've never had problems with MVC routing. But I've also never used Angular before. Angular has its own way of routing. – Bob Horn Apr 02 '14 at 20:48
  • I would go with ASP.NET. Just use the AngularJS SPA Template as a jump start: http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83 – Dunken Apr 02 '14 at 20:53
  • @BobHorn We are using Angular's routing as well to determine some things client side. So yes, we do both. Some of the Angular routing was done using those properties we set on the _Layout page. – krillgar Apr 02 '14 at 21:04
  • Web API with HAL https://github.com/JakeGinnivan/WebApi.Hal or Collection + JSON https://github.com/WebApiContrib/WebApiContrib.Formatting.CollectionJson then just consume it with Angular. Also you can install HotTowel.Angular by John Papa https://www.nuget.org/packages/HotTowel.Angular/ – Matija Grcic Apr 02 '14 at 21:13
  • Hello BOb, see the discussion I had with another new Angular user here http://stackoverflow.com/questions/19965961/laravel-4-as-restful-backend-for-angularjs same idea as stated below. View the Angular as a client that consumes JSON from a REST API, use client side routing for updating the views ($route or ui-router) on the server side routing should just be done to create the RESTful endpoints. – shaunhusain Apr 02 '14 at 21:16

3 Answers3

7

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-templating2

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.

Matt
  • 4,462
  • 5
  • 25
  • 35
Gorgi Rankovski
  • 2,303
  • 1
  • 23
  • 32
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.

Babak Naffas
  • 12,395
  • 3
  • 34
  • 49
1

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.

Ph0en1x
  • 9,943
  • 8
  • 48
  • 97