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!
What is NodeJS
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.)
To check npm version
What is Typescript
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’)
npm install -g typescript
To check Typescript version: type the following command in the terminal window.
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’)
npm install -g angular-cli
To check angular-cli version: type the following command in the terminal window.
What is eslint
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’)
npm install -g eslint
To check eslint version type the following command in the terminal window.
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 :
ng new <project_name>
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
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 :
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’.
There you have it your first angular app! That’s the power of angular-cli!