Getting Started

Howdy!

Let’s get started with Angular 2. Have fun.

Happy coding!

Before diving into the coding part, there are a few things to be taken care for setting up the application.

Prerequisites:

  1. Nodejs (>= 4.x.x)
  2. Npm (>= 3.x.x This comes along with nodejs – so nothing extra)

You can check their versions by doing node -v and npm -v for nodejs and npm respectively in the terminal.

In this tutorial, we ‘ll create Angular2 applications using angular-cli unlike the outdated SystemJs procedure.

angular-cli is recommended by Google’s team for Angular2 application as it compiles easier and has better features.

Technologies we ‘ll use:

  1. Typescript (Alternative to Javascript and this is even recommended by Google)
  2. Webpack (For bundling, compiling and executing)

Let the coding begin!

Firstly, navigate yourself to a folder for this application.

Use terminal as it becomes handy and easier.

Let’s first go ahead and install ‘cli’.

Step 1

npm install @angular/cli -g
This installs angular-cli globally and this can be accessed across your system. To check if it has got installed correctly, just type

ng in the terminal.

Step 2

Let’s create a new project for you to work on.

ng new hello-world

This creates a new folder named hello-world and it also takes a little more time as the necessary dependency gets installed.

Step 3

Go into that folder by doing,

cd hello-world

Step 4

ng serve

 

Now, this ng serve command compiles, launches and watches your files for changes.

It rebuilds every time you make some changes in the files.

Navigate to browser and hit http://localhost:4200 to see the basic app in action.

 

Cool!

It took us just a few minutes to see our first application up and running.

Pretty awesome!, ain’t it?

Let’s get our hands dirty by changing things according to our needs.

See you in the next lesson.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s