Build a Full Web application with Angular

Updated : 08/09/2023 danny


We will create a complete web application.

We will use the Angular Javascript Framework version 16.2.4

Application Web avec Angular

What are we going to do ?


The application is accessible at the following address

Source code is available on github

How to do it ?

The summary of what we are going to do

  • Before You Start
    We will talk about the project and its architecture
  • Retrieving the source code
    Everything we will use to create our application
  • Execution of the Front End part
    Using Angular CLI
  • Execution of the Back End part
    Install and create APIs

Architecture

This project has two parts

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

These two parts will allow us to put together a complete project.

  • Front End
    This part uses the following elements
    The Angular JavaScript Framework
    The Bootstrap CSS Framework
  • Back End
    This part is used to process the data.
    The database used is PostgreSQL.
    It allows us to create a RESTFull API.

Git

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

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

Front End Execution

We will use a code editor.
Our pick is Visual Studio Code.

You have to open the project.
Then we will perform the following steps

  • Installing dependencies
  • Running the program in development mode
  • Execution of unit tests
  • Compiling the project in SSR mode

The commands to use are:

# Installing dependencies
npm install

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

# Source code Tests
npm run lint

# Unit Tests
npm run test

# AOT Compilation
npm run build

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

Front End

This application works using the principle of APIs.
Access to APIs is configurable.

This project offers 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 must launch the Back end part detailed later in this tutorial
    It is CRUD type (create,read,update,delete)


By default the project uses the JSON API.

The choice can be made via the environment files.

config.service.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

We will run the API available in this repository.

The API is located in the project's api directory.
The steps to follow are as follows

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

The commands to execute are as follows.

# Go to API directory
cd api

# Install dependencies
npm run install

# Create the database
npm run app

# Run API
npm run start

# Check api with commands
http://localhost:5200/movies?formatted

Using Back End

This API has scripts to create 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 to json files

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

  • Login
  • Password

By default 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

Simply 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
  }
}