Angular CLI - Quick Guide
Tags: angular, webdev, javascript, programming
Published: 2022-12-23 21:22:32

**Angular CLI** is one fantastic tool that we will explore through this post. The entire post will be a **Quick Guide** for it, so if you are a **beginner**, this post should get you into understanding it.

**If you wish to see this post in a video format, click this link → [https://youtu.be/t9m_O_SOcSw](https://youtu.be/t9m_O_SOcSw)**

**If you are into Angular, you can learn it here → [https://bit.ly/3hdZvRX](https://bit.ly/3hdZvRX)**

## What is Angular CLI
**Angular CLI** stands for **Command Line Interface** and it is for **Angular Technology**. It was developed by **Google** as **Angular** is as well.

The main goal of this tool is to help you to **Develop, Initialize and Maintain Angular Projects**.

## Installation
**Installing Angular CLI** will also install the latest version of Angular. To do that, run the next command.

```
npm install -g @angular/cli
```

This command will install **Angular and Angular CLI** globally on your machine.

With the installation finished, you will be able to use the help command.

```
ng help
```

The help command will show you the entire list of commands that you can use and it should look something like this.

![Angular CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euf0s2i369ftjm7aivo1.jpg)

## Generating a Project
One such **Automation Command** could be to generate an **Angular** project. Command itself will create all necessary files and set up the entire project for us.

```
ng new my-todo-app
```

In this example, I am creating a new **Angular Application** which is called **my-todo-app**.

Replace your application name with mine and you are good to go.

## Running a Project Locally
To run your generated project, we first must go into our project and use a command which will open our project on **[http://localhost:4200](http://localhost:4200)**.

```
cd my-todo-app
ng serve
```

**The first command** will route ourselves into our project, in my example my-todo-app.

**The second command** will serve our Angular Project on a local host.

## Generate
Even if the creation of **Angular** application and serving those is nice feet, there is much more automation that we can do with **Angular CLI**.

For example, we can generate files for our **Angular** applications like **Modules, Components, Services, Guards**, and others as well.

```
ng generate --help
```

**Passing help flag** next to generate command, you will get all different files that **Angular CLI** can generate.

## Creating a Component
To create or generate **Angular Component** with **Angular CLI** we can run the next method.

```
ng generate component todo
```

This will generate our todo folder with todo component files like **HTML, CSS, TS**, and test file which is **SPEC.TS**.

## Testing
Next to the generation of specific files, **Angular CLI** can help us with testing as well.

```
ng test

```
Command of test will run our testing files and give back to our results of tests.

**Angular** uses **Jasmin and Karma** for testing.

## Linting
Linting can help us to clear our code and remove redundant code.

```
ng lint
```

Command itself will check all of our files and give us the result of that check. If there were some errors or warnings, it will point those to us, so we could resolve those.

## Conclusion
This is a quick guide for **Angular CLI** and if you liked this post, make sure to comment on it and I can create another with more in-depth details about **Angular CLI**.

**If you wish to see this post in a video format, click this link → [https://youtu.be/t9m_O_SOcSw](https://youtu.be/t9m_O_SOcSw)**

**If you are into Angular, you can learn it here → [https://bit.ly/3hdZvRX](https://bit.ly/3hdZvRX)**

Until the next time.