AngularJS SPA Template for Visual Studio

This project is a skeleton for a simple single-page web application (SPA) built on top of the:

AngularJS 1.2.3 - JavaScript Framework
Bootstrap 3.0.3 - CSS Framework (based on LESS)
HTML5 Boilerplate - HTML5 best practices
ASP.NET Web Pages 3.0 (Razor) - AngularJS templates / views
ASP.NET Web Optimization Framework - Bundling & Minification

This is a port of the official Angular Seed project, but optimized for the Visual Studio development environment. See a related blog post:AngularJS + ASP.NET: Questions & Answers

Warning: I didn't test this template in Visual Studio 2012. Let me know if there are any isues with it.

P.S.: For a more advanced project template check out this one - Node.js-friendlyASP.NET Solution Template

Project Structure

AngularJS Single Page Application (SPA) Project Structure

AngularJS Learning Resources (Wiki)

https://github.com/jmcunningham/AngularJS-Learning

Source Code

https://github.com/kriasoft/AngularJS-SPA-Template

FAQ

Q: How to run unit tests?

The easiest way is to use Chutzpah JavaScript Test Runner Visual Studio extension for that. Alternatively you can configure Grunt.js / Karma test runner, but that would require some configuration steps on your part.

Q: How to detect errors and potential problems in my JavaScript code?

You can check your code with JSHint validator built into Web Essentials extension for Visual Studio. You can also adjust JSHint settings to suite your needs in the /Scripts/.jshintrc file.

Q: Why 3rd party JavaScript libraries are NOT located in the default folder?

Putting them in a sub-folder will help keeping your your project structure clean. And starting from the next version of NuGet you'll be able toexplicitly declare where do you want to keep your vendor specific files.

Q: How to add Web API to the project?

Right-click on the project > Manage NuGet Packages > find and install "Microsoft ASP.NET Web API 2.1 Web Host" (assuming you want to host your app inside IIS). Then you'll need to make sure that it's enabled inside Startup.cs/Configure() method as explained here.

Q: How can I nest a file under another file in Solution Explorer?

Either by editing .csproj manually or by using the File Nesting extension for Visual Studio:

Q: How can I make this template work with Kendo UI?

Start by adding script references to the layout page (./index.cshtml) and 'kendo.directives' dependency to the main angular module (./scripts/app.js; angular.module('app', ['kendo.directives', ...]) as explained here: http://kendo-labs.github.io/angular-kendo/

Q: How can I pull and merge the latest updates into my project?

You can either update NuGet packages within your project, or alternatively you can pull and merge the latest updates via Git - add a 'base' remote, then fetch and merge updates from the base repository to your local one:

Pull and Merge AngularJS SPA Project Template

Credits

This project template is brought to you by Konstantin Tarkus (@koistya),KriaSoft.

License

The source code is distributed under the MIT license.

Support

Have questions, feedback or need help? Email me at hello@tarkus.me or schedule a mentoring session on codementor.io/koistya.

Do you preffer having JavaScript or TypeScript code by default in this project template? Are you OK with the project structure? Do you like the default set of NuGet packages included into this project template? What else is on your mind? Share your feedback!