AngularGenerate

AngularGenerate est un package Angular qui permet de générer automatiquement une application Angular complète à partir d'un fichier de configuration.

AngularGenerate fonctionne avec un backend Laravel généré automatiquement grâce au package ControllerGenerate

Packages utilisés :

• Frontend : AngularGenerate
• Backend : ControllerGenerate

Comment ça marche 👉🏽😇

AngularGenerate fonctionne à partir d'un fichier config.json contenant la configuration de votre application.

Le principe est simple :

1. Vous créez votre backend Laravel avec ControllerGenerate.
2. Vous récupérez le fichier config.json généré par le backend dans la racine du projet Laravel.
3. Copier ce fichier dans la racine de votre projet Angular.
4. Les composants Angular sont générés en fonction des modules et des tables définis dans config.json.

Votre structure doit alors ressembler à ceci :

mon-projet-angular/
├── src/
├── public/
├── angular.json
├── package.json
├── tsconfig.json
└── config.json

⚠️ Important : utilisez directement le config.json généré par votre backend Laravel afin de garantir que la configuration du frontend corresponde à celle de votre API.

Exemple de config.json

Le fichier généré par le backend aura une structure similaire à :

{
    "projectName": "projet.angular",
    "description": "Fichier de configuration de AngularGenerate",
    "config_base_url": "http://localhost:8000",
    "les_modules": [
        {
            "module": "home",
            "les_tables": []
        },
        {
            "module": "public",
            "les_tables": []
        }
    ]
}

Vous pouvez ainsi partir de deux packages et obtenir rapidement une structure complète Backend Laravel + Frontend Angular.

Prérequis

Avant d'utiliser AngularGenerate, assurez-vous d'avoir installé :

• Node.js
• npm
• Angular CLI
• Un projet Angular
• Un backend Laravel utilisant ControllerGenerate

Installation

2️⃣ Installer AngularGenerate

Installez le package avec npm :

npm install angular-generate

3️⃣ Installer Angular JWT

AngularGenerate utilise @auth0/angular-jwt pour la gestion du token d'authentification.

npm install @auth0/angular-jwt

4️⃣ Installer NG-Select

Installez @ng-select/ng-select :

npm install @ng-select/ng-select

Compatibilité Angular / NG-Select

Veillez à utiliser une version compatible avec votre version d'Angular :

| Angular | NG-Select | | ------------------ | --------- | | >=20.0.0 <21.0.0 | v15.x | | >=19.0.0 <20.0.0 | v14.x | | >=18.0.0 <19.0.0 | v13.x | | >=17.0.0 <18.0.0 | v12.x |

Documentation officielle :

https://www.npmjs.com/package/@ng-select/ng-select

Importer les styles NG-Select

Dans votre fichier style.css ou style.scss :

/* Importing NG-Select styles */
@import url('../node_modules/@ng-select/ng-select/themes/default.theme.css');

5️⃣ Installer SweetAlert2

SweetAlert2 est utilisé pour afficher des notifications et des messages interactifs.

npm install sweetalert2

6️⃣ Installer ng-bootstrap

Installez ng-bootstrap :

ng add @ng-bootstrap/ng-bootstrap

Documentation :

https://ng-bootstrap.github.io

7️⃣ Installer Bootstrap et Bootstrap Icons

npm install bootstrap bootstrap-icons

Puis importez les styles dans style.css ou style.scss :

/* Importing Bootstrap CSS */
@import 'bootstrap/dist/css/bootstrap.css';

/* Importing Bootstrap Icons */
@import 'bootstrap-icons/font/bootstrap-icons.css';

/* Importing NG-Select styles */
@import url('../node_modules/@ng-select/ng-select/themes/default.theme.css');

Configuration de HttpClient

AngularGenerate utilise HttpClient pour communiquer avec l'API Laravel.

Dans votre fichier :

app.config.ts

ajoutez provideHttpClient().

Exemple :

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter, withHashLocation } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes, withHashLocation()),
        provideHttpClient()
    ]
};

Génération de l'application

Une fois la configuration terminée, AngularGenerate permet de générer automatiquement votre application.

1️⃣ Générer complètement l'application

Pour générer tous les modules et composants définis dans config.json :

ng generate angular-generate:config

Cette commande analyse votre configuration et génère automatiquement les éléments nécessaires.

Générer un module spécifique

Supposons que votre configuration contient un module :

public

avec plusieurs tables.

Pour générer uniquement ce module :

ng generate angular-generate:config --module public

AngularGenerate génère alors les composants associés au module public.

Générer les composants d'une table

Supposons que votre configuration contient une table :

agent

Pour générer tous les composants associés à cette table :

ng generate angular-generate:config --table agent

AngularGenerate génère alors les différents composants disponibles pour cette table.

Générer un composant spécifique

Vous pouvez également générer uniquement un type de composant.

Par exemple, pour générer la liste des agents :

ng generate angular-generate:config --table agent --type list

Types de composants disponibles

AngularGenerate permet de générer plusieurs types de composants.

list

Affiche la liste des enregistrements d'une table.

--type list

add

Génère le formulaire permettant d'ajouter un nouvel enregistrement.

--type add

edit

Génère le formulaire permettant de modifier un enregistrement existant.

--type edit

details

Génère la page permettant d'afficher les détails d'un enregistrement.

--type details

Exemple d'utilisation

Supposons que nous avons une table :

agent

Nous pouvons générer :

Liste des agents

ng generate angular-generate:config --table agent --type list

Formulaire d'ajout

ng generate angular-generate:config --table agent --type add

Formulaire de modification

ng generate angular-generate:config --table agent --type edit

Détails d'un agent

ng generate angular-generate:config --table agent --type details

Gestion des routes

AngularGenerate génère également la structure nécessaire à la navigation entre les différents modules.

Exemple de fichier app.routes.ts :

import { Routes } from '@angular/router';

import { HomeComponent } from './home/home/home.component';
import { PublicComponent } from './public/public/public.component';
import { AuthGuard } from './guard/auth/auth.guard';

export const routes: Routes = [

    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'public'
    },

    {
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                loadChildren: () =>
                    import('./home/home.module')
                        .then((m) => m.HomeModule)
            }
        ]
    },

    {
        path: 'public',
        component: PublicComponent,
        children: [
            {
                path: '',
                loadChildren: () =>
                    import('./public/public.module')
                        .then((m) => m.PublicModule)
            }
        ]
    }

];

Exemple d'architecture générée

Après génération, votre application peut notamment être organisée de cette manière :

src/
├── app/
│   ├── home/
│   │   ├── home/
│   │   ├── agent/
│   │   ├── client/
│   │   └── home.module.ts
│   │
│   ├── public/
│   │   ├── public/
│   │   ├── login/
│   │   ├── agent/
│   │   └── public.module.ts
│   │
│   ├── guard/
│   │   └── auth/
│   │
│   ├── app.config.ts
│   └── app.routes.ts
│
├── assets/
│
├── styles.scss
│
└── config.json

La structure exacte peut varier en fonction de la configuration de votre application.

Utilisation avec ControllerGenerate

AngularGenerate a été pensé pour fonctionner avec un backend Laravel généré automatiquement.

Le fonctionnement global est donc :

                    BASE DE DONNÉES
                           │
                           ▼
                    ControllerGenerate
                           │
             ┌─────────────┼─────────────┐
             ▼             ▼             ▼
          Models       Controllers      Routes
             │
             ▼
          Configuration
             │
             ▼
       AngularGenerate
             │
             ▼
       Application Angular
             │
       ┌─────┼─────┐
       ▼     ▼     ▼
     Lists  Forms  Details

Cette approche permet de réduire considérablement le temps nécessaire pour mettre en place une application CRUD complète.

Résultat attendu

Après l'utilisation d'AngularGenerate, vous disposez automatiquement d'une base Angular contenant notamment :

• Modules générés automatiquement ;
• Routes ;
• Composants CRUD ;
• Listes ;
• Formulaires d'ajout ;
• Formulaires de modification ;
• Pages de détails ;
• Authentification ;
• Gestion des relations entre tables ;
• Communication avec votre API Laravel.

Bon code 🧑🏽‍💻 Salem DEV 👈🏽 fait avec beaucoup de ❤️ et ☕️