Пример работы Angular 14 CRUD с веб-API

21/06/2022 15:12

В этом руководстве мы узнаем, как создавать CRUD (создавать, читать, обновлять, удалять) рабочие приложения в angular 14, используя службы API веб-оста.

CRUD — это аббревиатура, пришедшая из мира компьютерного программирования и относящаяся к четырем функциям, которые считаются необходимыми для реализации приложения постоянного хранения: создание, чтение, обновление и удаление.

Пример работы Angular 14 CRUD с веб-API

Используйте следующие шаги и создайте приложение crud (создание, чтение, обновление, удаление) в приложениях angular 14:

Шаг 1 - Создайте новое приложение Angular

Прежде всего, откройте свой терминал и выполните на нем следующую команду, чтобы установить приложение angular:

ng new my-crud-app --routing

Шаг 2 – Установите Bootstrap

На этом шаге выполните следующую команду на терминале, чтобы установить boostratp:

npm install bootstrap --save

После этого импортируйте этот файл css в приложение angular crud:

src/styles.css

/* В этот файл можно добавить глобальные стили, а также импортировать другие файлы стилей */
@import "~bootstrap/dist/css/bootstrap.css";

Шаг 3 - Создайте модуль и маршрутизацию

На этом шаге выполните следующую команду на терминале, чтобы создать модуль в приложении angular:

ng generate module post --routing

Приведенная выше команда создаст файлы в следующих местах:

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

Шаг 4 - Создайте компонент CRUD

На этом этапе выполните следующие команды на терминале, чтобы создать компоненты CRUD в приложении angular:

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

Теперь вы можете видеть, что приведенные выше команды создадут некоторые файлы компонентов в следующих местах:

src/app/post/index/*
src/app/post/view/*
src/app/post/create/*
src/app/post/edit/*

Шаг 5 - Добавление маршрутов

На этом этапе перейдите в каталог src/app/post и откройте файл post-routing.module.ts. Затем добавьте маршруты в файл 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 { }

Шаг 6 - Создайте интерфейс

Теперь выполните следующую команду на терминале, чтобы создать интерфейс:

ng generate interface post/post

Затем перейдите в каталог src/app/post и откройте post.ts. И добавьте в него следующий код:

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

Шаг 7 - Создайте службы

На этом шаге выполните следующую команду для создания сервисов:

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";
    
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }
   
  constructor(private httpClient: HttpClient) { }
    
  getAll(): Observable<Post[]> {
    return this.httpClient.get<Post[]>(this.apiURL + '/posts/')
    .pipe(
      catchError(this.errorHandler)
    )
  }
    
  create(post): Observable<Post> {
    return this.httpClient.post<Post>(this.apiURL + '/posts/', JSON.stringify(post), this.httpOptions)
    .pipe(
      catchError(this.errorHandler)
    )
  }  
    
  find(id): Observable<Post> {
    return this.httpClient.get<Post>(this.apiURL + '/posts/' + id)
    .pipe(
      catchError(this.errorHandler)
    )
  }
    
  update(id, post): Observable<Post> {
    return this.httpClient.put<Post>(this.apiURL + '/posts/' + id, JSON.stringify(post), this.httpOptions)
    .pipe(
      catchError(this.errorHandler)
    )
  }
    
  delete(id){
    return this.httpClient.delete<Post>(this.apiURL + '/posts/' + id, this.httpOptions)
    .pipe(
      catchError(this.errorHandler)
    )
  }
     
   
  errorHandler(error) {
    let errorMessage = '';
    if(error.error instanceof ErrorEvent) {
      errorMessage = error.error.message;
    } else {
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    return throwError(errorMessage);
 }
}

Обратите внимание, что в этом примере мы будем использовать API веб-сайта https://jsonplaceholder.typicode.com.

Шаг 8 - Добавьте код в компонент и шаблон

На этом шаге создайте компоненты и шаблон, такие как страница списка, создайте страницу, отредактируйте страницу и просмотрите страницу в приложении angular crud.

1) Шаблон страницы списка и компонент

Прежде всего, посетите каталог src/app/post/index и откройте index.component.ts или создайте index.components.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((dаta: 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 или создайте index.component.html, если он еще не существует. Затем добавьте в него следующий код:

<div class="container">
    <h1>Angular 14 CRUD Example</h1>
   
    <a href="#" routerLink="/post/create/" class="btn btn-success">Create New Post</a>
     
    <table class="table table-bordered">
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Body</th>
        <th width="220px">Action</th>
      </tr>
      <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>
    </table>
 </div>

2) Страница добавления поста и компонент

Прежде всего, посетите каталог src/app/post/create и откройте create.component.ts или создайте create.components.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 или создайте 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) Страница редактирования и компонент

Затем перейдите в каталог src/app/post/edit и откройте edit.component.ts или создайте edit.components.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((dаta: 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 или создайте 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) Страница полного поста и компонент

Посетите каталог src/app/post/view и откройте view.component.ts или view.components.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((dаta: Post)=>{
      this.post = data;
    });
  }
     
}

Теперь перейдите в каталог src/app/post/view и откройте view.component.html или создайте 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>

Теперь перейдите в каталог src/app и откройте app.component.html. Затем добавьте в него следующую строку:

<router-outlet></router-outlet>

Шаг 9 - Импорт в модули

На этом этапе перейдите в каталог 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 { }

Шаг 10 - Запустите приложение Angular

На этом шаге выполните следующую команду в терминале, чтобы запустить приложение angular:

ng serve

Затем откройте браузер и введите в него следующий URL:

localhost:4200/post

Angular

0 + 0 -

MakeCodes
0
550