# Angular CLI Install

## **Summary**

1. Install an Angular Project
2. Brief Overview of Project Structure

Environment Setup: Can be very tedious and difficult at times unfortunately it is an important part of coding.

## Prerequisites

* Current Node Version

{% hint style="info" %}
All commands below that start with a **$** are meant to be run in your terminal. \
**You don't include the $ in the command it is part of the terminal prompt.**
{% endhint %}

#### STEP ONE

Check our Current Version of Node. In the image below we are using and nvm is short for node version manager

{% hint style="success" %}
If you have **the current Node version INSTALLED** move on to [Angular CLI Install STEP ](#angluar-cli-install)otherwise continue to installing node
{% endhint %}

### Node Install

#### Set Default Node Version

Now when we open any new terminal we want it to use **NODEJS**&#x20;

## Angular CLI Install

In this section we will install the angular command line application. This will CLI tool will let you create new angular applications as well as boilerplate code for all other angular parts, components, services etc.

### Install CLI

The below command will install the angular command line interface (CLI). The **-g** option stands for **global** meaning, that anything we install  globally is available in our local machine versus just the folder you installed it.&#x20;

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

![npm install -g @angluar/cli](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Leht9Ad5PVB5DjAys5T%2F-LehgA4v994mA9iv1wKB%2Fangluar_cli_install.png?alt=media\&token=065ec102-8864-4f04-ab80-da2e610c52de)

Check the install worked run

{% code title="Terminal Command" %}
```
$ ng -v
```
{% endcode %}

![ng -v shows us the commands on the left for angluar cli and what they do](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Leht9Ad5PVB5DjAys5T%2F-LehhfuE3XhKXHFtmDGD%2Fng-v.png?alt=media\&token=72795633-c81e-4c8d-ac23-b8ed664a5bd7)

{% hint style="success" %}
If the above command, **ng -v** gave you something similar to above image move on, otherwise go back and[ install angular cli](broken-reference).
{% endhint %}

## Create New Angular Application

We can now use the angular CLI to create a brand new angular application. The below command can take a some time be patient.

{% code title="Terminal Command" %}
```
$ ng new demo-app
```
{% endcode %}

{% hint style="info" %}
After running the above command you will be prompted for:\
\
Add Angular Routing: **enter y**\
Stylesheet Format: **SCSS**
{% endhint %}

![Creating a New Angular App](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Leht9Ad5PVB5DjAys5T%2F-Lehk-x6Ze_oSoy-ToCx%2Fangular_new_app.png?alt=media\&token=05f2c111-a6c3-4318-bbb0-503deb8604f7)

Ignore the warnings if you got any, they are okay.

There should now be a new directory with the same name as your angular application in this case that was _**demo-app**_



### _**Starting Your Angular Application**_

Now that we have an new starter angular app we can try to serve it make sure it runs. From within the angular application directory in this case its _**demo-app**_ run:\


{% hint style="warning" %}
_**SAVE THE BELOW COMMAND**._ You do not need to memorize the command below instead put it in word doc or in glip to a message to yourself. Put it anywhere you can find and get to it easily so you can start your angular application.\


{% code title="Terminal Command" %}
```
$ ng serve
```
{% endcode %}
{% endhint %}



![Your Angular app is running](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Leht9Ad5PVB5DjAys5T%2F-Lehn_C1UYhYqi6HchNT%2Fng_serve.png?alt=media\&token=0ba4a53d-d3fd-4c22-9afd-4cd02c9dff06)



#### Viewing the Angular App

Your application is running if you have the above image anything else means the app failed to run, read the error message and try again.  When you run ng serve angular is compiling all the typescript and javascript  into one javascript file, all the HTML files into a single index.html file as well. and all the SCSS files into one CSS file. &#x20;

\
\
To view your running application **click** on the **URL**, in the **blue box**

![Click URL in blue box to view running angular application](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-Leht9Ad5PVB5DjAys5T%2F-LehoaOFeN7sHe3vdH_z%2Fview_angular_app.png?alt=media\&token=1e74f352-a4ba-4bb0-85ef-c3d691d16fa6)

```
** Angular Live Development Server is listening on localhost:4200, open your browser on 
http://localhost:4200/ **
 
```

Clicking the URL, _**http://localhost:4200/**_ should open the default angular starter app, seen below.



![Default Starter Angular Appliation](https://lh6.googleusercontent.com/5VRrh1NC2932ZYIbKd_k1M_YkD8ac2TP5E_G1f5bxwkHp576Ajm-Dh0UMIDaC38nRR-bzDmK8GwTP2HY32FL0OxgzZSxtQBND6zJRw2NgzGFxJ5V1ltbadYB4O_NhFEkM0nQUlP5bapR_UfpFw)

## Angular App Recap

* Installed proper NODE version if we needed it.
* **`$ npm install -g @angular CLI`**\
  Installed angluar command line interface ( CLI) globally. This will let us generate a new angular app and other angular building blocks.
* `$ ng new demo-app`\
  Used the install angular CLI to create a new angular app called _**demo-app.**_ This created a new folder called demo-app that contains our entire angular application.

\
By default  creates everything in the weather-app folder, but the parts we care **about are:** All the other files and folders mostly ignored as far as where you will need to write code in.&#x20;

Within **demo-app** directory

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LeiIRwLY6-fWbiwQ9MT%2F-LeiKjJz4-cBnX59KnMs%2Fdirectory_structure.png?alt=media\&token=081a84cd-5323-4fdf-aebe-3217ce0244fd)

### Source Code - The src folder

All our code we write for an application is called _**source code**_ and the convention is to name your source code folder **src** for short for source. Everything outside of the folder is default boiler plate code that we get by default and will not have change typically.

### Important Angular Files

* **app.module.ts:**\
  The app.module.ts file in our demo-app/src/app folder is the heart of our angular app. This is where we import all modules, components, services and anything else our app will need. Think of this file as a registry for everything our app will need before we run our ng serve command. \

* **app.component.html:**\
  This is the the main html or view of our application, or in this case our only view  we have.\

* **app.component.css:**\
  This will provide the css or styling for our app.component.html. Makes our html look pretty.\

* **app.component.ts:**\
  This is what provides information or is otherwise called the controller of our app.component.html. Think of it as the brains of for that html, any logic that needs to happen for our html to display will happen in here.\

* **app.component.spec.ts:**\
  Currently we can ignore this file and all other **spec** files, however all components are automatically created with this file. This file is used to run tests for the business logic in our **app.component.ts** file. All files that end in spec.ts are for testing our code we will not be working in them.

There are many files and folders that we will not have to write code in or even know what they do to write an angular application.&#x20;

{% hint style="warning" %}
Don’t worry about knowing what all of the other files do at this point in time, it is really easy to get lost and go down a rabbit hole.  For now we just focused on the main parts of an angular application.
{% endhint %}

## Angular CLI Commands

{% hint style="info" %}
**NOTE** in the below commands, **<> denote** a place holder for an actual word. For example\
ng new ~~**\<app-name>**~~  would be run wihout any <>\
ng new **myApp**
{% endhint %}

#### Useful CLI Commands

| Angular CLI Command                     | Description                                  |
| --------------------------------------- | -------------------------------------------- |
| ng new \<app-name>                      | Creates a new angular app                    |
| ng serve                                | Starts yours angular App                     |
| ng generate component \<component-name> | Creates a new Component, with the name given |
| ng generate service \<service-name>     | Creates a new Service, with the name given   |
| ng build                                | Puts together an build for deployment        |



## Key Concepts

* All angular CLI commands begin with ng
* **ng new** \<app-name> installs a new angular application called whatever text is place at \<app-name>
* **app.module.ts** is the heart of our application and acts like a registry of our application. All modules and components are imported here and every angular app has to have an app.module.ts.
* **app.component -** Is the main component, or root component of our angular app by default.&#x20;
* **Dont worry** about any of the files that have **spec** in the name, they are used for unit testing or files and folders outside the **src** folder.

{% hint style="danger" %}
**MOST IMPORTANT SAVE THIS COMMAND:** To serve you angular app\


{% code title="Terminal Command" %}
```
$ ng serve --host 0.0.0.0 --port 8081 --public-host $C9_HOSTNAME
```
{% endcode %}
{% endhint %}





## **Additional Angular CLI Resources:**

* [**https://scotch.io**](https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects)
* [**https://angular.io/guide/quickstart**](https://angular.io/guide/quickstart)

