Maison > Article > développement back-end > Créer une application Angular CRUD avec une API Go

Créer une application Angular CRUD avec une API Go

Patricia Arquetteoriginal: 2024-11-04 21:36:02426parcourir

Building an Angular CRUD App with a Go API

Les opérations CRUD (Créer, Lire, Mettre à jour, Supprimer) sont l'épine dorsale de la plupart des applications Web. Dans ce tutoriel, nous allons vous montrer comment créer une application CRUD avec Angular sur le front-end et une GoAPI sur le back-end, ce qui donne lieu à une solution full-stack entièrement intégrée et efficace.

Conditions préalables

Node.js
Allez 1.21
MySQL

Configurer le projet angulaire

Installez Angular 18 et créez un nouveau projet avec la commande suivante.

npm install -g @angular/cli@18.0.0
ng new view --minimal --routing --style css --no-standalone --ssr=false

Structure de projet angulaire

└─ src
   ├─ app
   │  ├─ app-routing.module.ts
   │  ├─ app.component.ts
   │  ├─ app.interceptor.ts
   │  ├─ app.module.ts
   │  └─ components
   │     └─ product
   │        ├─ Create.component.ts
   │        ├─ Delete.component.ts
   │        ├─ Detail.component.ts
   │        ├─ Edit.component.ts
   │        ├─ Index.component.ts
   │        └─ Product.service.ts
   ├─ index.html
   ├─ main.ts
   └─ styles.css

*Cette structure de projet affichera uniquement les fichiers et dossiers que nous prévoyons de créer ou de modifier.

Fichiers de projet angulaires

main.ts

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'

platformBrowserDynamic().bootstrapModule(AppModule).catch(e => console.error(e))

Ce fichier main.ts initialise une application angulaire en amorçant l'AppModule à l'aide de la fonction platformBrowserDynamic. Il configure l'application pour qu'elle s'exécute dans le navigateur et gère toutes les erreurs qui se produisent pendant le processus d'amorçage.

app.module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { AppInterceptor } from './app.interceptor'

import { ProductIndex } from './components/product/Index.component'
import { ProductCreate } from './components/product/Create.component'
import { ProductDetail } from './components/product/Detail.component'
import { ProductEdit } from './components/product/Edit.component'
import { ProductDelete } from './components/product/Delete.component'

@NgModule({
  declarations: [
    AppComponent,
    ProductIndex,
    ProductCreate,
    ProductDetail,
    ProductEdit,
    ProductDelete,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

L'AppModule est le module principal d'une application Angular. Il importe les modules angulaires de base et configure le routage avec AppRoutingModule. Le module déclare divers composants liés au produit. Il enregistre également AppInterceptor en tant qu'intercepteur HTTP. L'AppComponent est défini comme composant d'amorçage, ce qui en fait le point d'entrée de l'application.

app.component.ts

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})

export class AppComponent { }

Le fichier app.component.ts définit le composant racine, AppComponent, qui utilise le directive dans son modèle pour afficher les vues routées. Le composant est identifié par le sélecteur de racine d'application et sert de point d'entrée à l'application Angular.

app.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { HttpRequest, HttpErrorResponse } from '@angular/common/http'
import { Observable, throwError } from 'rxjs'
import { HttpHandler } from '@angular/common/http'
import { HttpEvent } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})

export class AppInterceptor implements HttpInterceptor {

  baseURL = 'http://localhost:8080/api'

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request.clone({
      url: this.baseURL + request.url,
    }))
  }
}

La classe AppInterceptor est un intercepteur HTTP angulaire qui ajoute une URL de base configurable à toutes les URL de requête HTTP sortantes avant qu'elles ne soient envoyées au serveur. Cela permet à l'application de centraliser et de gérer facilement le point de terminaison de l'API de base.

app-routing.module.ts

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { ProductIndex } from './components/product/Index.component'
import { ProductCreate } from './components/product/Create.component'
import { ProductDetail } from './components/product/Detail.component'
import { ProductEdit } from './components/product/Edit.component'
import { ProductDelete } from './components/product/Delete.component'

const routes: Routes = [
  { path: '', redirectTo: 'product', pathMatch: 'full' },
  { path: 'product', component: ProductIndex },
  { path: 'product/create', component: ProductCreate },
  { path: 'product/:id', component: ProductDetail },
  { path: 'product/edit/:id', component: ProductEdit },
  { path: 'product/delete/:id', component: ProductDelete }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

L'AppRoutingModule configure le routage pour une application Angular, y compris les chemins liés aux produits pour répertorier, créer, afficher, modifier et supprimer des produits. Il comprend également un itinéraire qui redirige du chemin racine "/" vers la page de liste de produits "/product".

Créer.component.ts

import { Component } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { ProductService } from './Product.service'

@Component({
  selector: 'product-create',
  template: `
    <div class="container">
      <div class="row">
        <div class="col">
          <form ngNativeValidate method="post" (submit)="create()">
            <div class="row">
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_name">Name</label>
                <input id="product_name" name="name" class="form-control" [(ngModel)]="product.Name" maxlength="50" />
                <span *ngIf="errors.name" class="text-danger">{{errors.name}}</span>
              </div>
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_price">Price</label>
                <input id="product_price" name="price" class="form-control" [(ngModel)]="product.Price" type="number" />
                <span *ngIf="errors.price" class="text-danger">{{errors.price}}</span>
              </div>
              <div class="col-12">
                <a class="btn btn-secondary" routerLink="/product">Cancel</a>
                <button class="btn btn-primary">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>`
})
export class ProductCreate {

  product?: any = {}
  errors?: any = {}
  constructor(private router: Router, private route: ActivatedRoute, private ProductService: ProductService) { }

  create() {
    this.ProductService.create(this.product).subscribe(() => {
      this.router.navigateByUrl('/product')
    }, (e) => {
      alert(e.error)
    })
  }
}

Le composant ProductCreate fournit un formulaire pour créer un nouveau produit, liant les champs de saisie pour le nom et le prix à un objet produit. Lors de la soumission, il appelle ProductService pour créer le produit et revient à la liste des produits. Les erreurs de validation sont affichées à côté des champs correspondants, et toute erreur de création déclenche une alerte.

Supprimer.component.ts

npm install -g @angular/cli@18.0.0
ng new view --minimal --routing --style css --no-standalone --ssr=false

Le composant ProductDelete dans Delete.component.ts est un composant angulaire qui gère la suppression d'un produit. Il affiche un formulaire avec des champs en lecture seule affichant les détails du produit (ID, nom et prix). Lorsque le composant s'initialise, il récupère les détails du produit à l'aide de l'ID de produit de l'itinéraire. Lors de la soumission du formulaire, la méthode delete() appelle ProductService pour supprimer le produit, puis redirige vers la liste de produits. S'il y a une erreur lors de la suppression, une alerte s'affiche.

Détail.component.ts

└─ src
   ├─ app
   │  ├─ app-routing.module.ts
   │  ├─ app.component.ts
   │  ├─ app.interceptor.ts
   │  ├─ app.module.ts
   │  └─ components
   │     └─ product
   │        ├─ Create.component.ts
   │        ├─ Delete.component.ts
   │        ├─ Detail.component.ts
   │        ├─ Edit.component.ts
   │        ├─ Index.component.ts
   │        └─ Product.service.ts
   ├─ index.html
   ├─ main.ts
   └─ styles.css

Le composant ProductDetail affiche les détails d'un produit spécifique. Il récupère les informations sur le produit en fonction de l'ID de l'itinéraire et affiche l'ID, le nom et le prix du produit dans des champs en lecture seule. Le composant fournit des boutons « Retour » et « Modifier » pour la navigation. Les détails du produit sont récupérés et affichés lors de l'initialisation du composant.

Edit.component.ts

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'

platformBrowserDynamic().bootstrapModule(AppModule).catch(e => console.error(e))

Le composant ProductEdit permet aux utilisateurs de modifier un produit existant. Il récupère les détails du produit à l'aide de l'ID du produit de l'itinéraire et les affiche sous un formulaire avec des champs modifiables pour le nom et le prix. Lors de la soumission du formulaire, il met à jour le produit via ProductService et revient à la liste des produits. Toute erreur lors de la récupération ou de la mise à jour est affichée sous forme d'alertes et les erreurs de validation sont affichées à côté des champs concernés.

Index.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { AppInterceptor } from './app.interceptor'

import { ProductIndex } from './components/product/Index.component'
import { ProductCreate } from './components/product/Create.component'
import { ProductDetail } from './components/product/Detail.component'
import { ProductEdit } from './components/product/Edit.component'
import { ProductDelete } from './components/product/Delete.component'

@NgModule({
  declarations: [
    AppComponent,
    ProductIndex,
    ProductCreate,
    ProductDetail,
    ProductEdit,
    ProductDelete,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Le composant ProductIndex affiche une liste de produits sous forme de tableau. Il récupère la liste des produits de ProductService lors de l'initialisation et affiche l'ID, le nom et le prix de chaque produit, avec des boutons d'action pour afficher, modifier et supprimer chaque produit. Il comprend également un bouton pour accéder à la page de création de produit.

Produit.service.ts

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})

export class AppComponent { }

Le ProductService utilise HttpClient d'Angular pour effectuer les requêtes HTTP pertinentes pour la gestion des produits. Il fournit des méthodes pour :

get(id?) : Récupère les détails du produit par ID ou une liste de produits si aucun ID n'est fourni.
create(data?) : Créez un nouveau produit si des données sont fournies, sinon récupérez la page de création de produit.
edit(id, data?) : Mettez à jour un produit par ID si des données sont fournies, sinon récupérez les détails du produit pour le modifier.
delete(id, data?) : Supprimez un produit par ID si des données sont fournies, sinon récupérez les détails du produit pour confirmation.

styles.css

import { Injectable } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { HttpRequest, HttpErrorResponse } from '@angular/common/http'
import { Observable, throwError } from 'rxjs'
import { HttpHandler } from '@angular/common/http'
import { HttpEvent } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})

export class AppInterceptor implements HttpInterceptor {

  baseURL = 'http://localhost:8080/api'

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request.clone({
      url: this.baseURL + request.url,
    }))
  }
}

Le CSS ajuste la mise en page en ajoutant de l'espace au-dessus du conteneur et en espaçant les boutons horizontalement.

index.html

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { ProductIndex } from './components/product/Index.component'
import { ProductCreate } from './components/product/Create.component'
import { ProductDetail } from './components/product/Detail.component'
import { ProductEdit } from './components/product/Edit.component'
import { ProductDelete } from './components/product/Delete.component'

const routes: Routes = [
  { path: '', redirectTo: 'product', pathMatch: 'full' },
  { path: 'product', component: ProductIndex },
  { path: 'product/create', component: ProductCreate },
  { path: 'product/:id', component: ProductDetail },
  { path: 'product/edit/:id', component: ProductEdit },
  { path: 'product/delete/:id', component: ProductDelete }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Le HTML sert de point d'entrée principal pour une application Angular, y compris Bootstrap pour le style, Font Awesome pour les icônes et comme espace réservé pour l'application Angular.

Configurer le projet API Go

npm install -g @angular/cli@18.0.0
ng new view --minimal --routing --style css --no-standalone --ssr=false

Créez une base de données de test nommée "exemple" et exécutez le fichier database.sql pour importer la table et les données.

Aller à la structure du projet API

└─ src
   ├─ app
   │  ├─ app-routing.module.ts
   │  ├─ app.component.ts
   │  ├─ app.interceptor.ts
   │  ├─ app.module.ts
   │  └─ components
   │     └─ product
   │        ├─ Create.component.ts
   │        ├─ Delete.component.ts
   │        ├─ Detail.component.ts
   │        ├─ Edit.component.ts
   │        ├─ Index.component.ts
   │        └─ Product.service.ts
   ├─ index.html
   ├─ main.ts
   └─ styles.css

Aller aux fichiers du projet API

.env

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'

platformBrowserDynamic().bootstrapModule(AppModule).catch(e => console.error(e))

Ce fichier contient les détails de configuration pour la connexion à la base de données.

db.go

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { AppInterceptor } from './app.interceptor'

import { ProductIndex } from './components/product/Index.component'
import { ProductCreate } from './components/product/Create.component'
import { ProductDetail } from './components/product/Detail.component'
import { ProductEdit } from './components/product/Edit.component'
import { ProductDelete } from './components/product/Delete.component'

@NgModule({
  declarations: [
    AppComponent,
    ProductIndex,
    ProductCreate,
    ProductDetail,
    ProductEdit,
    ProductDelete,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Ce fichier db.go configure la connexion à la base de données avec GORM. La fonction SetupDatabase charge les variables d'environnement, construit une chaîne de connexion MySQL et initialise une instance GORM, qui est stockée dans la variable globale DB.

routeur.go

import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})

export class AppComponent { }

Ce fichier router.go configure le routage pour une application Go utilisant le framework Gin. La fonction SetupRouter initialise un routeur Gin avec le middleware CORS pour autoriser toutes les origines. Il définit des itinéraires pour gérer les opérations liées au produit sous le chemin /api/products, chacun étant mappé à une méthode dans ProductController. Enfin, il démarre le serveur Gin.

produit.go

import { Injectable } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { HttpRequest, HttpErrorResponse } from '@angular/common/http'
import { Observable, throwError } from 'rxjs'
import { HttpHandler } from '@angular/common/http'
import { HttpEvent } from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})

export class AppInterceptor implements HttpInterceptor {

  baseURL = 'http://localhost:8080/api'

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request.clone({
      url: this.baseURL + request.url,
    }))
  }
}

Ce fichier product.go définit un modèle de produit à utiliser avec GORM. Il spécifie une structure Product avec trois champs : Id (une clé primaire à incrémentation automatique), Nom, Prix.

product_controller.go

import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { ProductIndex } from './components/product/Index.component'
import { ProductCreate } from './components/product/Create.component'
import { ProductDetail } from './components/product/Detail.component'
import { ProductEdit } from './components/product/Edit.component'
import { ProductDelete } from './components/product/Delete.component'

const routes: Routes = [
  { path: '', redirectTo: 'product', pathMatch: 'full' },
  { path: 'product', component: ProductIndex },
  { path: 'product/create', component: ProductCreate },
  { path: 'product/:id', component: ProductDetail },
  { path: 'product/edit/:id', component: ProductEdit },
  { path: 'product/delete/:id', component: ProductDelete }
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Le fichier product_controller.go définit une structure ProductController avec des méthodes permettant de gérer les opérations CRUD pour les produits dans une application Go utilisant le framework Gin.

Index Récupère et renvoie une liste de tous les produits.
Get Récupère et renvoie un seul produit par son ID.
Créer Crée un nouveau produit à partir du corps de la demande.
Mettre à jour Met à jour un produit existant avec les données du corps de la demande.
Supprimer Supprime un produit par son ID.

main.go

import { Component } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { ProductService } from './Product.service'

@Component({
  selector: 'product-create',
  template: `
    <div class="container">
      <div class="row">
        <div class="col">
          <form ngNativeValidate method="post" (submit)="create()">
            <div class="row">
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_name">Name</label>
                <input id="product_name" name="name" class="form-control" [(ngModel)]="product.Name" maxlength="50" />
                <span *ngIf="errors.name" class="text-danger">{{errors.name}}</span>
              </div>
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_price">Price</label>
                <input id="product_price" name="price" class="form-control" [(ngModel)]="product.Price" type="number" />
                <span *ngIf="errors.price" class="text-danger">{{errors.price}}</span>
              </div>
              <div class="col-12">
                <a class="btn btn-secondary" routerLink="/product">Cancel</a>
                <button class="btn btn-primary">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>`
})
export class ProductCreate {

  product?: any = {}
  errors?: any = {}
  constructor(private router: Router, private route: ActivatedRoute, private ProductService: ProductService) { }

  create() {
    this.ProductService.create(this.product).subscribe(() => {
      this.router.navigateByUrl('/product')
    }, (e) => {
      alert(e.error)
    })
  }
}

Ce fichier main.go est le point d'entrée de l'application Go. Il importe les packages de configuration et de routage, puis appelle config.SetupDatabase() pour initialiser la connexion à la base de données et router.SetupRouter() pour configurer les routes de l'application.

Exécuter des projets

Exécuter un projet angulaire

import { Component } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'
import { ProductService } from './Product.service'

@Component({
  selector: 'product-delete',
  template: `
    <div class="container">
      <div class="row">
        <div class="col">
          <form ngNativeValidate method="post" (submit)="this.delete()">
            <div class="row">
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_id">Id</label>
                <input readonly id="product_id" name="id" class="form-control" value="{{product.Id}}" type="number" required />
              </div>
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_name">Name</label>
                <input readonly id="product_name" name="name" class="form-control" value="{{product.Name}}" maxlength="50" />
              </div>
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_price">Price</label>
                <input readonly id="product_price" name="price" class="form-control" value="{{product.Price}}" type="number" />
              </div>
              <div class="col-12">
                <a class="btn btn-secondary" routerLink="/product">Cancel</a>
                <button class="btn btn-danger">Delete</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>`
})
export class ProductDelete {

  product?: any = {}
  constructor(private router: Router, private route: ActivatedRoute, private ProductService: ProductService) { }

  ngOnInit() {
    this.get()
  }

  get() {
    return this.ProductService.delete(this.route.snapshot.params['id']).subscribe(data => {
      this.product = data
    }, e => {
      alert(e.error)
    })
  }

  delete() {
    this.ProductService.delete(this.route.snapshot.params['id'], this.product).subscribe(() => {
      this.router.navigateByUrl('/product')
    }, (e) => {
      alert(e.error)
    })
  }
}

Exécuter le projet API Go

import { Component } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { ProductService } from './Product.service'

@Component({
  selector: 'product-detail',
  template: `
    <div class="container">
      <div class="row">
        <div class="col">
          <form ngNativeValidate method="post">
            <div class="row">
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_id">Id</label>
                <input readonly id="product_id" name="id" class="form-control" value="{{product.Id}}" type="number" required />
              </div>
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_name">Name</label>
                <input readonly id="product_name" name="name" class="form-control" value="{{product.Name}}" maxlength="50" />
              </div>
              <div class="mb-3 col-md-6 col-lg-4">
                <label class="form-label" for="product_price">Price</label>
                <input readonly id="product_price" name="price" class="form-control" value="{{product.Price}}" type="number" />
              </div>
              <div class="col-12">
                <a class="btn btn-secondary" routerLink="/product">Back</a>
                <a class="btn btn-primary" routerLink="/product/edit/{{product.Id}}">Edit</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>`
})
export class ProductDetail {

  product?: any = {}
  constructor(private route: ActivatedRoute, private ProductService: ProductService) { }

  ngOnInit() {
    this.get()
  }

  get() {
    return this.ProductService.get(this.route.snapshot.params['id']).subscribe(data => {
      this.product = data
    }, e => {
      alert(e.error)
    })
  }
}

Ouvrez le navigateur Web et accédez à http://localhost:4200

Vous trouverez cette page de liste de produits.

Building an Angular CRUD App with a Go API

Essai

Cliquez sur le bouton « Afficher » pour voir la page de détails du produit.

Building an Angular CRUD App with a Go API

Cliquez sur le bouton "Modifier" pour modifier le produit et mettre à jour ses détails.

Building an Angular CRUD App with a Go API

Cliquez sur le bouton « Envoyer » pour enregistrer les détails du produit mis à jour.

Building an Angular CRUD App with a Go API

Cliquez sur le bouton "Créer" pour ajouter un nouveau produit et saisissez ses détails.

Building an Angular CRUD App with a Go API

Cliquez sur le bouton « Soumettre » pour enregistrer le nouveau produit.

Building an Angular CRUD App with a Go API

Cliquez sur le bouton "Supprimer" pour supprimer le produit précédemment créé.

Building an Angular CRUD App with a Go API

Cliquez sur le bouton "Supprimer" pour confirmer la suppression de ce produit.

Building an Angular CRUD App with a Go API

Conclusion

En conclusion, nous avons appris à créer un projet Angular de base avec des composants, des vues et un routage, tout en configurant une API utilisant le framework Gin comme backend. En utilisant GORM pour les opérations de base de données, nous avons réussi à créer un frontal dynamique qui s'intègre de manière transparente à un backend puissant et efficace. Cette combinaison constitue une base solide pour développer des applications Web modernes et complètes.

Code source : https://github.com/stackpuz/Example-CRUD-Angular-18-Go

Créez une application Angular CRUD en quelques minutes : https://stackpuz.com

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que spécifie la directive \"go\" dans un fichier go.mod et comment affecte-t-elle la compatibilité des modules ?Article suivant：Que spécifie la directive \"go\" dans un fichier go.mod et comment affecte-t-elle la compatibilité des modules ?

Articles Liés

Voir plus