Angular & Visual Studio - Part 1 - Getting Started

Introduction

I remember only a couple years back thinking: "what could possibly cause me to dump jQuery". After all, it made JavaScript easy! (Note: there was nothing much wrong with JavaScript, it was the differing DOM APIs that each browser provided that made it hard.) After getting serious about client-side development and watching the space mature, I now have found my answer, Single Page Application frameworks. No I am not saying your mad jQuery skills are irrelevant, but when developing a SPA you really now have the choice on whether or not jQuery is needed. 

What this is?

This multi-part series is going to detail a process to help anyone get a SPA up and running from scratch using Visual Studio 2012 and a MVC4 .NET project. This will start out very basic so you don't need to know anything about a particular framework, but I'm going to assume that you already know the basics components of a SPA. This will also include Twitter Bootstrap for styling site, hopefully I can keep it simple enough to explain easily.

The example developed will be a simple e-commerce site. Live version available soon.

Why Angular?

There are a few tools out there that provide a SPA functionality and I am not here to argue which one is the best for you. All I will say is that the two I really appreciate are John Papa's Hot Towel stack and Angular JS.

If you are just getting started in your SPA adventures and want to know how things work under the hood, I would recommend starting with Angular. Angular provides a very complete framework that doesn't require much else for a decent sized application. Although Hot Towel is a great solution, it uses a couple different libraries to provide the functionality of a SPA and I feel that it adds complexity when getting started.

References

The main Angular site - http://angularjs.org/
Angular documentation - http://docs.angularjs.org/api
Angular GitHub - https://github.com/angular
Module Resource - http://ngmodules.org/

1. Getting Visual Studio prepared

Visual Studio has gained a lot of ground in the client-side development domain and it only continues to get better with their updates and the web essentials extension. I now feel that it provides a full enough feature set that I can use it effectively for client side development.

This series will focus on Visual Studio 2012, although it shouldn't be too hard to follow along with 2010.

1. Make sure your Visual Studio instance is up to date. Tools>Extensions and Updates>Updates(left pane).
2. Have web essentials extension installed, download here.
3. Install this intellisense extension that will give you angular support. Note: I modify the angularJSDirectives.xsd file to add "data-" in front of all the ng-xxx directives to follow HTML5 standards.

2. Create the new project

Create a new Basic MVC4 Web Application project in VS.
File>New>Project.
This opens the New Project Dialog.

Use the search in the top right of dialog to search for "mvc 4 c#".
Select "ASP.NET MVC 4 Web Application" in the results.
Set project name and location and click OK.

Next dialog select Basic template. Just to avoid clutter for now I un-check the "create a unit test.." checkbox since I don't plan on doing server side testing.

Using the NuGet, add AngularJS, AngularJS UI Bootstrap, and Bootstrap using the NuGet manager.
Tools>Library Package Manager>Manage NuGet Packages for Solution...

Click on the "Online" item in the left panel, then use the search in the top right to search for the package.

First install Angular JS and Angular JS UI Bootstrap.

Then install bootstrap without the jQuery dependency (just to show how jQuery is no longer the client-side panacea).

Create the HomeController by right-clicking on the Controllers folder > Add > Controller

Change the name to HomeController.

Add the Home/Index.cshtml view by right clicking on the Index action method within the HomeController class.

Then un-check the "Use a layout..." checkbox, then Add the view.

You should now see a bare-bones html template with a little razor syntax. This will be the SPA shell page. This is the one page that does load with a non-asynchronous HTTP request.

Now we need to add references to the stylesheets and scripts of the libraries we installed using NuGet earlier. This is easily done by dragging the files from the solution explorer over to the <head> of the shell. Your shell look something like this.

3. Create the SPA Folder Structure

The folder structure is completely flexible and you should have no problem coming up with your own structure, but I will suggest the following while setting up your first SPA projects as it keeps a nice visual separation of the types of files and their roles.

We can start off with a root folder for the SPA and sub-folders for the Views and the Controllers. If this terminology doesn't sound familiar you might want to learn a little about the MVW patterns to feel comfortable; MVC, MVVM, and MVP .

Alright, we should be all geared up to dive into Angular at this point. We will begin by setting up a really simple multi-page app to illustrate how the Angular framework is structured - in part 2 of this series.