ASP.NET MVC6 Angular Tutorial

Basic ASP.NET 5 MVC6 Angular tutorial using easy gulp tooling.

View on GitHub

This is a simple, opinionated, tutorial to show how to create an Angular (v1.5) single page application with an ASP.NET 5 / MVC 6 Web API back end, using Visual Studio 2015 on Windows. There are hundreds of different ways of writing Angular applications, many good, a lot bad. This guide takes you through creating an application using one particular style, based on the guidelines set forth in the excellent Angular Style Guide by John Papa.

This tutorial won't talk about other ways you can structure your Angular code, but it is worth being aware that other examples elsewhere on the internet may use differing styles which might look radically different to that presented here - confusion may lie that way!

Pre-requisites

Visual Studio 2015 should be installed along with Beta 7 of ASP.NET 5, and Git, Bower, NPM and NuGet need to work (so any proxy settings should be set correctly before starting).

This tutorial uses a Gulp script for building and minifying the javascript. Gulp depends on Node.js so it is important to have an up to date version of that available on your machine - and that Visual Studio is set to use it:

  1. Download the latest Node.js installer - at the time of writing, this is 4.1.1.
  2. Install it.
  3. Open Visual Studio 2015 and select Tools -> Options -> Projects and Solutions -> External Web Tools
  4. Add "C:\Program Files\nodejs" (or wherever you installed it) to the list of locations, and move it to the top of the list - this ensures that Visual Studio uses the latest Node.js rather than the relatively out-of-date version that is bundled with Visual Studio.
  5. Restart Visual Studio, just to be sure.

Familiarity with Visual Studio is assumed.

Opening the solution

The solution is hosted on GitHub, with different branches representing the different stages of completion of the tutorial. To get started, follow these instructions to clone the repository.

  1. Open Visual Studio 2015 and ensure Git is set as the current Source Control Provider (in Tools - Options - Source Control)
  2. Select "Open from source control" at the left, then on the right, select "Clone" under "Local Git Repositories"
  3. Enter the URL https://github.com/mrsheepuk/ASPNETMVC6AngularExample.git and choose a local working folder to place it in.
  4. Once cloned, double-click the AngularGettingStarted.sln solution file in the "Solutions" section.
  5. Check that the NPM, NuGet and Bower package restores all work OK - if it is all working correctly, you should be able to switch to the solution explorer and run a debug on the AngularGettingStarted project - this should fire up a web browser with a "Hello World" page.

Ready to start!

Onwards to Part 1