In this tutorial, we will learn how we can create our first Angular 4 application with a few steps.

Step 1

First, we will install NodeJS. If you have not installed it already do so with the help of the below URL:

https://nodejs.org/en/download/

Step 2

When you have successfully installed the NodeJS, you can see the NodeJS command window. Now, open the node JS command window and install the Angular CLI (Command Line Interface for Angular) with the help of the below command:

npm install -g @angular/cli

or

npm install -g @angular/cli@latest

Both of the above commands will install Angular CLI but the command in which I have added the latest one will install the latest version of Angular CLI.

Angular CLI is the command line interface by which we can easily create the Angular 4 application in minimal time. I will discuss all the benefits in my future tutorials.

Step 3

Now to create the new Angular 4 application go to the required location and execute the below command in the NodeJS command window:

ng new new-ang-app
new-ang-app is the application name which I am going to create. When we execute the above command, Angular 4 will be creating the new application with a few files as you can see below:

angular angular

Step 4

Now, go to the application which we have created using the below command:

cd new-ang-app

Step 5

Now, you can run the application with one simple step by executing one of the commands below:

ng serve

or

ng serve –open

When you execute an ng-serve command, Angular will open one default port localhost:4200 for your created application.

ng-serve –open command also opens a browser for running the application with URL: localhost:4200

You can also execute npm start command for running your application. When a user executes npm start command, Angular checks the script in a package.json file as below,

  1. "scripts": {
  2. "start": "ng serve"
  3. }

According to the above, npm start will run which you have defined for the start command of the scripts object so in the above case execute an automatic ng-serve command.

It’s the reason that, when we execute npm start command, the ng-serve command will execute.

As you can see, we have successfully created our first Angular 4 application. You can see that running the application from a localhost:4200 URL and output will show what was added in the app.component.html file.

I will discuss Angular application's whole structure in my next tutorial.

Now, we have a few important commands by which we can create component, directive, service and pipes with the help of Angular CLI. When we execute one of the below commands in the NodeJS command window, we can create the one which is required.

angular

Below, g stands for generate which means you can write ng g component new-test-component or ng generate component new-test-component -- both are the same.

Now, you can see we have created our first Angular application. I will define the structure of the created application in my next tutorial.

Before you can fully understand the structure of the Angular application which we have created, you must know why Angular 3 was skipped by the Google Team. We have Angular version 2 and 4 but where is Angular 3? The reason is given below:

In Angular 2, we have all the versions of 2 but only the router version is different as in the below figure:
angular

As you can see in the above, only the Angular/router version is mismatched so the team has decided to skip Angular version 3 and come up with the next version which is Angular 4.

I hope you liked this -- please share it if you did. My next tutorial will be about the structure of Angular applications.