Créer une application Web complète avec Angular

Mis à jour : 08/09/2023 danny

Nous allons créer une application web complète.

Nous utiliserons le Framework Javascript Angular version 16.2.4

Qu'allons nous faire ?

L' application est accessible à l'adresse suivante

https://angular.ganatan.com

Le code source est disponible sur github

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

Comment le faire ?

Le résumé de ce que nous allons faire

Avant de Commencer
Nous parlerons du projet et de son architecture
Récupération du code source
Tout ce que nous utiliserons pour créer notre application
Exécution de la partie Front End
En utilisant Angular CLI
Exécution de la partie Back End
Installer et créer les API

Architecture

Ce projet comporte deux parties

La partie Front End
Cette partie représente la partie graphique de l'application, celle que l'utilisateur voit dans son navigateur
La partie Back End
Cette partie pemet de gèrer les données.

Ces deux parties vont nous permettre de constituer un projet complet.

Front End
Cette partie fait appel aux éléments suivants
Le Framework Javascript Angular
Le Framework CSS Bootstrap
Back End
Cette partie permet de traiter les données.
La base de données utilisée est PostgreSQL.
Elle nous pemert de créer une API RESTFull.

Git

Il nous faut récupérer le code source sur notre poste de travail.
Pour cela nous utiliserons la commande git suivante

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

Exécution du Front End

Nous allons utiliser un éditeur de code.
Notre choix se porte sur Visual Studio code.

Il faut ouvrir le projet.
Puis nous éxécuterons les étapes suivantes

Installation des dépendances
Exécution du programme en mode développement
Exécution des tests unitaires
Compilation du projet en mode SSR

Les commandes à utiliser sont les suivantes

# Installation des dépendances
npm install

# Développement
npm run start
http://localhost:4200/

# Tests du code source
npm run lint

# Tests unitaires
npm run test

# AOT Compilation
npm run build

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

Fonctionnement du Front End

Cette application fonctionne en utilisant le principe des API.
L' accès aux API est paramètrable.

Ce projet propose 2 types d'API

Une API basée sur des fichiers JSON en local
Cette API permet de faire fonctionner le projet immédiatement sans autre logiciel
Une API local basée sur la partie Backend de ce projet
Pour la faire fonctionner il faut lancer la partie Back end détaillée plus loin dans ce tutoriel
Elle est de type CRUD (create,read,update,delete)

Par défaut le projet utilise l'API JSON.

Le choix peut être fait via les fichiers d'environnement.

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;

  }

}

Exécution du Back end

Nous allons faire fonctionner l'API disponible dans ce dépôt.

L'API se situe dans le répertoire api du projet.
Les étapes à suivre sont les suivantes

Aller dans le répertoire du code source
Installer les dépendances
Créer la base de données
Cette API utilise postgreSQL.
Il vous faut indiquer vos informations de login et password dans le fichier config.json
Executer l'API

Les commandes à éxécuter sont les suivantes.

# Aller dans le répertoire de l'api
cd api

# Installer les dépendances
npm run install

# Créer la base de données
npm run app

# Exécuter l'api
npm run start

# Vérifier l'api avec les commandes
http://localhost:5200/movies?formatted

Fonctionnement du Back End

Cette API dispose de scripts permettant de créer la base de données et ses éléments.
Les opérations qui peuvent être réalisées sont les suivantes

Création de la base de données
Création des domaines
Création des tables
Importation des données à partir de fichiers json
Exportation des données dans des fichiers json

Il faut évidemment avoir installer postgreSQL sur son poste de travail.
L' API doit pouvoir se connecter à postgreSQL pour cela il vous faut indiquer les informations de votre sgbdr

Login
Password

Par défaut le login de postgreSQL est postgres
Ces informations sont modifiables dans le fichier config.json
Dans ce dépôt les informations sont

login : postgres
password : your_password

Il vous suffit de les remplacer par vos propres identifiants.

{
  "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
  }
}