Angular 6 CRUD Operation
در این مقاله، ما یک اپلیکیشن Angular 6 را می سازیم و یک عملیات CRUD را مرحله به مرحله از ابتدا با یک مثال انجام می دهیم. ما برنامه Angular 6 خود را با استفاده از Angular CLI تولید می کنیم و سپس آن را تغییر می دهیم تا یک پروژه مدیریت کارمند داشته باشیم که در آن کاربر نهایی می تواند عملیات CRUD را انجام دهد، به عنوان مثال، ایجاد، فهرست، به روز رسانی و حذف با نمونه REST API که با استفاده از HttpClientModule در معرض دید قرار می گیرد. ما همچنین از RouterModule برای فعال کردن مسیریابی استفاده خواهیم کرد.
برای این پروژه، من npm 5.6.0 و node v8.11.2 را روی سیستم محلی خود نصب کرده ام. می توانید آخرین نسخه Node را از اینجا دانلود کنید . برای به روز رسانی NPM می توانید دستور زیر را در ترمینال اجرا کنید.
npm i npm@latest -g
اگر نسخه @angular/cli قدیمیتر از ۶ دارید، دستور زیر را برای نصب آخرین نسخه اجرا کنید.
npm حذف -g @angular/cli
npm کش پاک کردن
npm نصب -g @angular/cli
برای نصب یک نسخه خاص، می توانید از این دستور استفاده کنید -
تولید پروژه Angular 6
هنگامی که npm و گره به آخرین نسخه ارتقا یافتند، می توانید دستور زیر را برای ایجاد یک پروژه Angular 6 در هر مکانی که انتخاب می کنید اجرا کنید.
ng crudoperation جدید
با انجام این کار، برنامه Angular 6 ما تولید می شود.
ساختار پروژه Angular 6
هنگامی که پروژه تولید شد، می توانید دستورات زیر را اجرا کنید تا برنامه Angular 6 را در localhost:4200 اجرا کنید.
سی دی crudoperation
ng خدمت
![ساختار پروژه Angular 6](http://pezhvak24.ir/dl/10kcor/cscd/article/crud-operation-in-angular-6/Images/CRUD%20Operation%20in%20Angular1.png)
مسیریابی
در زیر پیکربندی مسیریابی ما آمده است. ما آن را طوری پیکربندی کرده ایم که از ListEmpComponent به عنوان یک جزء پیش فرض استفاده کند. همچنین فراموش نکنید که آن را در ماژول اصلی - app.module.ts قرار دهید.
- import { NgModule } from '@angular/core';
- import { CommonModule } from '@angular/common';
- import { RouterModule, Routes } from '@angular/router';
- import { ListEmpComponent } from './list-emp/list-emp.component';
- import { AddEmpComponent } from './add-emp/add-emp.component';
- export const routes: Routes = [
- { path: '', component: ListEmpComponent, pathMatch: 'full' },
- { path: 'list-emp', component: ListEmpComponent },
- { path: 'add-emp', component: AddEmpComponent }
- ];
- @NgModule({
- imports: [
- CommonModule,
- RouterModule.forRoot(routes)
- ],
- exports: [RouterModule],
- declarations: []
- })
- export class AppRoutingModule { }