angular-generate 2.2.1 → 2.2.2

package/README.md

@@ -1,149 +1,618 @@
 # AngularGenerate
-**AngularGenerate** vous permet de générer une application Angular complète en quelques clics.
-**Votre projet** sera composé de:
-- Frontend (Angular) → Généré avec la bibliothèque **AngularGenerate** ( https://www.npmjs.com/package/angular-generate)
-- Backend (LARAVEL) → Généré automatiquement à partir d'une base de données avec **ControllerGenerate** ( https://packagist.org/packages/saloum45/controllergenerate )
 
+**AngularGenerate** est un package Angular qui permet de générer automatiquement une application Angular complète à partir d'un fichier de configuration.
 
-## Mise en place du Frontend (Angular) avec AngularGenerate
-### Prérequis
-- Créez un fichier **JSON** dans la racine du projet nommé **config.json** avec le contenu suivant
-- Vous pouvez copier le contenu complet adapté à votre projet directement depuis votre **Backend (PHP) généré par ControllerGenerate**
-```
-{
-	"projectName": "projet1.angular",// nom de votre projet angular
-	"decription": "Fichier de configuration de config",
-	"config_base_url": "http://localhost/8000",// emplacement de ControllerGenerate (plus d'informations https://packagist.org/packages/saloum45/controllergenerate)
-	"les_modules": [// tous les modules à générer
-		{
-			"module": "home",
-			"les_tables": [
-				// ici les configuration des tables à générer pour le module home
-			]
-		},
-		{
-			"module": "public",
-			"les_tables": [
-				// ici les configuration des tables à générer pour le module public
-			]
-		}
-	]
-}
-```
-- Installer la présente bibliothèque **angular-generate**
-```
+Il permet notamment de générer les **modules, routes, composants, formulaires, listes, pages de détails et interfaces d'authentification** à partir des tables définies dans votre configuration.
+
+AngularGenerate peut fonctionner 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. ControllerGenerate génère les modèles, migrations, contrôleurs, routes et relations.
+3. Vous récupérez la configuration générée par le backend.
+4. Vous placez cette configuration dans votre projet Angular.
+5. AngularGenerate utilise cette configuration pour générer automatiquement le frontend.
+6. Les composants Angular sont générés en fonction des modules et des tables définis dans `config.json`.
+
+Vous pouvez ainsi partir d'une base de données 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 :
+
+```bash
 npm install angular-generate
 ```
-- Installer la bibliothèque **@auth0/angular-jwt**
-```
+
+Le package est disponible sur npm :
+
+https://www.npmjs.com/package/angular-generate
+
+---
+
+## 3️⃣ Installer Angular JWT
+
+AngularGenerate utilise `@auth0/angular-jwt` pour la gestion du token d'authentification.
+
+```bash
 npm install @auth0/angular-jwt
 ```
-- Installer la ng-select **@ng-select/ng-select**
-Attention à la compatibilté de la version de Angular avec la version de ng-select, par exemple :
-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
-voir documention officielle https://www.npmjs.com/package/@ng-select/ng-select
-```
+
+---
+
+## 4️⃣ Installer NG-Select
+
+Installez `@ng-select/ng-select` :
+
+```bash
 npm install @ng-select/ng-select
 ```
-Importez NG-Select styles avec l'aide du fichier **style.css** ou **style.scss**
-```
-// Importing NG-Select styles
-@import url(../node_modules/@ng-select/ng-select/themes/default.theme.css);
-```
-- Installer la bibliothèque **SweetAlert2** pour les notifications
+
+### 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` :
+
+```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.
+
+```bash
 npm install sweetalert2
 ```
-- Installer la bibliothèque **ng-bootstrap** (https://ng-bootstrap.github.io)
-```
+
+---
+
+## 6️⃣ Installer ng-bootstrap
+
+Installez `ng-bootstrap` :
+
+```bash
 ng add @ng-bootstrap/ng-bootstrap
 ```
-- Installer la bibliothèque **bootstrap && bootstrap-icons**
-```
+
+Documentation :
+
+https://ng-bootstrap.github.io
+
+---
+
+## 7️⃣ Installer Bootstrap et Bootstrap Icons
+
+```bash
 npm install bootstrap bootstrap-icons
 ```
-- Importez bootstrap (CSS && JS) avec l'aide du fichier **style.css** ou **style.scss**
-```
-/* Importing Bootstrap CSS file. */
+
+Puis importez les styles dans `style.css` ou `style.scss` :
+
+```scss
+/* Importing Bootstrap CSS */
 @import 'bootstrap/dist/css/bootstrap.css';
-// Importing bootstrap icons
+
+/* 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);
+
+/* Importing NG-Select styles */
+@import url('../node_modules/@ng-select/ng-select/themes/default.theme.css');
+```
+
+---
+
+# Configuration
+
+## 1️⃣ Créer le fichier `config.json`
+
+Créez un fichier nommé :
+
+```text
+config.json
+```
+
+à la racine de votre projet Angular.
+
+Ce fichier contient la configuration utilisée par AngularGenerate pour savoir **quels modules et quelles tables doivent être générés**.
+
+Exemple :
+
+```json
+{
+    "projectName": "projet1.angular",
+    "description": "Fichier de configuration de AngularGenerate",
+    "config_base_url": "http://localhost:8000",
+    "les_modules": [
+        {
+            "module": "home",
+            "les_tables": []
+        },
+        {
+            "module": "public",
+            "les_tables": []
+        }
+    ]
+}
 ```
 
-- Configurer le **HttpClient** dans le module principal **app.config.ts**
+### `projectName`
+
+Nom du projet Angular :
+
+```json
+"projectName": "projet1.angular"
 ```
-.......................................................
+
+### `config_base_url`
+
+URL de votre backend Laravel :
+
+```json
+"config_base_url": "http://localhost:8000"
+```
+
+Cette URL correspond à l'application Laravel utilisant **ControllerGenerate**.
+
+### `les_modules`
+
+Cette propriété contient les différents modules de votre application.
+
+```json
+"les_modules": [
+    {
+        "module": "home",
+        "les_tables": []
+    },
+    {
+        "module": "public",
+        "les_tables": []
+    }
+]
+```
+
+Chaque module peut contenir plusieurs tables.
+
+---
+
+# Configuration depuis ControllerGenerate
+
+L'un des objectifs d'AngularGenerate est de pouvoir fonctionner directement avec un backend généré par **ControllerGenerate**.
+
+Vous pouvez donc récupérer la configuration nécessaire directement depuis votre backend Laravel.
+
+Le backend contient les informations permettant à AngularGenerate de connaître :
+
+* les modèles ;
+* les tables ;
+* les attributs ;
+* les relations ;
+* les clés étrangères ;
+* les informations nécessaires à la génération du frontend.
+
+Cela permet d'éviter de reconstruire manuellement toute la configuration côté Angular.
+
+---
+
+# Configuration de HttpClient
+
+AngularGenerate utilise `HttpClient` pour communiquer avec l'API Laravel.
+
+Dans votre fichier :
+
+```text
+app.config.ts
+```
+
+ajoutez `provideHttpClient()`.
+
+Exemple :
+
+```typescript
+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()), provideClientHydration(),provideHttpClient()]
+    providers: [
+        provideRouter(routes, withHashLocation()),
+        provideHttpClient()
+    ]
 };
 ```
 
-### Générer complètement l'application
-```
+---
+
+# 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` :
+
+```bash
 ng generate angular-generate:config
 ```
-### générer un module 
-Supposons que nous voulons générer le module **public** avec tous ses composants, nous lançons la commande suivante
+
+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 :
+
+```text
+public
 ```
+
+avec plusieurs tables.
+
+Pour générer uniquement ce module :
+
+```bash
 ng generate angular-generate:config --module public
 ```
-### générer les composants d'une seule table
-Supposons que nous voulons générer tous les composants de la table agent, nous lançons la commande suivante
+
+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 :
+
+```text
+agent
 ```
+
+Pour générer tous les composants associés à cette table :
+
+```bash
 ng generate angular-generate:config --table agent
 ```
-### générer un composant d'une table
-Supposons que nous voulons générer le composant qui liste tous les enregistrements de la table agent, nous lançons la commande suivante
+
+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 :
+
+```bash
+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.
+
+```bash
+--type list
+```
+
+---
+
+### `add`
+
+Génère le formulaire permettant d'ajouter un nouvel enregistrement.
+
+```bash
+--type add
+```
+
+---
+
+### `edit`
+
+Génère le formulaire permettant de modifier un enregistrement existant.
+
+```bash
+--type edit
+```
+
+---
+
+### `details`
+
+Génère la page permettant d'afficher les détails d'un enregistrement.
+
+```bash
+--type details
+```
+
+---
+
+### `login`
+
+Génère le formulaire de connexion à l'application.
+
+```bash
+--type login
+```
+
+---
+
+### `deconnexion`
+
+Génère la page permettant de gérer la déconnexion de l'utilisateur.
+
+```bash
+--type deconnexion
+```
+
+---
+
+### `not-found`
+
+Génère la page affichée lorsqu'une route demandée n'existe pas.
+
+```bash
+--type not-found
+```
+
+---
+
+# Exemple d'utilisation
+
+Supposons que nous avons une table :
+
+```text
+agent
 ```
+
+Nous pouvons générer :
+
+### Liste des agents
+
+```bash
 ng generate angular-generate:config --table agent --type list
 ```
-### NB: Les types de composant disponibles
-- **list**        : liste tous les enregistrements de la table
-- **add**         : formulaire d'ajout de la table
-- **edit**        : formulaire de modification de la table
-- **details**     : affiche les details d'un enregistrement de la table
-- **login**       : formulaire de connexion
-- **deconnexion** : page de déconnexion à l'application
-- **not-found**   : si la page demandée est introuvable
 
-### Exemple de configuration de app.route.ts
+### Formulaire d'ajout
+
+```bash
+ng generate angular-generate:config --table agent --type add
 ```
+
+### Formulaire de modification
+
+```bash
+ng generate angular-generate:config --table agent --type edit
+```
+
+### Détails d'un agent
+
+```bash
+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` :
+
+```typescript
 import { Routes } from '@angular/router';
+
 import { HomeComponent } from './home/home/home.component';
-import { AuthGuard } from './guard/auth/auth.guard';
 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",
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'public'
+    },
+
+    {
+        path: 'home',
         component: HomeComponent,
+        canActivate: [AuthGuard],
         children: [
             {
-                path: "",
-                loadChildren: () => import("./home/home.module").then((m) => m.HomeModule)
+                path: '',
+                loadChildren: () =>
+                    import('./home/home.module')
+                        .then((m) => m.HomeModule)
             }
-        ],
-        canActivate: [AuthGuard]
+        ]
     },
+
     {
-        path: "public",
+        path: 'public',
         component: PublicComponent,
         children: [
             {
-                path: "",
-                loadChildren: () => import("./public/public.module").then((m) => m.PublicModule)
+                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 :
+
+```text
+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 :
+
+```text
+                    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** ;
+* **Déconnexion** ;
+* **Page 404 / Not Found** ;
+* Gestion des **relations entre tables** ;
+* Communication avec votre **API Laravel**.
+
+---
+
+# Packages associés
+
+### ControllerGenerate
+
+Package Laravel permettant de générer automatiquement :
+
+* Controllers ;
+* Migrations ;
+* Routes ;
+* Relations ;
+* CRUD ;
+* Authentification.
+
+Documentation :
+
+https://packagist.org/packages/saloum45/controllergenerate
+
+### AngularGenerate
+
+Package Angular permettant de générer automatiquement le frontend à partir d'une configuration.
+
+Documentation et installation :
+
+https://www.npmjs.com/package/angular-generate
+
+---
+
+## Bon code 🧑🏽‍💻 Salem DEV 👈🏽 fait avec beaucoup de ❤️ et ☕️

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-generate",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Générateur de composant et code Angular à partir du fichier de configuration config.json",
   "scripts": {
     "build": "tsc -p tsconfig.json",