AngularJS SPA with ASP.NET Web API back-end

Question

I am new to AngularJS and need some advice on how to structure a SPA with Web API for an internal order entry system (SEO not a concern). I would like to set this up in a clean, well-structured fashion for efficient development, debug & deployment.

Here is what I am planning to do:

• Not use MVC / razor views (leave all routing and rendering to Angular)
• Create two separate Visual Studio (2013) solutions: one just for the AngularJS SPA portion and one for Web API portion (for serving all data to the SPA).

As an alternative, I guess I could use one Visual Studio solution for the full site (both SPA and WebAPI) and then use razor to serve the html files (or figure out how to disable the default MVC plumbing and serve straight HTML instead, to avoid the MVC overhead). Also, would I then have to put both the SPA and the WebAPI in the same project to be able to debug with Visual Studio easily?

Or perhaps there is a better approach?

Advice on best practices / good approaches on this would be appreciated.

Answer 1

We have created a two different projects under the same solution , First one is the empty web application and the next one is a class library .

1) Web application project consists of angular JS and the other client side components .

2) Class library consists of the Web api controllers and the relevant components such as filters and the other details.

We have a bootstrap class in the class library project which bootstraps the webapi and the container for us. Also it makes the testing of Web api easily

   public class Bootstrap
   {
        public void ConfigureRoute(HttpConfiguration httpConfiguration)
        {
        }

        public BootStrapApplication ConfigureContainer()
        {
        }
   }

From the global.asax in the app_start we call the BootStrap application class and the method .

For application structure on angularjs i found the John papa guide efficient https://github.com/johnpapa/angularjs-styleguide

Hope this helps