Angular2 requires quite a bit of setup to get started. We need to install a few tools globally to get started. So, Let’s get started!

NodeJS

What is NodeJS

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

No we will not code in NodeJS :). But we need the NodeJS runtime. Secondly, this will also install npm (NodeJS package manager). NPM is used to install & manage our project dependencies. And also to install other tools that we need for angular2 development.

We will download and install node from the nodejs website.
Note: We will need Node4 or above if you want to use Angular-cli.

To check node version: type the following command on a terminal window. (I recommend using Git Bash, it’s an amazing tool to have.)

node -v

To check npm version

npm -v

Typescript

What is Typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Typescript gives you all the goodness of JS, with features like classes, interfaces and compile time check. Moreover, Angular2 is written in Typescript and most of the documentation follow Typescript. And once you start working with it, you will know the power it gives you and how easy it makes writing JS code. You can learn more about Typescript on the Typescript website.
Note: Code written in Typescript has to be compiled to JS.

To install Typescript, type the following command on a terminal window (note sometimes you may have to prefix the command with ‘sudo’)

To check Typescript version: type the following command in the terminal window.

tsc -v

Angular-cli

What is Angular-cli

The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices and the angular2 style guides! And with commands to create new components, service, interface … it makes working with angular2 more simpler and fun.

As of now, Angular-cli is still in beta but it is a very powerful tool that you should have while working with Angular2. It makes life very easy for us developers.

To install Angular-cli, type the following command in a terminal window (note sometimes you may have to prefix the command with ‘sudo’)

To check angular-cli version: type the following command in the terminal window.

ng -v

eslint

What is eslint

ESLint is an open source JavaScript linting utility.

Eslint will analyse your code and identify errors. Like, Is the code following a style guide? Eslint allows you to create your own rules, so to make sure you are following the same standards across your app. It’s very helpful when you have a big team.

Install eslint: type the following command in a terminal window (note sometimes you may have to prefix the command with ‘sudo’)

To check eslint version type the following command in the terminal window.

eslint -v

Visual Studio code

What is Visual Studio Code

Visual Studio Code is a code editor redefined and optimised for building and debugging modern web and cloud applications.

Visual Studio code editor is developed by Microsoft. It has amazing intellisense, which makes coding and debugging very easy. It also comes with inbuilt command line!

Download and install from the Visual Studio website.

Our first Angular2 app

Well, those are all the tools we will require to get started. Once we have installed all these tools we are ready to start our Angular2 journey.

Open Visual Studio code editor. Press Ctlr+` or ‘View -> Integrate Terminal’ from the menu. This should open the ‘Integrate Terminal’.

The terminal should show you the current folder path. You can navigate to the folder where you want to place your angular2 app and once there type :

Here is what this command will do:

  • Create a new folder with the project name you specified. This folder will contain all the files required for an Angular2 app
  • Install all the npm dependencies required

ng new


ng new completed

Note, if you want to use the current folder as the angular2 project folder, use :

Wait for angular-cli to do its work and once it is done, cd into the project folder if you have used ‘ng new’. Or from the current folder if you have used ‘ng init’ type :

cd and ng serve


ng serve local serve


This will start a local server on port 4200. Once you see a message ‘webpack: …’ on the terminal you can access your app in a browser at ‘http://localhost:4200’.

app works

There you have it your first angular app! That’s the power of angular-cli!

SiteLock