The AngularJS SPA Template for Visual Studio is a project skeleton that gives you a runnable single-page web application built on AngularJS 1.2.3, Bootstrap 3.0.3, and ASP.NET Web Pages 3.0 (Razor).
What is the AngularJS SPA Template for Visual Studio?
The AngularJS SPA Template for Visual Studio is a boilerplate for starting single-page web applications on the Microsoft stack. It combines AngularJS 1.2.3 on the client side with ASP.NET Web Pages 3.0 using Razor syntax to serve AngularJS templates and views. The template also includes Bootstrap 3.0.3 for responsive styling, HTML5 Boilerplate for HTML best practices, and the ASP.NET Web Optimization Framework for bundling and minification of CSS and JavaScript. Its output is a ready-to-open Visual Studio 2013 solution containing a demo AngularJS app; you can clone the repo, rename the solution, and start developing.
Key Features
- AngularJS 1.2.3 — Uses AngularJS 1.2.3 as the JavaScript framework for client-side model-view-controller (MVC) handling.
- Bootstrap 3.0.3 — Comes styled with Bootstrap 3.0.3, a CSS framework based on LESS, for responsive layout and components.
- HTML5 Boilerplate — Includes HTML5 Boilerplate conventions for cross-browser compatibility and best-practice markup.
- ASP.NET Web Pages (Razor) — Serves AngularJS views through Razor, enabling server-side templates within the SPA.
- ASP.NET Web Optimization Framework — Provides built-in bundling and minification for CSS and JavaScript assets.
- Visual Studio 2013 solution — Ships with an .sln file (Application.sln) that you rename to your project name; works with Web Essentials 2013 extension.
- Git-based update workflow — The repo is cloned with a "base" remote pointing to the template, letting you fetch and merge upstream changes into your project.
Who is it for?
- ASP.NET developers who want to start a single-page AngularJS app inside Visual Studio 2013 without manually combining the client and server stacks.
- Development teams that need a baseline project structure with Bootstrap, HTML5 best practices, and bundling already configured.
- Learners who want to see how AngularJS can be served through Razor views on ASP.NET Web Pages.
What can you do with it?
- Bootstrap a new project: Clone the repository, rename the solution file, and open it in Visual Studio to get a working AngularJS SPA immediately.
- Test a demo app: The demo site at http://angular-demo.tarkus.me shows the template running; you can inspect the project structure to see how the pieces fit.
- Update from the base template: Use
git fetch baseandgit merge base/masterto pull in improvements from the original repository into your own project.
How does the template work?
The template is distributed as a GitHub repository. To start a project, run git clone -o base https://github.com/KriaSoft/AngularJS-SPA-Template.git MyApp, replacing MyApp with your project name. Then rename Source/Application.sln to your chosen solution name, commit the change, and open the solution in Visual Studio 2013. The solution already contains the demo application; the AngularJS and Bootstrap files are organized under the Source folder.
FAQ
How do I create a new project from this template?
Run git clone -o base https://github.com/KriaSoft/AngularJS-SPA-Template.git MyApp to create a local copy. Then rename the solution file with git mv Source/Application.sln Source/MyApp.sln, stage and commit, and open the solution in Visual Studio.
Can I pull updates from the template into my project later?
Yes. Because the repository is cloned with a remote named "base", you can run git fetch base to download new commits and git merge base/master to merge them into your working files.
Where can I see the template in action?
A live demo is hosted at http://angular-demo.tarkus.me. The demo shows the same AngularJS SPA that you get when you open the solution.
What Visual Studio version is required?
The template targets Visual Studio 2013 and includes a solution file compatible with it. The development environment section also recommends installing Web Essentials 2013.
