Angular - Let's build an app together | Part 1
Tags: angular, javascript, typescript, webdev
Published: 2019-08-27 10:01:51

Hi there again guys & gals of Dev.to!

Welcome to the first part of the series ,,***Let's build an app together***'' where I'll do my best to take you through the process of building a REST API Angular application.

I am not an expert when it comes to Angular, so feel free to correct me down below.

Without further ado, let's start!

###**Table of contents**###

1. What we will be building
2. Setting up the environment
3. Hello world
4. Setting up the project
5. Design
6. Modeling your JSON data & display
7. Additional tips & tricks

###**1. What we will be building**###

In short, we will be building an application that will receive data using NASA's open API. We'll be using some cool features that the API offers and we'll display some data on the screen. 

Pretty cool stuff!

Take a look at the final product :

![](https://thepracticaldev.s3.amazonaws.com/i/7969rlmcrgdgzkw6eja5.png)

Bear in mind that I am not a grand designer, and I primarily want to focus on the logic and the most appropriate way of handling the data, you're free to design your UI in any way you want to.

###**2. Setting up the environment**###

First things first. 

In order to create your Angular application, you need to have Node.js installed locally. 

To do that successfully, follow these steps : 

- Visit https://nodejs.org/en/download/
- Install version 10.9.0 or later.

**Why are we doing that?** 

Well according to Angular Wiki and a bunch of other articles online, the reasons for Node.js & Angular 2 combo are as follows : 

- **Node.js** includes **NPM**, we need **NPM** because most of **Angular 2** packages or libraries are distributed as different NPM packages. 
- **Angular 2** mostly works with Typescript. Browsers can not understand Typescript syntax, therefore we need **NPM** in combination with **Angular CLI** to compile the Typescript into plain good old JavaScript.
- We will be using **Angular CLI** to automate all the compiling, building and minimizing, and that is where certain **NPM** commands will come in handy! 

You can read more on : https://www.angularjswiki.com/angular/is-node-js-required-for-angular-2-or-angular/

To make sure we've installed **Node.js** , and with it the famous NPM environment, try this : 

- Run **npm -v** in your console to make sure the installation was successful. 
You should get the result similar as in this picture below : 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/horun46cr8r0kuw9o339.jpg)

If the version of **npm** is displayed, congratulations, you just installed node.js!

P.S. - Yes. I'm one of those Linux nerds.

###**3. Hello World**###

Let's open our consoles/terminals/command prompts one more time ladies and gentlemen!

- Open your terminal and type in **cd *desired location*** where as the **desired location** is the folder inside of which you will create your new Angular application.

For example : 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/chpaalkz65jjm6h4kmiq.jpg)

**1)** Let's install our **Angular CLI** by typing the following command into our terminal : 

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

Check the version of your **Angular CLI** by typing the following command : 

```
ng --version
```
You should get something like this : 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3265n0dm49aq917e45vb.jpg)

If you get this kind of output, we're halfway there to fully setup our project!

**2)** We can easily create the default instance of our application by using the following command : 

```
ng new ourNasaAPP
```

Let's recap this command very shortly.

**ng** is the basically a built in directive which in short stands for ,,*Angular*''. 
**new** is another built in directive which will tell our Angular CLI that we would like to create a new default instance of our application.
**ourNasaAPP** that is just a name we'll give to this application.

After we type in **ng new ourNasaAPP** we'll have to go through a short process of successfully defining our default app. 

The process should go something like this : 

- Create a default instance of your app with **ng new**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ipn8kucx7h2wox2qohzc.jpg)

- When asked about the routing, select yes by typing **y** and pressing Enter. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o8diolwxa8mfevffheo2.jpg)

- Let's select **SCSS**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/d9ahjpbujjzaecc81jff.jpg)

- By selecting SCSS, Angular CLI will start building your default Angular project and you should see something similar to this when it is done : 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nugrot5zou5cpoeuqevt.jpg)

You might get some warnings by default, certain npm packages may not like something, but essentially if you don't get critical errors or your application to instantiate, you shall be fine. 

We can check if our project instantiated properly by typing the following command , which will start your application and open it in your default browser : 

```
ng serve --open
```

You should see something like this : 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z7812i0c83th7gl3ux2g.png)

If you get this screen, congratulations! 
You just created your first Angular application!

###Closing words###

With this I would like to conclude the first part of this series. 

Getting into further functionalities opens up a whole new spectrum of development that I would like to keep for upcoming parts. 

I certainly hope you have found this helpful and useful. 

A lot of interesting things are coming next! 

###**What's next?**###

- Setting up the project 

In this section we'll explore what we need to properly handle API responses and so to speak model our data within the application.
We will take a closer look into models, components and services. 

- Design 

We will take a look at the most appropriate design according to the data we shall receive. 
We'll dive into how to setup NGX-Bootstrap and use some its awesome features!

- Modeling your data & display

We might touch upon the subject of modeling your data in the **Let's Build An App Together part 2**.
If not, it will certainly be included in the **part 3** of the series.
This section is reserving to further explain how we will build our models, services and components. 
We will touch about the best practices in modeling your API data and I will show you the way I am doing it.

**Join me in part 2 - coming soon!**