Angular 16 CRUD: créer, lire, mettre à jour et supprimer des données avec Angular

Apprenez à créer une application CRUD complète avec Angular 16. Ce didacticiel explique comment créer, lire, mettre à jour et supprimer des données à l'aide des puissantes fonctionnalités CRUD d'Angular.

Dans cet exemple, nous allons créer un module post crud avec une liste, afficher, insérer, mettre à jour et supprimer le message. nous utiliserons l'API de service Web de jsonplaceholder. afin que nous puissions facilement utiliser leur API créée. jsonplaceholder fournit toutes les API dont nous avons besoin comme la liste, la vue, la création, la suppression et la mise à jour.

Étape 1 : Créer une nouvelle application

Nous partons de zéro, alors installez d'abord une nouvelle application angulaire à l'aide de la commande ci-dessous, exécutons la commande ci-dessous :

ng new my-crud-app --routing

Étape 2 : Installer Bootstrap

maintenant, nous allons installer bootstrap pour notre application crud, alors exécutons la commande ci-dessous et importons-la dans le fichier css.

npm install bootstrap --save

Maintenant, importons le fichier CSS comme ci-dessous :

src/styles.css

/* You can add global styles to this file, and also import other style files */

@import "~bootstrap/dist/css/bootstrap.css";

Étape 3 : Créer un module de publication

Après avoir créé l'application avec succès, nous devons créer un module post à l'aide de la commande angular cli. angular fournir une commande pour créer un module avec routage dans une application angulaire. exécutons donc la commande ci-dessous pour créer un module post :

ng generate module post --routing

exécutez la commande avec succès, elle créera des fichiers comme le chemin ci-dessous :

src/app/post/post.module.ts

src/app/post/post-routing.module.ts

Étape 4 : Créer un composant pour le module

Nous allons maintenant ajouter un nouveau composant à notre module de publication à l'aide de la commande ci-dessous. Créons donc un index, affichons, créons et éditons un composant pour le module d'administration :

ng generate component post/index
ng generate component post/view
ng generate component post/create
ng generate component post/edit

exécutez la commande avec succès, elle créera un dossier avec des fichiers comme le chemin ci-dessous :

src/app/post/index/*

src/app/post/view/*

src/app/post/create/*

src/app/post/edit/*

Étape 5 : Créer un itinéraire

Dans cette étape, nous allons simplement créer une route pour l'index, créer, modifier et afficher à l'aide du nouveau composant généré. nous devons donc mettre à jour notre fichier de module de post-routage comme le code ci-dessous :

src/app/post/post-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index/index.component';
import { ViewComponent } from './view/view.component';
import { CreateComponent } from './create/create.component';
import { EditComponent } from './edit/edit.component';
  
const routes: Routes = [
  { path: 'post', redirectTo: 'post/index', pathMatch: 'full'},
  { path: 'post/index', component: IndexComponent },
  { path: 'post/:postId/view', component: ViewComponent },
  { path: 'post/create', component: CreateComponent },
  { path: 'post/:postId/edit', component: EditComponent } 
];
  
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PostRoutingModule { }

Étape 6 : Créer une interface

dans cette étape, nous allons créer une interface en utilisant la commande angulaire pour le module post. nous utiliserons l'interface post avec Observable. alors créons une interface avec le code ci-dessous.

ng generate interface post/post

src/app/post/post.ts

export interface Post {
    id: number;
    title: string;
    body: string;
}

Étape 7 : Créer des services

Ici, nous allons créer un fichier post-service et nous allons écrire et appeler tous les services Web. nous allons créer getAll(), create(), find(), update() et delete().

nous utilisons l'API du site Web https://jsonplaceholder.typicode.com pour l'instant. ils fournissent à utiliser facilement.

Maintenant, créons un service de publication et mettons tout le code pour la méthode de service Web.

ng generate service post/post

src/app/post/post.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
     
import {  Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
  
import { Post } from './post';
  
@Injectable({
  providedIn: 'root'
})
export class PostService {
  
  private apiURL = "https://jsonplaceholder.typicode.com";
    
  /*------------------------------------------
  --------------------------------------------
  Http Header Options
  --------------------------------------------
  --------------------------------------------*/
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }
   
  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(private httpClient: HttpClient) { }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  getAll(): Observable<any> {
  
    return this.httpClient.get(this.apiURL + '/posts/')
  
    .pipe(
      catchError(this.errorHandler)
    )
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  create(post:Post): Observable<any> {
  
    return this.httpClient.post(this.apiURL + '/posts/', JSON.stringify(post), this.httpOptions)
  
    .pipe(
      catchError(this.errorHandler)
    )
  }  
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  find(id:number): Observable<any> {
  
    return this.httpClient.get(this.apiURL + '/posts/' + id)
  
    .pipe(
      catchError(this.errorHandler)
    )
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  update(id:number, post:Post): Observable<any> {
  
    return this.httpClient.put(this.apiURL + '/posts/' + id, JSON.stringify(post), this.httpOptions)
 
    .pipe( 
      catchError(this.errorHandler)
    )
  }
       
  /**
   * Write code on Method
   *
   * @return response()
   */
  delete(id:number){
    return this.httpClient.delete(this.apiURL + '/posts/' + id, this.httpOptions)
  
    .pipe(
      catchError(this.errorHandler)
    )
  }
      
  /** 
   * Write code on Method
   *
   * @return response()
   */
  errorHandler(error:any) {
    let errorMessage = '';
    if(error.error instanceof ErrorEvent) {
      errorMessage = error.error.message;
    } else {
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
 }
}

Étape 8 : Mettre à jour la logique et le modèle de composant

Maintenant, dans cette étape, nous allons travailler sur notre composant créé pour l'application crud. nous créons quatre composants pour notre application crud. maintenant, nous allons procéder un par un pour créer une page de liste, créer une page, modifier une page et afficher une page.

Alors, voyons un par un :

1) Modèle de page de liste et composant

Maintenant, nous allons travailler ici sur le composant d'index de publication. nous appellerons le service de publication et l'afficherons avec le bouton créer, modifier, supprimer et afficher. alors mettons-le à jour.

src/app/post/index/index.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { Post } from '../post';
      
@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
      
  posts: Post[] = [];
    
  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(public postService: PostService) { }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  ngOnInit(): void {
    this.postService.getAll().subscribe((data: Post[])=>{
      this.posts = data;
      console.log(this.posts);
    })  
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  deletePost(id:number){
    this.postService.delete(id).subscribe(res => {
         this.posts = this.posts.filter(item => item.id !== id);
         console.log('Post deleted successfully!');
    })
  }
    
}

src/app/post/index/index.component.html

<div class="container">
    <h1>Angular 16 CRUD Example - ItSolutionStuff.com</h1>
    
    <a href="#" routerLink="/post/create/" class="btn btn-success">Create New Post</a>
      
    <table class="table table-striped">
        <thead>
              <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Body</th>
                <th width="250px">Action</th>
              </tr>
        </thead>
        <tbody>
              <tr *ngFor="let post of posts">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td>{{ post.body }}</td>
                <td>
                  <a href="#" [routerLink]="['/post/', post.id, 'view']" class="btn btn-info">View</a>
                  <a href="#" [routerLink]="['/post/', post.id, 'edit']" class="btn btn-primary">Edit</a>
                  <button type="button" (click)="deletePost(post.id)" class="btn btn-danger">Delete</button>
                </td>
              </tr>
        </tbody>
    </table>
 </div>

2) Créer un modèle de page et un composant

maintenant ici, nous allons utiliser les données du magasin de formulaires réactifs dans le serveur à l'aide de services Web. alors mettons-le à jour.

src/app/post/create/create.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { Router } from '@angular/router';
import { FormGroup, FormControl, Validators} from '@angular/forms';
     
@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
    
  form!: FormGroup;
    
  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(
    public postService: PostService,
    private router: Router
  ) { }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  ngOnInit(): void {
    this.form = new FormGroup({
      title: new FormControl('', [Validators.required]),
      body: new FormControl('', Validators.required)
    });
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  get f(){
    return this.form.controls;
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  submit(){
    console.log(this.form.value);
    this.postService.create(this.form.value).subscribe((res:any) => {
         console.log('Post created successfully!');
         this.router.navigateByUrl('post/index');
    })
  }
  
}

src/app/post/create/create.component.html

<div class="container">
    <h1>Create New Post</h1>
  
    <a href="#" routerLink="/post/index" class="btn btn-primary">Back</a>
        
    <form [formGroup]="form" (ngSubmit)="submit()">
  
        <div class="form-group">
            <label for="title">Title:</label>
            <input 
                formControlName="title"
                id="title" 
                type="text" 
                class="form-control">
            <div *ngIf="f['title'].touched && f['title'].invalid" class="alert alert-danger">
                <div *ngIf="f['title'].errors && f['title'].errors['required']">Title is required.</div>
            </div>
        </div>
  
        <div class="form-group">
            <label for="body">Body</label>
            <textarea 
                formControlName="body"
                id="body" 
                type="text" 
                class="form-control">
            </textarea>
            <div *ngIf="f['body'].touched && f['body'].invalid" class="alert alert-danger">
                <div *ngIf="f['body'].errors && f['body'].errors['required']">Body is required.</div>
            </div>
        </div>
  
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

3) Modifier le modèle de page et le composant

maintenant ici, nous utiliserons les données du magasin de formulaires réactifs dans le serveur en utilisant les services Web pour mettre à jour les informations de publication. alors mettons-le à jour.

src/app/post/edit/edit.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Post } from '../post';
import { FormGroup, FormControl, Validators} from '@angular/forms';
     
@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {
      
  id!: number;
  post!: Post;
  form!: FormGroup;
    
  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(
    public postService: PostService,
    private route: ActivatedRoute,
    private router: Router
  ) { }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  ngOnInit(): void {
    this.id = this.route.snapshot.params['postId'];
    this.postService.find(this.id).subscribe((data: Post)=>{
      this.post = data;
    }); 
      
    this.form = new FormGroup({
      title: new FormControl('', [Validators.required]),
      body: new FormControl('', Validators.required)
    });
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  get f(){
    return this.form.controls;
  }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  submit(){
    console.log(this.form.value);
    this.postService.update(this.id, this.form.value).subscribe((res:any) => {
         console.log('Post updated successfully!');
         this.router.navigateByUrl('post/index');
    })
  }
   
}

src/app/post/edit/edit.component.html

<div class="container">
    <h1>Update Post</h1>
   
    <a href="#" routerLink="/post/index" class="btn btn-primary">Back</a>
          
    <form [formGroup]="form" (ngSubmit)="submit()">
    
        <div class="form-group">
            <label for="title">Title:</label>
            <input 
                formControlName="title"
                id="title" 
                type="text" 
                [(ngModel)]="post.title"
                class="form-control">
            <div *ngIf="f['title'].touched && f['title'].invalid" class="alert alert-danger">
                <div *ngIf="f['title'].errors && f['title'].errors['required']">Title is required.</div>
            </div>
        </div>
           
        <div class="form-group">
            <label for="body">Body</label>
            <textarea 
                formControlName="body"
                id="body" 
                type="text" 
                [(ngModel)]="post.body"
                class="form-control">
            </textarea>
            <div *ngIf="f['body'].touched && f['body'].invalid" class="alert alert-danger">
                <div *ngIf="f['body'].errors && f['body'].errors['required']">Body is required.</div>
            </div>
        </div>
         
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Update</button>
    </form>
</div>

4) Modèle et composant de page de détail

maintenant ici, nous afficherons les données sur le serveur en utilisant les services Web pour mettre à jour les informations de publication. alors mettons-le à jour.

src/app/post/view/view.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from '../post.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Post } from '../post';
    
@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
     
  id!: number;
  post!: Post;
    
  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(
    public postService: PostService,
    private route: ActivatedRoute,
    private router: Router
   ) { }
    
  /**
   * Write code on Method
   *
   * @return response()
   */
  ngOnInit(): void {
    this.id = this.route.snapshot.params['postId'];
        
    this.postService.find(this.id).subscribe((data: Post)=>{
      this.post = data;
    });
  }
    
}

src/app/post/view/view.component.html

<div class="container">
    <h1>View Post</h1>
  
    <a href="#" routerLink="/post/index" class="btn btn-primary">Back</a>
   
    <div>
        <strong>ID:</strong>
        <p>{{ post.id }}</p>
    </div>
   
    <div>
        <strong>Title:</strong>
        <p>{{ post.title }}</p>
    </div>
   
    <div>
        <strong>Body:</strong>
        <p>{{ post.body }}</p>
    </div>
   
</div>

Maintenant, mettons à jour la vue html de l'application :

src/app/app.component.html

<router-outlet></router-outlet>

Étape 9 : Importer dans le fichier de module

Maintenant, dans la dernière étape, nous allons importer notre module de publication et HttpClientModule dans le fichier principal et également d'autres dans le module de publication.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
  
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
import { PostModule } from './post/post.module';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PostModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/post/post.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
  
import { PostRoutingModule } from './post-routing.module';
import { IndexComponent } from './index/index.component';
import { ViewComponent } from './view/view.component';
import { CreateComponent } from './create/create.component';
import { EditComponent } from './edit/edit.component';
  
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [IndexComponent, ViewComponent, CreateComponent, EditComponent],
  imports: [
    CommonModule,
    PostRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class PostModule { }

Exécutez l'application angulaire :

Toutes les étapes requises ont été effectuées, vous devez maintenant taper la commande ci-dessous et appuyer sur Entrée pour exécuter l'application Angular :

ng serve

Maintenant, allez dans votre navigateur Web, tapez l'URL donnée et affichez la sortie de l'application :

http://localhost:4200/post

Vous pouvez télécharger le code complet depuis Github : Cliquez pour télécharger .

#angular