Build a Full Web application with Angular 10

31/08/20 dannyVersion Française

What are we going to do ?

We will create a full web application
We will use the Angular version 10.0.14 javascript framework.

The application is accessible at the following address


The source code is available on github


How to do it ?

The summary of what we are going to do

  • Before starting
    We will talk about the project and its architecture
  • Source code recovery
    All we will use to create our application
  • Running the Front End Part
    Using Angular CLI
  • Running the Back End Part

    Install and create the API

Architecture

This project has two parts

  • The Front End
    This part represents the graphic part of the application, the one that the user sees in his browser
     
  • The Back End
    This part is used to manage the data.


These two parts will allow us to constitute a complete project.

  • Front End
    This part uses the following elements
    The Javascript Framework Angular
    The CSS Framework Bootstrap
     
  • Back End
    This part is used to process the data.
    The database used is PostgreSQL.

    It allows us to create a RESTFull.

Git

We need to recover the source code on our workstation.
For this we will use the following git command.

git clone https://github.com/ganatan/angular10-app.git

Front End execution

We will use a code editor.
Our choice is Visual Studio code.

We must open the project.
Then we will execute the following steps

  • Installing dependencies
  • Running the program in development mode
  • Running unit tests
  • Exécution des tests end to end
  • Compilation du projet en mode SSR

The commands are the following

# Installing dependencies
npm install

# Development
npm run start
http://localhost:4200/

# Source code tests
npm run lint

# Unit tests
npm run test

# End to end tests
npm run e2e

# AOT Compilation
npm run build

# SSR Compilation
npm run build:ssr
npm run serve:ssr
http://localhost:4000/


Front End working

This application works using the API principle
API access is configurable.

This project proposes 2 types of API

  • An API based on local JSON files
    This API makes it possible to run the project immediately without any other software
     
  • A local API based on the Backend part of this project
    To make it work you have to launch the Back end part detailed later in this tutorial

By default, the project uses the JSON API.


The choice can be made via the environment files.

config.srvice.ts
import { Injectable } from '@angular/core';
import { Config } from './config';

@Injectable()
export class ConfigService {

  public config: Config = new Config();

  constructor() {

    const api = false;
    const url = './assets/params/json/';

    /* const api = true;
    const url = 'http://localhost:5200/'; */

    this.config.api = api;
    this.config.url = url;

  }

}


Back end execution

We will operate the API available in this repository.

The API is located in the api directory of the project.
The steps are as follows

  • Go to the source code directory
  • Install dependencies
  • Create the database
    This API uses postgreSQL.
    You must specify your login and password information in the config.json file
  • Executer l'API

The commands are as follows.

# Go to the API directory
cd api

# Install dependencies
npm run install

# Create the database
npm run app

# Run the API
npm run start

# Check the API with the controls
http://localhost:5200/movies?formatted

Back End working

This API has scripts for creating the database and its elements.
The operations that can be performed are as follows

  • Creation of the database
  • Creation of domains
  • Creating tables
  • Importing data from json files
  • Exporting data into json files

You have to install postgreSQL on your workstation.
The API must be able to connect to postgreSQL for this you need to indicate the information of your DBMS

  • Login
  • Password

By default the postgreSQL login is postgres
This information can be modified in the config.json file

In this repository the information is

  • login : postgres
  • password : your_password

All you have to do is replace them with your own identifiers.

{
  "dev": {
    "application": "ganatan-backend",
    "databaseName": "ganatanbackend",
    "url": "http://localhost:5200/",
    "login":"postgres",
    "password":"your_password",
    "port": 5200
  },
  "prod": {
    "application": "ganatanbackend",
    "databaseName": "ganatanbackend",
    "url": "https://www.yourapi.com/",
    "login":"postgres",
    "password":"your_password",
    "port": 5200
  }
}