# Part 1: Setup with the Angular CLI

## Step 1. Set up the Development Environment

JavaScript is a web focused language, in order to use any type of JavaScript off the web we need to first install Node. Node is the runtime that allows our computers to understand JS offline.

You might already have Node installed. You can check by going to your command line in any directory and running **node -v**. If you have it, it will tell you the version of Node you are running. If you don’t have it, install Node.js and npm.

With installing Node comes NPM (Node Package Manager). NPM allows developers to install JS based applications, code snippets, libraries, etc. to our machines. It’s a lot like Nuget package manager.

## Step 2. Install Angular CLI

After Node installer is finished go ahead and open your command line. Let’s install angular CLI. The directory will not matter, since the **-g** flag stands for ‘global’.

In any directory type:

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

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8psPdneZwdnFGRDK%2F01.PNG?generation=1524162333519620\&alt=media)

Again, the **-g** command installs a resource to your global **node\_modules** folder.

Patience is a virtue, installation with resources could take time!

Navigate to where you would like to install this application through your terminal.

## Step 3. Create Angular Skeleton

We can now generate a new skeleton application with the Angular CLI. We will want to CD into the root of our project and run the following command:

```
ng new elevenNoteAngular
```

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8ptVCXmnrSwdGdXc%2F02.PNG?generation=1524162325527389\&alt=media)

**(Note: that the image below has a little different naming convention)**.

Again, patience is needed for our app to be scaffolded out.

Once it’s finished, change your directory into your newly created folder e**levenNoteAngular**.

Type:

```
cd elevenNoteAngular
```

To run the application so that we can see the output in our browsers we use the command:

```
 ng serve --open
```

You should see the scaffolded Angular starter code, as seen in the following image:

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8puzc_3ESE38zMJW%2F03.PNG?generation=1524162333960079\&alt=media)

This is the pre-generated code that comes with the Angular skeleton. Let’s head to our code editor.

In your terminal, since we are using Visual Studio Code as our IDE we can use the command, **code**

Type:

```
code . ( ← don’t forget the period)
```

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8pw568Sc9ECdWpN_%2F04.PNG?generation=1524162346167107\&alt=media)

## Step 4. Familiarizing Ourselves with the Project

Inside of VS Code, open the **src —> app** folder,

There are a lot of files, we will cover a quick example of what all of these do in Angular Folder and File Guide.

We will be working mostly in the **app** folder.

There will be times when we will be in the src folder changing the **style.css** and the **index.html** files.

The **app** folder is where all of our components will live and be created.

There are 4 files that have the .component name convention appended to them:

* CSS file 
* HTML file 
* spec.ts files 
* .ts files 

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8pzhnHxP4ghFQ3Nh%2F05.PNG?generation=1524162325212966\&alt=media)

These 4 files together are a build out of the boilerplate component that comes right out of the box from the **ng new** command.

You’ll notice that these 4 files are like a full eco-system of a component. The **CSS** file to pull out our styles. The **HTML** for the skeleton of a web view. The **TypeScript** (spec.ts) test file. Then the **TypeScript** file that houses all of our functionality.

## Step 5. Remove Some Boilerplate information

Let’s navigate to the **index.html** file

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8q2R2KeghKfqdHij%2F06.PNG?generation=1524162332967658\&alt=media)

Remove all the code inside of that file, since it’s just boilerplate, we will put in our own information there.

In the **app.component.ts** file we can also remove the line of code that has the member property called **title**.

## Step 6. Taking a look at the final file

Let’s open up the sixth file that is in the **app** directory, **app.module.ts**

![Logo Title Text 1](https://4164565395-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfSvT6cCRaU6iGA%2F-LAU8cF6_dCffjfRJwzH%2F-LAU8q5pyMunSJ-RewQX%2F07.PNG?generation=1524162325237514\&alt=media)

The **app.module.ts** file is where all of our components, services, modules, guards, custom directives, etc. All of these different things that will make up our application will be added to. In order for us to organize our application into a block of functionality.

Notice the **@NgModule({...})**—this is a class decorator. This builds the root application with the components, services, guards, custom directives, and other modules that we build and what we can include from third party services.

There were a few keywords in the last paragraph that are not explained just yet, but please be patient, we will get there!

**@NgModule({...})** has an assortment of keys for the object, let’s define:

* **Declarations**: Which components, directives, and pipes belong to the NgModule
* **Imports**: Other NgModules with components, directives, and pipes by the components in this NgModule
* **Providers**: Services at the application level that any application component can use.
* **Bootstrap**: the app with one or more top-level, root components

We have completed our application setup thus far, let’s add some code in the next section.