Blog

Today I am going to build a simple 2-page web app in angular 7 and SCSS for styling. I will be using Linux 18.04 for my OS, let’s get started

1 Install NodeJS

First of all, you need to install node.js on your system. After that you can run these commands in your terminal

sudo apt install python-software-properties
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install nodejs

2. Install Angular CLI

We will be using angular 7, the latest version I believe at the time of writing this post is 9. The below command will install angular 7

npm install -g @angular/cli@7 

3. Create our app

ng new pokemonApp-fe

answer yes to routing and choose SCSS as the stylesheet format

The run the app

cd pokemonApp-fe
ng serve

4 Install Bootstrap (at this time its Bootstrap 4)

In your terminal run

npm install bootstrap jquery popper

Add bootstrap to the angular.json file like so:

You might want to restart the ng server after this

5. Header Component

Let’s generate our very first component, below is the syntax for the command

ng generate component component_name

So for navbar it will be

ng generate component navbar

The component files and folder will be generated

Since we are sticking to the basics we will be using one of the boilerplate navbars from here https://getbootstrap.com/docs/4.4/components/navbar/

Then just copy and replace one of the navbar code and paste it into your navbar.component.html file

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Then add your component to you App.component.html

And viola success

So we will replace the angular stuff with a pokemon-list component in the next step

6. Shared Pokemon Service

A service is an object that can be shared among all your components. It is often used to fetch and store data. To create this run the command below

ng g cl shared/pokemonservice --type=service

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";

@Injectable()
  
export class Pokemonservice {
    readonly rootURL ="https://pokeapi.co/api/v2/pokemon"
    readonly imageURL: string = 'https://pokeres.bastionbot.org/images/pokemon/';

    constructor(private http : HttpClient) { }
    /**
    * The `get()` method returns
    * an Observable but we convert
    * it into a Promise.
    */
    getPokemon(offset: number, limit: number) {
      return this.http.get(`${this.rootURL}?offset=${offset}&limit=${limit}`)

        .toPromise()
        .then(response => JSON.parse(JSON.stringify(response)).results)
        .then(items => items.map((item, idx) => {

          const id: number = idx + offset + 1;
  
          return {
            name: item.name,
            url: `${this.imageURL}${id}.png`,
            id
          };
        }));
    }
  
    // Fetch all data from API
   

  }

Add the service that you have just created to your list of providers in your app.module.ts

Now create pokemon-list component

ng g c pokemon-list

7. Routing

We are going to do some routing for the 2 pages of the app. Well 3 because of the not found page. So lets create the pokemon list component and not found page

ng generate component page-not-found
ng generate component pokemon-details

Import your components into app-routing.modules.ts

import { PokemonListComponent } from './pokemon-list/pokemon-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { PokemonDetailsComponent } from './pokemon-details/pokemon-details.component';

Add the routes object into the routes array

  { path: 'pokemon-details/:id', component: PokemonDetailsComponent },
  { path: '', component: PokemonListComponent },
  { path: '**', component: PageNotFoundComponent }