0 - 60 with Angular 2 & Visual Studio
This is a presentation I first gave at the AngularMN meetup on June 2, 2016. The talk is meant to provide a walk through the experience creating an API and Angular 2 application when using Visual Studio 2015 as your primary editor.
The talk itself
I think we had some difficulties with actually sharing my screen, so it's pretty hard to see the slides unfortunatlely, but here's a link to the recording:
Explanation of this repository
This repository contains the presentation and the source code for the example I use during the talk. This repo has been tagged with multiple steps to make it easy to walk through the progress yourself. Here's an outline of the available tags:
- Step 1 - An empty ASP.NET 4.5 project with all required NuGet packages already added
- Step 2 - A basic API scaffold with Swagger enabled (via the Swashbuckle library)
- Step 3 - The fully complete API with Swagger updated to include XML comments
- Step 4 - Nancy added to provide the context needed to serve our Angular 2 application
- Step 5 - The full Angular app (with all required configuration files) but without any error handling in the UI
- Step 6 - The final Angular app with all error handling added
To checkout the code at a given step simply clone the repo and run a command like the following:
git checkout tags/step-4 -f
That will get you to step 4 of the code and you can experiment from there.
CAUTION now that Angular 2 RC1 is not the latest release
Unfortunately I was alerted to an issue with the package.json where some of the angular modules used
^ in their version string, but others did not. Now that RC2 is released you will end up with mixed versions when running
npm install. This will cause problems, so if you grab an earlier step in the code you should update
package.json to ensure the RC1 version is installed. Sorry for the issue, but this has been fixed in the master branch of the code.
Related blog posts & resources
I also wrote up a couple of blog posts that go into some more detail about my experiences using Visual Studio for API and Angular 2 development. Here are the links to those:
Since we're working with Visual Studio in this talk there are also a couple nice extensions that might help improve your experience. Here's links to a few that you might be interested in:
- NPM Task Runner extension (free)
- Web Essentials 2015 (free)
- Productivity Power Tools (free)
- ReSharper (not free) - Love it or hate it...I find it useful and worth paying for.
Have any comments or feedback?
Please let me know if you have any questions, comments or general feedback on the talk, the code, or the blog posts. I'm always excited to get feedback, so please don't hesitate to reach out.