Creating first Angular application – Part 1

Angular is a very popular javascript framework. It is used to create reactive single page applications. Single page applications(SPAs) gives our application users a very interactive and rich user experience. Single page applications are fast and reactive, as they use single html page, and all the parts of the applications are rendered instantly without refreshing the whole page. It also supports server makes request to the back end server on the background and populates the data once the response is ready to serve.

In this article, we will learn about how to required setups and
tools to create our first angular application. We will install all required components, create our first application using angular CLI(Command Line Interface) and run our application.

Following are the steps involved to create our first application

  • Install Node.js
  • Install npm tool.
  • Install angular CLI and create the first angular application.
  • Run the app on browser.

Install Node JS

First step is to install node js on our system. get latest version of node js from Make sure to uninstall node js program from the system, in case it is already installed. Click on the button to download the installer as shown below.

Verify the installation of node js by using following command. This should show the installed version of node as shown below.

node -v

Install npm tool

Once the node js is installed, next step is to install npm tool. This node package manager tool is used by the angular CLI to handle the dependencies of angular framework. Run the following command to install npm on your system. This will install latest available npm to our system. Verify the installed npm using below mentioned command. This will display installed npm version as shown in the below image.

//To install npm :
npm install -g npm
//To verify the npm installed version :
npm -v

Install angular CLI and create the first angular application

Install the angular CLI from node js command prompt by executing following command. This will install angular CLI to our system. If the angular CLI is installed properly, we should see the version and updated package message, as shown in below image. Version numbers may vary depending on the current latest version of angular CLI. Here ‘-g‘ indicates that the CLI packages should be installed globally.

//Command to install angular CLI:
npm install -g @angular/cli

As the angular CLI is installed, now we can create our first angular application. Navigate to a directory/folder where we want to create our first angular application and execute the below mentioned command. Here, I am navigating to D: drive of my system and to the folder AngularApps. You can choose the location and folder of your choice.

//Command to create first angular application:
ng new my-first-app

In above command, we are creating our application with name my-first-app. This will create our angular application inside current directory. Executing this command may ask few questions like ‘Would you like to add angular routing?’ or ‘Which style sheet format would you like to use?’ depending on the angular version. Click Enter key to skip these(Or you may choose the required options), as we do not need these options to create our first angular application.

After the above step, our application is created and which may take a couple of minutes, depending on the internet speed as the CLI downloads required dependencies and creates required application folder structure.

Once the application is created, navigate inside the created application directory(my-first-app in our case) and execute following mentioned command.

//navigate inisde created application:
cd my-first-app
//execute command to serve the application on browser:
ng serve

We can see from the following image, that our application is started in development server at port number 4200 at location http://localhost:4200/

Hit the URL: http://localhost:4200/ on browser and you must see the angular application running with some default content as shown below image.

Congratulations!! You have successfully created your first angular application. Good Job !! 🙂 🙂

In the next article, we will modify default code and make it to say “Hello” to you. 🙂

You may be interested in