Angular 13: Пример CRUD с Web API
Приложение Crud Operation в angular 13; В этом руководстве мы узнаем, как создавать приложения для работы с crud в angular 13, используя службы API web rest.
Пример работы Angular 13 CRUD с Web API
Используйте следующие шаги и создайте приложение crud (создание, чтение, обновление, удаление) в приложениях angular 13:
Шаг 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 13 CRUD Example - Tutsmake.com</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
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.