Getting Started With Angular2

Angular2 is pretty much stable now and this is the first entry of Angular2 articles at Codeforgeek.

Lots of our readers have been asking to post tutorials on Angular2 and we are going to begin it with simple Getting Started With Angular2 tutorial.

Let’s get started.

Installing Angular2 Dependencies

Angular2 runs on top of Node.js, so you need to install the latest version of Node.js ( Version 6.9> is recommended).

To install Node.js, visit Node.js official download page and download Node.js suitable to your operating system.

Once installed, you need to Install angular command line module.

To do that, run following command in terminal.

COMMAND
sudo npm i -g angular-cli

Once installed, you can run the following command to check if it’s working or not.

COMMAND
angular-cli

It should print following in console.

Getting Started with Angular2

The angular command line is official tool provided by Angular2 team to create, manage the Angular project. It follows the best standard and code practices recommended by the Angular team.

Next dependency is TypeScript.

To install it, run the following command in terminal.

COMMAND
sudo npm i -g typescript

Once installed, check it’s status using the following command.

COMMAND
tsc -v

It should return the working version of TypeScript.

Importance of TypeScript

In a nutshell, TypeScript is JavaScript with type checking support.

This means, there will be less runtime error and more productivity to the developers.

This is the reason, the Angular team recommends TypeScript to developer Angular2 apps.

We are done with dependencies installation, let’s create a new Angular2 application.

Creating Angular2 Application

To create new Angular2 application, run the following command in the Terminal.

COMMAND
ng new <App name>

This will create the new folder named as the application name provided in the command.

This command will run npm install command to install required Node.js dependency.

To run our new app, switch to the project folder and run following command.

COMMAND
ng serve

Visit localhost:4200 to view the app.

Getting Started with Angular2

It works!

You can check the source code files in the src folder.

What’s next

In the next tutorial, we will learn how to make HTTP calls using Angular2.

Conclusion

Getting started with Angular2 is really easy using Angular command line application. You can learn about structure of the Angular2 application here and here

Shahid
Shahid

Founder of Codeforgeek. Technologist. Published Author. Engineer. Content Creator. Teaching Everything I learn!

Articles: 126