jant-taf v2.0.8

JantTaf

JantTaf vous permet de générer une application WEB complète en quelques cliques. Cette application est composé d':

• un projet frontend Angular que vous pouvez générer facilement avec cette bibliothèque ( https://www.npmjs.com/package/jant-taf )
• un projet backend PHP que vous pouvez génèrer à partir d'une base de données ( https://taf.jant.tech )

Nous allons voir comment mettre en place le projet Angular et l'utiliser

Prérequis

• Créez un fichier JSON dans la racine du projet nommé taf.config.json avec le contenu suivant (un exemple complet est à la fin de cette présente page):

{
	"projectName": "projet1.angular",// nom de votre projet angular
	"decription": "Fichier de configuration de Taf",
	"taf_base_url": "http://localhost/backend/taf/taf_angular/",// emplacement de taf backend (plus d'informations https://taf.jant.tech)
	"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 bibliothèque @auth0/angular-jwt

npm install @auth0/angular-jwt

• Installer la bibliothèque bootstrap lancez la commande suivante :

npm install bootstrap

et puis importez bootstrap (CSS) avec l'aide du fichier de style pricipal styles.css ou styles.scss

/* You can add global styles to this file, and also import other style files */
@import '~bootstrap/dist/css/bootstrap.css';

enfin importez bootstrap (JS) avec l'aide du fichier de style pricipal app.component.js

.......................................
import 'bootstrap/dist/js/bootstrap.js';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  .....................................
}

• Ajoutez le module HttpClientModule dans le module principal app.module.ts

.......................................................
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Générer complètement l'application

ng generate jant-taf:taf

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

ng generate jant-taf:taf --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

ng generate jant-taf:taf --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

ng generate jant-taf:taf --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-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, 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';

const routes: Routes =  [
  { path: "", pathMatch: "full", redirectTo: "public" },
  {
    path: "home",
    component:HomeComponent, 
    children: [
      {
        path: "",
        loadChildren: () => import("./home/home.module").then((m) => m.HomeModule)
      }
    ],
   canActivate:[AuthGuard]
  },
  {
    path: "public",
    component:PublicComponent, 
    children: [
      {
        path: "",
        loadChildren: () => import("./public/public.module").then((m) => m.PublicModule)
      }
    ],
  },
  
]

@NgModule({
  imports: [RouterModule.forRoot(routes,{useHash:true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Exemple complet de fichier taf.config.json

{
	"projectName": "projet1.angular",
	"decription": "Fichier de configuration de Taf",
	"taf_base_url": "http://localhost/backend/taf/taf_angular/",
	"les_modules": [
		{
			"module": "home",
			"les_tables": [
				{
					"table": "agent",
					"description": [
						"prenom",
						"nom",
						"telephone",
						"adresse",
						"login",
						"pwd"
					],
					"les_types": [
						"add",
						"edit",
						"list",
						"details"
					]
				},
				{
					"table": "deconnexion",
					"description": [],
					"les_types": [
						"deconnexion"
					]
				},
				{
					"table": "not_found",
					"description": [],
					"les_types": [
						"not-found"
					]
				},
				{
					"table": "client",
					"description": [
						"id_client",
						"id_agent",
						"longitude",
						"lattitude",
						"nom",
						"prenom",
						"telephone",
						"adresse",
						"created_at"
					],
					"les_types": [
						"add",
						"edit",
						"list",
						"details"
					]
				},
				{
					"table": "fournisseur",
					"description": [
						"id_fournisseur",
						"nom_entreprise",
						"prenom",
						"nom",
						"adresse",
						"telephone"
					],
					"les_types": [
						"add",
						"edit",
						"list",
						"details"
					]
				},
			]
		},
		{
			"module": "public",
			"les_tables": [
				{
					"table": "login",
					"description": [
						"login",
						"pwd"
					],
					"les_types": [
						"login"
					]
				},
				{
					"table": "not_found",
					"description": [],
					"les_types": [
						"not-found"
					]
				}
			]
		}
	]
}