How to install angular app with Angular CLI and how to create the angular project from scratch?

Article by: Manish Methani

Last Updated: October 4, 2021 at 8:04am IST
2 min 27 sec

How to install angular 8 and how to create the angular project from scratch?

Angular is one of the three most popular frameworks for front-end development, alongside React and Vue.js. 

The purpose of this tutorial is to introduce you to the most widely used front-end framework in web development named Angular.

Prerequisites

Before starting to learn Angular, I recommend that you become familiar with the following languages if you aren't already:

• HTML, CSS
• JavaScript / ES6
• TypeScript

What is Angular?

Angular is a Javascript framework that is developed and maintained by Google for creating front-end applications.

Developers might get confused between Angular JS and Angular.

Angular versions 1,1.2, 1.5 are called Angular JS and starting from version 2, it is called Angular.

Angular 2 is a complete rewrite of the AngularJS framework and contains many performance-boosting capabilities with its component-based model. 

Angular versions like (4,5,6,8, etc.) have some minor changes in the framework. The latest version of Angular in the market is Angular 10.

Angular applications are made up of components. So you should be aware of what a component is and why to focus on the concept.

Before going into the depth of the components, we will first install the Angular and create our first angular project.

How to install Angular CLI?

Let's start with the basics to get started and see how to install the Angular CLI 8.

Step1: Install NPM (Node Package Manager)

First of all, we are going to need Node js. NPM (node package manager, is a part of node js) is a tool for installing 3rd party libraries and dependencies to our project.

If you haven't installed the node JS and npm yet, you can install them from here, Node JS

Step 2: Install Angular CLI

The next step is to install the Angular CLI 8, 

Run this command in the terminal,

npm install -g @angular/cli

g stands for global installation. If you use -g later you can use the CLI in any Angular project on your computer.

Verify:

To verify your Angular version, type this command in the terminal,

ng v 

Step 3: Create a new Angular Project

The next step to create the angular project with the following command,

ng new my-first-app

After executing this command, you will get few questions,

1) Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?

This setting helps improve maintainability and catch bugs ahead of time.

  For more information, see https://angular.io/strict (y/N) 

Press y

2) Would you like to add Angular routing? (y/N) 

Press y. We will explore the concept of Angular routing.

3) Which stylesheet format would you like to use?

CSS

Your angular app my-first-app with all the necessary dependencies required will be installed automatically for you.

Step 4: Run the App

After installing the Angular CLI and creating the new angular project, you can run the app with the following command,

ng serve -- open

Conclusion

In this part 1, we have learned the basics of Angular, how to install the Angular CLI and how to create the angular project.

In the next part, we will explore what are components in the Angular app and create our first Sign Up form in Angular.

If you feel to learn about the Web Development more, you can follow our Youtube Channel Codzify Creations

Enjoy the reading...!!