AngularJS is an awesome Single Page Application (SPA) JavaScript framework developed by Google.
While other JavaScript frameworks such as Knockout.js (that comes bundled with ASP.NET MVC project template) have their benefits, I find AngularJS has much more to offer and should be seriously considered whenever one plan to build any SPA. We have been using AngularJS for quite some time now and would like to help .Net developers community to evaluate and adopt this framework.
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
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.
Don’t miss out on the latest tips, tools, and tactics at the forefront of HR and Employee
We love what we do so much and we're always looking for the next big challenge, the next problem to be solved, the next idea that simply needs the breath of life to become a reality. What's your challenge?
