For a SPA, AngularJS compliments the server MVC framework and lot of functionality can be offloaded to client side browser (which was traditionally done by MVC framework on server). Angular comes with it’s own template engine, routing engine, Dependency Injection(DI) framework and can very well augmentreplace similar components on server. But there is decent amount to effort required to setup AngularJS for a MVC project every time one wants to incorporate it within their solution.To ease this process we are releasing a Visual Studio (20102012) project template for AngularJS SPA. It integrates
- ASP.Net MVC 4 + WebAPI
- BootStrap 2.3.2
- AngularJS 1.2.0 RC1
You can download this template from CodePlex download section. The template is also available in Visual Studio Gallery. You can also search for the template from with Visual Studio by navigating to Tools->Extension and Updates
Once you install the template on your machine, you would get a new option for ASP.Net MVC 4 project type when you create a new project in Visual Studio.
Update: We have update the template to support VS 2013, and the project template is available not inside Web folder
Select the new AngularjS SPA template and create a new project. Once the project is created, add the prerequisite nuget package (see note below) and compile and run the project.
Note: When you create a new project using the SPA template, you need to install all the prerequisite nuget packages manually using either Nuget Package Restore option available on the Visual Studio solution or using Nuget.exe on command line
nuget install packages.config
If you are having problems with package restore, make sure you are using the latest nuget package manager in Visual Studio.
You should get a home page like this
You are all set to get you hands dirty on AnuglarJS ! This AngularJS SPA template override the default MVC template so there are no page refreshed. All navigation are handled by AngularJS. There is even a demo list-detail implementation available under the ‘Demo’ site menu. The demo site also has a Learn Angular section where we have added some hand picked resources on learning AnuglarJS.
Wait for a follow up post which would describe a typical structure of a AngularJS application and how it integrates with a ASP.Net MVC solution.