DEV Community

Cover image for Angular - Let's build an app together | Part 1
KristijanFištrek
KristijanFištrek

Posted on • Updated on

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 :

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

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

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

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

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

ng --version
Enter fullscreen mode Exit fullscreen mode

You should get something like this :

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

  • Let's select SCSS

Alt Text

  • 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

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
Enter fullscreen mode Exit fullscreen mode

You should see something like this :

Alt Text

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!

Top comments (0)