Angular - Let's build an app together | Part 1

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 :

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 :

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 :

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 :

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

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

• Let's select SCSS

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

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 :

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!