Getting Started with Angular 2

This is intended to be an extremely Quick Start guide to getting up and running building Angular 2 applications.

This will not be a guide explaining syntax or much of any core constructs but simply how to get started, focusing on setting up your Development Environment. We will be looking at all the most popular Development Environments to give you a good idea how to get started no matter what you are using.

First Things First: Are You Ready For This?

While I would love to just jump in, if you have never worked with Node or used any npm packages then we need to get our machine in order before going any further.

Let's Install Node

If you've never installed Node.js before then you will be happy to know that a simple install will take care of installing both Node and it's Package Manager npm so let's head over to grab the install right now:

Download Node.js here: https://nodejs.org/en/

Install that and you will also have npm installed so we will be ready to install some base packages that will be useful even if we weren't doing Angular.

First though, let's verify that Node and npm are installed. Issue the following commands to verify the install.

node -v

npm -v

These commands will display the installed version of each component and if they don't then you will need to troubleshoot your install.

Once we are all setup and ready, let's install the following base packages before diving into Angular:

• Typescript (npm Package)
• Typings (npm Package)

Angular by convention uses TypeScript and for the reasons why, I would direct you to the following article by Victor Savkin which goes into great detail to explain the reasons but to sum it up, compilation provides testability, strongly typed data helps to clear possibilities for bugs and confusion during maintenance. While there are a lot more reasons, Victor explains it best here:

Why TypeScript?

Next, we should install typings and of course you are problem wondering:

What is Typings?

Typings is a Typescript Definition Manager but what that means may elude you until you actually get into using it. You wouldn't be the first to ask the question so let's head over to the all mighty StackOverflow for a more detailed discussion:

What are Typings in Typescript?

Everybody got that? OK, let's continue :-)

On To The Fun: Let's Install Angular 2

Before we can get into setting up an IDE to work with Angular 2, we need to Install the Angular CLI.

Let's dive into the Command Prompt or Terminal and issue the following command:

npm install -g @angular/cli

Windows Users

If you are using Windows you will need to get to an Elevated Command Prompt first by right-clicking the Command Prompt shortcut and selecting "Run as Administrator".

Linux and Mac Users

If you are on any *nix based Operating System you will likely need to add sudo at the beginning of this command and provide your password to elevate permissions (which IMHO is much more safe than simply clicking a button in Windows, Ha).

If you don't yet have Node.js installed, head over to: https://nodejs.org/en

Now you should know up front that when you create an Angular 2 App that TypeScript is configured for the new App so you don't need to really do the next step but lets do it for good measure just in case you want to mess with TypeScript outside of an Angular 2 App.

Again, from the Command Prompt / Terminal, lets issue the following command:

npm install -g typescript

* Don't forget to add sudo if you are on a *nix system.

Assuming all went well, we should now have our system ready to go so we can move on to our Development Environment of Choice.

Sublime Text

OK, we can argue what Editor is best but let's just start with Sublime as it is awesome and light.

Download Sublime Text here: http://www.sublimetext.com/

Install the following Packages to make life easier in Sublime Text:

• TypeScript This is the official package by Microsoft and the Intellisense is great with this one.

  https://packagecontrol.io/packages/TypeScript

• Angular 2 Snippets

  This one comes from John Papa and will provide a great set of code snippets for working with Angular 2. https://packagecontrol.io/packages/Angular%202%20Snippets%20(John%20Papa)

Visual Studio Code

While Sublime Text may be my all time favorite, I have to give props to Microsoft for all their work with Visual Studio Code because while it definitely is not as good as it's big brother Visual Studio, which is quite bloated, Microsoft has been doing a great job of copying the best stuff from Sublime Text and adding it to Code to make it much more friendlier for those who don't traditionally use the full blown Visual Studio and are likely used to using something like Atom, Sublime Text, Brackets or the old tried and ture Eclipse.

Download Visual Studio Code here: https://code.visualstudio.com/

Install the following Extensions to make life easier in Visual Studio Code:

• Angular v2 TypeScript Snippets This one again is from John Papa. https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2

Note: Install from the Extensions window within Visual Studio Code.

There really isn't anything more you need to do to configure Visual Studio Code as it is made by Microsoft so it already understands HTML, JavaScript and TypeScript right out of the box. The Angular TypeScript Code Snippets are just icing on the cake.

Don't forget that Visual Studio Code actually has an integrated Terminal built in so you can build/serve directly from within Code.

Visual Studio

If you are working in a Microsoft Shop, and chances are good that you are, you will be using the full blown Visual Studio so we will take a good look at both the most used Visual Studio for Windows and then we will also look at the newly re-branded Visual Studio for Mac which is essentially a re-branded version of Xamarin Studio (MonoDevelop).

Visual Studio for Mac

Download Visual Studio for Mac here: https://www.visualstudio.com/vs/visual-studio-mac/