angular-generate 2.2.2 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -167
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
**AngularGenerate** est un package Angular qui permet de générer automatiquement une application Angular complète à partir d'un fichier de configuration.
|
|
4
4
|
|
|
5
|
-
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.
|
|
6
5
|
|
|
7
|
-
AngularGenerate
|
|
6
|
+
AngularGenerate fonctionne avec un backend Laravel généré automatiquement grâce au package [**ControllerGenerate**](https://packagist.org/packages/saloum45/controllergenerate)
|
|
8
7
|
|
|
9
8
|
#### Packages utilisés :
|
|
10
9
|
|
|
11
10
|
* Frontend : **AngularGenerate**
|
|
12
|
-
* Backend : **ControllerGenerate**
|
|
11
|
+
* Backend : [**ControllerGenerate**](https://packagist.org/packages/saloum45/controllergenerate)
|
|
13
12
|
|
|
14
13
|
---
|
|
15
14
|
|
|
@@ -19,14 +18,48 @@ AngularGenerate fonctionne à partir d'un fichier **`config.json`** contenant la
|
|
|
19
18
|
|
|
20
19
|
Le principe est simple :
|
|
21
20
|
|
|
22
|
-
1. Vous créez votre backend Laravel avec **ControllerGenerate
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
5. AngularGenerate utilise cette configuration pour générer automatiquement le frontend.
|
|
27
|
-
6. Les composants Angular sont générés en fonction des modules et des tables définis dans `config.json`.
|
|
21
|
+
1. Vous créez votre backend Laravel avec [**ControllerGenerate**](https://packagist.org/packages/saloum45/controllergenerate).
|
|
22
|
+
3. Vous récupérez le fichier **`config.json`** généré par le backend dans la racine du projet Laravel.
|
|
23
|
+
4. Copier ce fichier dans la racine de votre projet Angular.
|
|
24
|
+
5. Les composants Angular sont générés en fonction des modules et des tables définis dans `config.json`.
|
|
28
25
|
|
|
29
|
-
|
|
26
|
+
Votre structure doit alors ressembler à ceci :
|
|
27
|
+
|
|
28
|
+
```text
|
|
29
|
+
mon-projet-angular/
|
|
30
|
+
├── src/
|
|
31
|
+
├── public/
|
|
32
|
+
├── angular.json
|
|
33
|
+
├── package.json
|
|
34
|
+
├── tsconfig.json
|
|
35
|
+
└── config.json
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
> ⚠️ **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.
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### Exemple de `config.json`
|
|
42
|
+
|
|
43
|
+
Le fichier généré par le backend aura une structure similaire à :
|
|
44
|
+
|
|
45
|
+
```json
|
|
46
|
+
{
|
|
47
|
+
"projectName": "projet.angular",
|
|
48
|
+
"description": "Fichier de configuration de AngularGenerate",
|
|
49
|
+
"config_base_url": "http://localhost:8000",
|
|
50
|
+
"les_modules": [
|
|
51
|
+
{
|
|
52
|
+
"module": "home",
|
|
53
|
+
"les_tables": []
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"module": "public",
|
|
57
|
+
"les_tables": []
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
Vous pouvez ainsi partir de deux packages et obtenir rapidement une structure complète **Backend Laravel + Frontend Angular**.
|
|
30
63
|
|
|
31
64
|
---
|
|
32
65
|
|
|
@@ -38,7 +71,7 @@ Avant d'utiliser AngularGenerate, assurez-vous d'avoir installé :
|
|
|
38
71
|
* **npm**
|
|
39
72
|
* **Angular CLI**
|
|
40
73
|
* Un projet Angular
|
|
41
|
-
* Un backend Laravel utilisant **ControllerGenerate**
|
|
74
|
+
* Un backend Laravel utilisant [**ControllerGenerate**](https://packagist.org/packages/saloum45/controllergenerate)
|
|
42
75
|
|
|
43
76
|
---
|
|
44
77
|
|
|
@@ -52,10 +85,6 @@ Installez le package avec npm :
|
|
|
52
85
|
npm install angular-generate
|
|
53
86
|
```
|
|
54
87
|
|
|
55
|
-
Le package est disponible sur npm :
|
|
56
|
-
|
|
57
|
-
https://www.npmjs.com/package/angular-generate
|
|
58
|
-
|
|
59
88
|
---
|
|
60
89
|
|
|
61
90
|
## 3️⃣ Installer Angular JWT
|
|
@@ -144,99 +173,6 @@ Puis importez les styles dans `style.css` ou `style.scss` :
|
|
|
144
173
|
/* Importing NG-Select styles */
|
|
145
174
|
@import url('../node_modules/@ng-select/ng-select/themes/default.theme.css');
|
|
146
175
|
```
|
|
147
|
-
|
|
148
|
-
---
|
|
149
|
-
|
|
150
|
-
# Configuration
|
|
151
|
-
|
|
152
|
-
## 1️⃣ Créer le fichier `config.json`
|
|
153
|
-
|
|
154
|
-
Créez un fichier nommé :
|
|
155
|
-
|
|
156
|
-
```text
|
|
157
|
-
config.json
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
à la racine de votre projet Angular.
|
|
161
|
-
|
|
162
|
-
Ce fichier contient la configuration utilisée par AngularGenerate pour savoir **quels modules et quelles tables doivent être générés**.
|
|
163
|
-
|
|
164
|
-
Exemple :
|
|
165
|
-
|
|
166
|
-
```json
|
|
167
|
-
{
|
|
168
|
-
"projectName": "projet1.angular",
|
|
169
|
-
"description": "Fichier de configuration de AngularGenerate",
|
|
170
|
-
"config_base_url": "http://localhost:8000",
|
|
171
|
-
"les_modules": [
|
|
172
|
-
{
|
|
173
|
-
"module": "home",
|
|
174
|
-
"les_tables": []
|
|
175
|
-
},
|
|
176
|
-
{
|
|
177
|
-
"module": "public",
|
|
178
|
-
"les_tables": []
|
|
179
|
-
}
|
|
180
|
-
]
|
|
181
|
-
}
|
|
182
|
-
```
|
|
183
|
-
|
|
184
|
-
### `projectName`
|
|
185
|
-
|
|
186
|
-
Nom du projet Angular :
|
|
187
|
-
|
|
188
|
-
```json
|
|
189
|
-
"projectName": "projet1.angular"
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
### `config_base_url`
|
|
193
|
-
|
|
194
|
-
URL de votre backend Laravel :
|
|
195
|
-
|
|
196
|
-
```json
|
|
197
|
-
"config_base_url": "http://localhost:8000"
|
|
198
|
-
```
|
|
199
|
-
|
|
200
|
-
Cette URL correspond à l'application Laravel utilisant **ControllerGenerate**.
|
|
201
|
-
|
|
202
|
-
### `les_modules`
|
|
203
|
-
|
|
204
|
-
Cette propriété contient les différents modules de votre application.
|
|
205
|
-
|
|
206
|
-
```json
|
|
207
|
-
"les_modules": [
|
|
208
|
-
{
|
|
209
|
-
"module": "home",
|
|
210
|
-
"les_tables": []
|
|
211
|
-
},
|
|
212
|
-
{
|
|
213
|
-
"module": "public",
|
|
214
|
-
"les_tables": []
|
|
215
|
-
}
|
|
216
|
-
]
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
Chaque module peut contenir plusieurs tables.
|
|
220
|
-
|
|
221
|
-
---
|
|
222
|
-
|
|
223
|
-
# Configuration depuis ControllerGenerate
|
|
224
|
-
|
|
225
|
-
L'un des objectifs d'AngularGenerate est de pouvoir fonctionner directement avec un backend généré par **ControllerGenerate**.
|
|
226
|
-
|
|
227
|
-
Vous pouvez donc récupérer la configuration nécessaire directement depuis votre backend Laravel.
|
|
228
|
-
|
|
229
|
-
Le backend contient les informations permettant à AngularGenerate de connaître :
|
|
230
|
-
|
|
231
|
-
* les modèles ;
|
|
232
|
-
* les tables ;
|
|
233
|
-
* les attributs ;
|
|
234
|
-
* les relations ;
|
|
235
|
-
* les clés étrangères ;
|
|
236
|
-
* les informations nécessaires à la génération du frontend.
|
|
237
|
-
|
|
238
|
-
Cela permet d'éviter de reconstruire manuellement toute la configuration côté Angular.
|
|
239
|
-
|
|
240
176
|
---
|
|
241
177
|
|
|
242
178
|
# Configuration de HttpClient
|
|
@@ -380,36 +316,6 @@ Génère la page permettant d'afficher les détails d'un enregistrement.
|
|
|
380
316
|
|
|
381
317
|
---
|
|
382
318
|
|
|
383
|
-
### `login`
|
|
384
|
-
|
|
385
|
-
Génère le formulaire de connexion à l'application.
|
|
386
|
-
|
|
387
|
-
```bash
|
|
388
|
-
--type login
|
|
389
|
-
```
|
|
390
|
-
|
|
391
|
-
---
|
|
392
|
-
|
|
393
|
-
### `deconnexion`
|
|
394
|
-
|
|
395
|
-
Génère la page permettant de gérer la déconnexion de l'utilisateur.
|
|
396
|
-
|
|
397
|
-
```bash
|
|
398
|
-
--type deconnexion
|
|
399
|
-
```
|
|
400
|
-
|
|
401
|
-
---
|
|
402
|
-
|
|
403
|
-
### `not-found`
|
|
404
|
-
|
|
405
|
-
Génère la page affichée lorsqu'une route demandée n'existe pas.
|
|
406
|
-
|
|
407
|
-
```bash
|
|
408
|
-
--type not-found
|
|
409
|
-
```
|
|
410
|
-
|
|
411
|
-
---
|
|
412
|
-
|
|
413
319
|
# Exemple d'utilisation
|
|
414
320
|
|
|
415
321
|
Supposons que nous avons une table :
|
|
@@ -581,38 +487,9 @@ Après l'utilisation d'AngularGenerate, vous disposez automatiquement d'une base
|
|
|
581
487
|
* **Formulaires de modification** ;
|
|
582
488
|
* **Pages de détails** ;
|
|
583
489
|
* **Authentification** ;
|
|
584
|
-
* **Déconnexion** ;
|
|
585
|
-
* **Page 404 / Not Found** ;
|
|
586
490
|
* Gestion des **relations entre tables** ;
|
|
587
491
|
* Communication avec votre **API Laravel**.
|
|
588
492
|
|
|
589
|
-
---
|
|
590
|
-
|
|
591
|
-
# Packages associés
|
|
592
493
|
|
|
593
|
-
### ControllerGenerate
|
|
594
|
-
|
|
595
|
-
Package Laravel permettant de générer automatiquement :
|
|
596
|
-
|
|
597
|
-
* Controllers ;
|
|
598
|
-
* Migrations ;
|
|
599
|
-
* Routes ;
|
|
600
|
-
* Relations ;
|
|
601
|
-
* CRUD ;
|
|
602
|
-
* Authentification.
|
|
603
|
-
|
|
604
|
-
Documentation :
|
|
605
|
-
|
|
606
|
-
https://packagist.org/packages/saloum45/controllergenerate
|
|
607
|
-
|
|
608
|
-
### AngularGenerate
|
|
609
|
-
|
|
610
|
-
Package Angular permettant de générer automatiquement le frontend à partir d'une configuration.
|
|
611
|
-
|
|
612
|
-
Documentation et installation :
|
|
613
|
-
|
|
614
|
-
https://www.npmjs.com/package/angular-generate
|
|
615
|
-
|
|
616
|
-
---
|
|
617
494
|
|
|
618
495
|
## Bon code 🧑🏽💻 Salem DEV 👈🏽 fait avec beaucoup de ❤️ et ☕️
|