I have planned to create web application using AngularJs with MVC-WebApi server side. Could you please explain the Project structure? is it neccessary to maintain MVC project structure in server side also?
2 Answers
It's a good idea to separate between library scripts and your own script files for the AngularJS application. I put my AngularJS code in a subdirectory (e.g. "apps") and all the libraries (including the AngularJS files in the Scripts file (since NuGet will put the files there too).
Within the apps folder you can create a AngularJS specific folder hierarchy containing only your client-side code. For more details about structuring the AngularJS application see here.
Structuring the ASP.NET part of the application depends on what features you're using. If you want to use MVC you will need a controller for serving up your "shell" (the index page containing in which the AngularJS application will run) and your partial views. These Views need to be within the regular MVC Views folder structure. For simpler AngularJS applications I remove MVC and rely on static html files and ASP.NET Web API, since you're rarely need MVC/Razor Features (Script Bundling is the most interesting part of MVC for single page applications). All the data for your app can be served from the Web API, leaving you primarily with the controllers, app_start, scripts, content and the app folders.
ASP.NET allows you to reconfigure the way how Views and Controllers are located if you're not happy with this project structure.
Comments
It's probably best to create a regular asp.net MVC/web-api project, following the conventions established for similar projects, for example separate folders for Controllers and Views etc. You can then use the Scripts folder for your Angular code. I would also recommend following Angular conventions and structure inside this folder.