\u05e0\u05d9\u05e6\u05d5\u05e8 \u05e4\u05e8\u05d5\u05d9\u05d9\u05e7\u05d8 \u05d7\u05d3\u05e9.<\/p>\n\n\n
\nng new crud-app --routing\n<\/pre><\/div>\n\n\n\u05e0\u05ea\u05e7\u05d9\u05df \u05d0\u05ea bootstrap \u05db\u05d3\u05d9 \u05e9\u05d9\u05d4\u05d9\u05d4 \u05e7\u05dc \u05d9\u05d5\u05ea\u05e8 \u05dc\u05e2\u05e6\u05d1 \u05d0\u05ea \u05d4\u05d3\u05e4\u05d9\u05dd.<\/p>\n\n\n
\nnpm install bootstrap\n<\/pre><\/div>\n\n\n\u05d9\u05e6\u05d9\u05e8\u05ea \u05de\u05d5\u05d3\u05d5\u05dc \u05dc\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd \u05d5\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d5\u05ea \u05de\u05ea\u05d0\u05d9\u05de\u05d5\u05ea<\/h2>\n\n\n\nng generate module post --routing\n\nng generate component post\/index\nng generate component post\/view\nng generate component post\/create\nng generate component post\/edit\n<\/pre><\/div>\n\n\n\u05d9\u05e6\u05d9\u05e8\u05ea routes<\/h2>\n\n\n\n
src\/app\/post\/post-routing.module.ts<\/strong><\/p>\n\n\n\nimport { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\nimport { IndexComponent } from '.\/index\/index.component';\nimport { ViewComponent } from '.\/view\/view.component';\nimport { CreateComponent } from '.\/create\/create.component';\nimport { EditComponent } from '.\/edit\/edit.component';\n\nconst routes: Routes = [\n { path: 'post', redirectTo: 'post\/index', pathMatch: 'full'},\n { path: 'post\/index', component: IndexComponent },\n { path: 'post\/:postId\/view', component: ViewComponent },\n { path: 'post\/create', component: CreateComponent },\n { path: 'post\/:postId\/edit', component: EditComponent } \n];\n \n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class PostRoutingModule { }\n<\/pre><\/div>\n\n\n\u05d9\u05e6\u05d9\u05e8\u05ea \u05de\u05d5\u05d3\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8<\/h2>\n\n\n\n
\u05db\u05d3\u05d9 \u05dc\u05e7\u05d1\u05dc \u05d0\u05ea \u05d4\u05de\u05d9\u05d3\u05e2 \u05d1\u05e6\u05d5\u05e8\u05d4 \u05e9\u05dc \u05e4\u05d5\u05e1\u05d8\u05d9\u05dd \u05e0\u05d9\u05e6\u05d5\u05e8 interface \u05e9\u05d9\u05d7\u05d6\u05d9\u05e7 \u05d0\u05ea \u05d4\u05de\u05d9\u05d3\u05e2 \u05d4\u05d6\u05d4.<\/p>\n\n\n
\nng generate interface post\/post\n<\/pre><\/div>\n\n\nsrc\/app\/post\/post.ts<\/strong><\/p>\n\n\n\nexport interface Post {\n id: number;\n title: string;\n body: string;\n}\n<\/pre><\/div>\n\n\n\u05d9\u05e6\u05d9\u05e8\u05ea \u05d4-service<\/h2>\n\n\n\nng generate service post\/post\n<\/pre><\/div>\n\n\nsrc\/app\/post\/post.service.ts<\/strong><\/p>\n\n\n\nimport { Injectable } from '@angular\/core';\nimport { HttpClient, HttpHeaders } from '@angular\/common\/http';\n \nimport { Observable, throwError } from 'rxjs';\nimport { catchError } from 'rxjs\/operators';\n \nimport { Post } from '.\/post';\n \n@Injectable({\n providedIn: 'root'\n})\nexport class PostService {\n \n private apiURL = "https:\/\/jsonplaceholder.typicode.com";\n \n \/*------------------------------------------\n Http Header Options\n --------------------------------------------*\/\n httpOptions = {\n headers: new HttpHeaders({\n 'Content-Type': 'application\/json'\n })\n }\n \n \/*------------------------------------------\n Created constructor\n --------------------------------------------*\/\n constructor(private httpClient: HttpClient) { }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n getAll(): Observable<any> {\n return this.httpClient.get(this.apiURL + '\/posts\/')\n .pipe(\n catchError(this.errorHandler)\n )\n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n create(post:Post): Observable<any> {\n return this.httpClient.post(this.apiURL + '\/posts\/', \n JSON.stringify(post), this.httpOptions)\n .pipe(\n catchError(this.errorHandler)\n )\n } \n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n find(id:number): Observable<any> {\n return this.httpClient.get(this.apiURL + '\/posts\/' + id)\n .pipe(\n catchError(this.errorHandler)\n )\n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n update(id:number, post:Post): Observable<any> {\n return this.httpClient.put(this.apiURL + '\/posts\/' + id, \n JSON.stringify(post), this.httpOptions)\n .pipe( \n catchError(this.errorHandler)\n )\n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n delete(id:number){\n return this.httpClient.delete(this.apiURL + '\/posts\/' + id, \n this.httpOptions)\n .pipe(\n catchError(this.errorHandler)\n )\n }\n \n \/** \n * Write code on Method\n *\n * @return response()\n *\/\n errorHandler(error:any) {\n let errorMessage = '';\n if(error.error instanceof ErrorEvent) {\n errorMessage = error.error.message;\n } else {\n errorMessage = `Error Code: ${error.status}\\nMessage: ${error.message}`;\n }\n return throwError(errorMessage);\n }\n}\n<\/pre><\/div>\n\n\n\u05d4\u05d5\u05e1\u05e4\u05ea \u05d4\u05dc\u05d5\u05d2\u05d9\u05e7\u05d4 \u05d5\u05d4\u05d8\u05de\u05e4\u05dc\u05d8 \u05e9\u05dc \u05d4\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4<\/h2>\n\n\n\n
\u05d1\u05e7\u05d5\u05d1\u05e5 \u05d4\u05e8\u05d0\u05e9\u05d9 \u05e0\u05e7\u05d1\u05dc \u05d0\u05ea \u05db\u05dc \u05e8\u05e9\u05d9\u05de\u05ea \u05d4\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd. \u05d1\u05e8\u05e9\u05d9\u05de\u05d4 \u05e0\u05e6\u05d9\u05d2 \u05dc\u05db\u05dc \u05e4\u05d5\u05e1\u05d8 \u05d0\u05ea \u05d4-ID, \u05d4\u05db\u05d5\u05ea\u05e8\u05ea \u05d5\u05d4\u05ea\u05d5\u05db\u05df. \u05dc\u05db\u05dc \u05e4\u05d5\u05e1\u05d8 \u05d9\u05d4\u05d9\u05d5 3 \u05db\u05e4\u05ea\u05d5\u05e8\u05d9\u05dd, \u05e6\u05e4\u05d9\u05d9\u05d4 \u05d1\u05ea\u05d5\u05db\u05df \u05d4\u05e4\u05d5\u05e1\u05d8, \u05e2\u05e8\u05d9\u05db\u05d4 \u05d5\u05de\u05d7\u05d9\u05e7\u05d4.<\/p>\n\n\n\n
\u05d1\u05e7\u05d5\u05d1\u05e5 ts \u05e0\u05e7\u05d1\u05dc \u05d0\u05ea \u05e8\u05e9\u05d9\u05de\u05ea \u05db\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd \u05de\u05d4-service. \u05d1\u05e7\u05d5\u05d1\u05e5 \u05d4\u05d6\u05d4 \u05d2\u05dd \u05e0\u05d2\u05d3\u05d9\u05e8 \u05d0\u05ea \u05e4\u05e2\u05d5\u05dc\u05ea \u05d4-delete \u05de\u05db\u05d9\u05d5\u05d5\u05df \u05e9\u05d4\u05e4\u05e2\u05d5\u05dc\u05d4 \u05d4\u05d6\u05d0\u05ea \u05dc\u05d0 \u05e9\u05d5\u05dc\u05d7\u05ea \u05dc\u05e7\u05d5\u05de\u05e4\u05d5\u05e0\u05e0\u05d8\u05d4 \u05d0\u05d7\u05e8\u05ea \u05dc\u05d1\u05d9\u05e6\u05d5\u05e2.<\/p>\n\n\n\n
src\/app\/post\/index\/index.component.ts<\/strong><\/p>\n\n\n\nimport { Component, OnInit } from '@angular\/core';\nimport { PostService } from '..\/post.service';\nimport { Post } from '..\/post';\n \n@Component({\n selector: 'app-index',\n templateUrl: '.\/index.component.html',\n styleUrls: ['.\/index.component.css']\n})\nexport class IndexComponent implements OnInit {\n \n posts: Post[] = [];\n \n \/*------------------------------------------\n Created constructor\n --------------------------------------------*\/\n constructor(public postService: PostService) { }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n ngOnInit(): void {\n this.postService.getAll().subscribe((data: Post[])=>{\n this.posts = data;\n console.log(this.posts);\n }) \n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n deletePost(id:number){\n this.postService.delete(id).subscribe(res => {\n this.posts = this.posts.filter(item => item.id !== id);\n console.log('Post deleted successfully!');\n })\n }\n<\/pre><\/div>\n\n\n\u05d1\u05e7\u05d5\u05d1\u05e5 \u05d4-html \u05e0\u05e6\u05d9\u05d2 \u05d0\u05ea \u05d4\u05d8\u05d1\u05dc\u05d4 \u05e2\u05dd \u05db\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd. \u05d1\u05e2\u05de\u05d5\u05d3 \u05d4\u05d6\u05d4 \u05d9\u05d4\u05d9\u05d4 \u05d2\u05dd \u05db\u05e4\u05ea\u05d5\u05e8 \u05dc\u05d9\u05e6\u05d9\u05e8\u05ea \u05e4\u05d5\u05e1\u05d8 \u05d7\u05d3\u05e9.<\/p>\n\n\n\n
src\/app\/post\/index\/index.component.html<\/strong><\/p>\n\n\n\n<div class="container">\n <h1>All Posts<\/h1>\n \n <a href="#" routerLink="\/post\/create\/" class="btn btn-success">\n Create New Post<\/a>\n \n <table class="table table-striped">\n <thead>\n <tr>\n <th>ID<\/th>\n <th>Title<\/th>\n <th>Body<\/th>\n <th width="250px">Action<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr *ngFor="let post of posts">\n <td>{{ post.id }}<\/td>\n <td>{{ post.title }}<\/td>\n <td>{{ post.body }}<\/td>\n <td>\n <a href="#" [routerLink]="['\/post\/', post.id, 'view']" \n class="btn btn-info">View<\/a>\n <a href="#" [routerLink]="['\/post\/', post.id, 'edit']" \n class="btn btn-primary">Edit<\/a>\n <button type="button" (click)="deletePost(post.id)" \n class="btn btn-danger">Delete<\/button>\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n<\/pre><\/div>\n\n\n\u05d9\u05e6\u05d9\u05e8\u05ea \u05e4\u05d5\u05e1\u05d8 \u05d7\u05d3\u05e9<\/h2>\n\n\n\n
\u05e0\u05d9\u05e6\u05d5\u05e8 \u05d8\u05d5\u05e4\u05e1 \u05dc\u05e7\u05d1\u05dc \u05d0\u05ea \u05e0\u05ea\u05d5\u05e0\u05d9 \u05d4\u05e4\u05d5\u05e1\u05d8 \u05d5\u05e0\u05e9\u05de\u05d5\u05e8 \u05d0\u05d5\u05ea\u05d5.<\/p>\n\n\n\n
src\/app\/post\/create\/create.component.ts<\/strong><\/p>\n\n\n\nimport { Component, OnInit } from '@angular\/core';\nimport { PostService } from '..\/post.service';\nimport { Router } from '@angular\/router';\nimport { FormGroup, FormControl, Validators} from '@angular\/forms';\n \n@Component({\n selector: 'app-create',\n templateUrl: '.\/create.component.html',\n styleUrls: ['.\/create.component.css']\n})\nexport class CreateComponent implements OnInit {\n \n form!: FormGroup;\n \n \/*------------------------------------------\n Created constructor\n --------------------------------------------*\/\n constructor(public postService: PostService, private router: Router) { }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n ngOnInit(): void {\n this.form = new FormGroup({\n title: new FormControl('', [Validators.required]),\n body: new FormControl('', Validators.required)\n });\n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n get f(){\n return this.form.controls;\n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n submit(){\n console.log(this.form.value);\n this.postService.create(this.form.value).subscribe((res:any) => {\n console.log('Post created successfully!');\n this.router.navigateByUrl('post\/index');\n })\n }\n}\n<\/pre><\/div>\n\n\n\u05d4\u05e7\u05d5\u05d1\u05e5 \u05e9\u05de\u05e6\u05d9\u05d2 \u05d0\u05ea \u05d4\u05d8\u05d5\u05e4\u05e1.<\/p>\n\n\n\n
src\/app\/post\/create\/create.component.html<\/strong><\/p>\n\n\n\n<div class="container">\n <h1>Create New Post<\/h1>\n \n <a href="#" routerLink="\/post\/index" class="btn btn-primary">Back<\/a>\n \n <form [formGroup]="form" (ngSubmit)="submit()">\n <div class="form-group">\n <label for="title">Title:<\/label>\n <input \n formControlName="title"\n id="title" \n type="text" \n class="form-control">\n <div *ngIf="f['title'].touched && f['title'].invalid" class="alert alert-danger">\n <div *ngIf="f['title'].errors && f['title'].errors['required']">\n Title is required.<\/div>\n <\/div>\n <\/div>\n \n <div class="form-group">\n <label for="body">Body<\/label>\n <textarea \n formControlName="body"\n id="body" \n type="text" \n class="form-control">\n <\/textarea>\n <div *ngIf="f['body'].touched && f['body'].invalid" class="alert alert-danger">\n <div *ngIf="f['body'].errors && f['body'].errors['required']">Body is required.<\/div>\n <\/div>\n <\/div>\n \n <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit<\/button>\n <\/form>\n<\/div>\n<\/pre><\/div>\n\n\n\u05e2\u05e8\u05d9\u05db\u05ea \u05e4\u05d5\u05e1\u05d8<\/h2>\n\n\n\n
\u05d1\u05d8\u05d5\u05e4\u05e1 \u05d4\u05e2\u05e8\u05d9\u05db\u05d4 \u05e0\u05e7\u05d1\u05dc \u05d0\u05ea \u05e0\u05ea\u05d5\u05e0\u05d9 \u05d4\u05e4\u05d5\u05e1\u05d8 \u05d4\u05e7\u05d9\u05d9\u05de\u05d9\u05dd \u05d5\u05e0\u05e2\u05e8\u05d5\u05da \u05d0\u05d5\u05ea\u05dd.<\/p>\n\n\n\n
src\/app\/post\/edit\/edit.component.ts<\/strong><\/p>\n\n\n\nimport { Component, OnInit } from '@angular\/core';\nimport { PostService } from '..\/post.service';\nimport { ActivatedRoute, Router } from '@angular\/router';\nimport { Post } from '..\/post';\nimport { FormGroup, FormControl, Validators} from '@angular\/forms';\n \n@Component({\n selector: 'app-edit',\n templateUrl: '.\/edit.component.html',\n styleUrls: ['.\/edit.component.css']\n})\nexport class EditComponent implements OnInit {\n \n id!: number;\n post!: Post;\n form!: FormGroup;\n \n \/*------------------------------------------\n Created constructor\n --------------------------------------------*\/\n constructor(\n public postService: PostService,\n private route: ActivatedRoute,\n private router: Router\n ) { }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n ngOnInit(): void {\n this.id = this.route.snapshot.params['postId'];\n this.postService.find(this.id).subscribe((data: Post) => {\n this.post = data;\n }); \n \n this.form = new FormGroup({\n title: new FormControl('', [Validators.required]),\n body: new FormControl('', Validators.required)\n });\n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n get f(){\n return this.form.controls;\n }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n submit(){\n console.log(this.form.value);\n this.postService.update(this.id, this.form.value).subscribe((res:any) => {\n console.log('Post updated successfully!');\n this.router.navigateByUrl('post\/index');\n })\n }\n}\n<\/pre><\/div>\n\n\n\u05d4\u05e6\u05d2\u05ea \u05d4\u05d8\u05d5\u05e4\u05e1 \u05d1\u05e7\u05d5\u05d1\u05e5 \u05d4-html.<\/p>\n\n\n\n
products.component.html<\/strong><\/p>\n\n\n\n<div class="container">\n <h1>Update Post<\/h1>\n \n <a href="#" routerLink="\/post\/index" class="btn btn-primary">Back<\/a>\n \n <form [formGroup]="form" (ngSubmit)="submit()">\n \n <div class="form-group">\n <label for="title">Title:<\/label>\n <input \n formControlName="title"\n id="title" \n type="text" \n [(ngModel)]="post.title"\n class="form-control">\n <div *ngIf="f['title'].touched && f['title'].invalid" class="alert alert-danger">\n <div *ngIf="f['title'].errors && f['title'].errors['required']">\n Title is required.<\/div>\n <\/div>\n <\/div>\n \n <div class="form-group">\n <label for="body">Body<\/label>\n <textarea \n formControlName="body"\n id="body" \n type="text" \n [(ngModel)]="post.body"\n class="form-control">\n <\/textarea>\n <div *ngIf="f['body'].touched && f['body'].invalid" class="alert alert-danger">\n <div *ngIf="f['body'].errors && f['body'].errors['required']">Body is required.<\/div>\n <\/div>\n <\/div>\n \n <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Update<\/button>\n <\/form>\n<\/div>\n<\/pre><\/div>\n\n\n\u05e2\u05de\u05d5\u05d3 \u05e4\u05e8\u05d8\u05d9 \u05e4\u05d5\u05e1\u05d8<\/h2>\n\n\n\n
\u05db\u05d0\u05df \u05e0\u05e7\u05d1\u05dc \u05d0\u05ea \u05d4\u05e0\u05ea\u05d5\u05e0\u05d9\u05dd \u05e9\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8 \u05d5\u05e0\u05e6\u05d9\u05d2 \u05d0\u05d5\u05ea\u05dd.<\/p>\n\n\n\n
src\/app\/post\/view\/view.component.ts<\/strong><\/p>\n\n\n\nimport { Component, OnInit } from '@angular\/core';\nimport { PostService } from '..\/post.service';\nimport { ActivatedRoute, Router } from '@angular\/router';\nimport { Post } from '..\/post';\n \n@Component({\n selector: 'app-view',\n templateUrl: '.\/view.component.html',\n styleUrls: ['.\/view.component.css']\n})\nexport class ViewComponent implements OnInit {\n id!: number;\n post!: Post;\n \n \/*------------------------------------------\n Created constructor\n --------------------------------------------*\/\n constructor(\n public postService: PostService,\n private route: ActivatedRoute,\n private router: Router\n ) { }\n \n \/**\n * Write code on Method\n *\n * @return response()\n *\/\n ngOnInit(): void {\n this.id = this.route.snapshot.params['postId'];\n \n this.postService.find(this.id).subscribe((data: Post) => {\n this.post = data;\n });\n }\n}\n<\/pre><\/div>\n\n\n\u05e0\u05e6\u05d9\u05d2 \u05d0\u05ea \u05d4\u05e4\u05d5\u05e1\u05d8.<\/p>\n\n\n\n
src\/app\/post\/view\/view.component.html<\/strong><\/p>\n\n\n\n<div class="container">\n <h1>View Post<\/h1>\n \n <a href="#" routerLink="\/post\/index" class="btn btn-primary">Back<\/a>\n \n <div>\n <strong>ID:<\/strong>\n <p>{{ post.id }}<\/p>\n <\/div>\n \n <div>\n <strong>Title:<\/strong>\n <p>{{ post.title }}<\/p>\n <\/div>\n \n <div>\n <strong>Body:<\/strong>\n <p>{{ post.body }}<\/p>\n <\/div>\n \n<\/div>\n<\/pre><\/div>\n\n\n\u05e2\u05d3\u05db\u05d5\u05e0\u05d9\u05dd \u05d0\u05d7\u05e8\u05d5\u05e0\u05d9\u05dd<\/h2>\n\n\n\n
\u05d1\u05e2\u05de\u05d5\u05d3 \u05d4\u05e8\u05d0\u05e9\u05d9 \u05e9\u05dc \u05d4\u05e4\u05e8\u05d5\u05d9\u05d9\u05e7\u05d8 \u05e0\u05de\u05d7\u05e7 \u05d0\u05ea \u05db\u05dc \u05d4\u05ea\u05d5\u05db\u05df \u05d5\u05e0\u05e9\u05d0\u05d9\u05e8 \u05e8\u05e7 \u05d0\u05ea \u05d4\u05e0\u05d9\u05d5\u05d5\u05d8.<\/p>\n\n\n\n
src\/app\/app.component.html<\/strong><\/p>\n\n\n