Q: How do I setup an AngularJS application in Visual Studio 2013?
I like to take the approach that AngularJS is a tool and if it is used correctly for the specific job or solution then it could be integrated along with an ASP.NET MVC application – OR NOT. If so, I think you need to determine what the boundaries are for its use and when it is appropriate – there should be a good division of responsibility for MVC and AngularJS. When, Where, and How are you going to use it.
Q: Which project template should I use?
Again, it depends based on what you need. You can use the ones that come installed with your version of Visual Studio or you can use some that are created by other concerned developers like yourself.
AngularJS-SPA-Template @ https://github.com/kriasoft/AngularJS-SPA-Template
Here are some project template options provided by Visual Studio 2013
- Singe Page Application: Setup for a single page application that is ASP.NET MVC specific. There are controller, model, and view folders setup for your application with all of the other MVC goodness.
- Empty Web Application: Only contains a web.config file. I guess you can delete it if you don’t need it. This is as basic as you get.
- Web API: This template provides you with basic ASP.NET MVC, but it includes a sample “Value” Web API controller that uses the new ApiController base class. This project template will allow you to implement Web APIs along with Angular – you have the option of adding as much MVC that you want or not.
Q: When would I use Angular with no ASP.NET MVC (i.e., Angular straight up)?
Recipe: AngularJS ONLY :: Single Page Application (No ASP.NET MVC).
You would make this choice when ASP.NET MVC features are not required or needed. Also, it might be a requirement – you would only be using the Visual Studio 2013 as an IDE or development environment for your application. Visual Studio is a good option to use as an IDE for an AngularJS application. There are some intellisense templates out there that make it a rich experience. You can also use Resharper Extensions for Angular.
This is a great choice when you do not require any HTTP calls for data or data persistence (same application). Or you are using a different HTTP source that is well-known or exposed API to provide data for the application.
Suggested Project Template: Empty Web Application
Q: Should I mix Angular with ASP.NET MVC Views (i.e., mixed or blended mode)?
Recipe: ASP.NET MVC Application + Web API + AngularJS SPA
This might be a good choice if you want to use the ASP.NET MVC views to serve up the pages of your web site and/or application. It provides some SEO benefits – or so I’ve heard. Basically, you are using ASP.NET to load up the page initially and supply it with whatever it requires for the initial display.
Most likely, you will use Angular for subsequent displays and requests for models. In this recipe, there is a good separation of concerns. ASP.NET is responsible for the initial loading of pages and subsequent calls for information are done by Angular. You might even have just partial sections or partial templates within the ASP.NET MVC page that use specific Angular controllers, models, and views. This would be considered another example of a mixed-mode.
Suggested Project Template: Single Page Application
Q: When would I use ASP.NET MVC, Web API and AngularJS (i.e., mixed mode with a splash of Web API)?
I could see this recipe with or without the ASP.NET MVC. The interesting part here is the Web API mixed in. The Angular controllers may need to make some HTTP calls to retrieve or persist information. Web APIs make this possible. The routing and model binding provided by Web API make the implementation a lot easier.
This would be a great choice when your Angular controllers need a place to call for data.
Suggested Project Template: Web API Application
Q: What packages do I need to implement an AngularJS application?
If you are using Visual Studio, it is probably a good idea to use the Package Manager to retrieve the packages you require.
- AngularJS (required)
- jQuery (required)
- Bootstrap (optional)