Angular is a very popular javascript framework. We can use use the Angular framework to create reactive single page applications. Single page applications(SPAs) give our application users a very interactive and rich user experience.
Single page applications are fast and reactive, as they use a single html page, and the application renders all the parts of the applications instantly without refreshing the whole page.
It also supports the server makes requests to the back-end server in 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 also install all required components, create our first application using angular CLI(Command Line Interface) and run our application.
Let’s begin 🙂
Table of Contents
- Install the Node JS
- Install npm tool
- Install angular CLI and create the first angular application
- Conclusion
Install the Node JS
The first step is to install node js on our system. Get the latest version of node js from nodejs.org (If the node js is already available, we can skip this step)
Click on the button to download the installer as shown below.
Verify the installation of node js by using the following command.
This should show the installed version of the node as shown below.
node -v
Install npm tool
Once the node js installation is successful, the next step is to install the npm tool.
The angular CLI uses the node package manager tool to handle the dependencies of the angular framework.
Run the following command to install npm on your system. This will install the latest available npm to our system. Verify the installed npm using the below command.
Also, this will display the 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 the node js command prompt by executing the following command. This will install angular CLI into our system.
Also, if the angular CLI is installation is proper, we should see the version and updated package message, as shown in the below image.
Version numbers may vary depending on the current latest version of angular CLI.
Here, ‘-g‘ installs the CLI package globally.
//Command to install angular CLI: npm install -g @angular/cli
After installing the Angular CLI, 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 command.
Here, I am navigating to the D: drive of my system and 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 the above command, we are creating our application with the name my-first-app. This will create our angular application inside the 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 create the required application folder structure.
Once the application is created, navigate inside the created application directory(my-first-app in our case) and execute the 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 the browser and you must see the angular application running with some default content as shown below image.
Conclusion
Congratulations!! You have successfully created your first angular application. Good Job !! 🙂 🙂
In the next article, we will modify the default code and make it say “Hello” to you. 🙂
