Angular: Installation
Tags: angular, beginners, javascript, webdev
Published: 2020-07-21 20:43:23

In this tutorial, we'll lean how to install Angular CLI in Window and use it to create an Angular project.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4pomw53llreq2gbkgoyq.png)

# What is Angular CLI?
> * **Angular CLI** is the official tool for initializing and working with Angular projects. It saves you from the hassle of complex configuration. 

> * After installing Angular CLI, you'll need to run one command to generate a project, you see about 400 files will be generated for the project and another to serve it using local development server to play with your application.

> * Like most modern front end tools these days, Angular CLI is built on the top of Node.js.

> * **Node.js** is a server technology that allows you to run JavaScript on the server and build server-side web applications. However, Angular s a front end technology, so even if you need to install Node.js on your development machine, it is only for running the CLI.

> * That being said, if you are building a full-stack web application with Angular, you may need Node.js for creating the back end part if you like to use JavaScript for the front end and back end.

> * **NPM** stands for Node Package Manager. It's a registry for hosting Node packages. In recent years it's also been used to publish front end packages and libraries like Angular, React, Vue.js and even Bootstrap.


# Installing Angular CLI on Windows:-

**i)** Download and install the Node.js for running the CLI.
   
 >  1.1. Click the link [Download](https://nodejs.org/en/download/) And download node according to your system requirements) 

 >  1.2. Install node.js.

 >  1.3. You can make sure Node is installed on your system by running the following command in a command prompt which should display the installed version of Node:
>   `        >> Node -v  `


**ii)** Next, run the following command to install Angular CLI.
       
        >> npm install @angular/cli

   After the command finishes successfully, you should have Angular CLI installed.

**iii)** After installing Angular CLI, you can run many commands. Let’s start by checking the version of the installed CLI
                
        >> ng version

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8yl4637xxgoi9dqeuhgv.png)

# Generating Project:-

**i)** You can use Angular CLI to quickly generate your Angular project by running the following command in your command line interface:

        >> ng new PROJECTNAME

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9gbmr4n6jeje9uw21fnf.png)

**ii)** Go to folder using cd command

        >> cd PROJECTNAME

**iii)** Run Project- you can simply, use the  ng serve command from your terminal to serve your project locally.

        >> ng serve 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nzmghjmysy7nlaighe9f.png)

You can now navigate to the http://localhost:4200/ address to start playing with your front end application. The page will automatically live-reload if you change any source file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/29orqiyc0si9i2sdh6hb.png)

# Install Visual Studio Code IDE or JetBrains WebStorm

You must have an IDE like Visual Studio Code IDE or JetBrains WebStorm to run your Angular app.

**VS Code** is light and easy to setup, it has a great range of built-in code editing, formatting, and refactoring features. It is free to use. It also provides a huge number of extensions that will significantly increase your productivity.

You can download VS Code from here: [https://code.visualstudio.com](https://code.visualstudio.com)

**JetBrains WebStorm** is also a great IDE to develop Angular apps. It is fast, attractive, and very easy to use software but, it is not free to use. You have to purchase it later, it only provides a trial period of 30 days for free.

You can download Jetbrains Webstorm from here: [https://www.jetbrains.com/webstorm/download/#section=windows](https://www.jetbrains.com/webstorm/download/#section=windows)

Next Topic : Angular File explanation