current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 7 down vote favorite
3

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.

share|improve this question
1  
Follow google's recommendation for best practices for angular app structure: docs.google.com/document/d/…. Do use MVC/razor views for the initial page load and Web API for everything else. Keep controllers, scripts, resources organized by functional area rather than structurally separate (as per googles guidelines). Do use VS2013 bunding and minification support. – pixelbits Aug 15 '14 at 6:00
1  
Do take advantage of MVC controller actions to manage multiple SPAs for any large scale site. There are many advantages to doing this (leverage best practices for ASP.NET security) – pixelbits Aug 15 '14 at 6:05
    
It is OK to use MVC actions/razor views, but mostly for the initial page load, sometimes for redirects to another SPA in the same site. – pixelbits Aug 15 '14 at 6:09
    
Are you looking for both the Angularjs and WebAPI ? – satish Aug 15 '14 at 9:54
    
@pixelbits Thanks - good reference and advice! So it sounds like I should put both the AngularJS SPA and the WebAPI not only in the same Visual Studio solution, but also in the same project (but of course use different projects for repositories, models, business logic, etc.). Any thoughts on this? – Jim Balo Aug 15 '14 at 13:36
up vote 5 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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