Angular : 워크플로 프로세스에 대한 각도

워크플로우 프로세스를 포함하는 Angular 타임시트 응용 프로그램을 개발하기 위한 상태 전환 기술에 대해 설명합니다.

 

Angular : 워크플로 프로세스에 대한 각도

 

Angular는 워크플로우 프로세스 관리와 같은 복잡한 UI 애플리케이션을 개발할 수 있는 훌륭한 플랫폼을 제공합니다. 이 기사에서는 워크플로우 프로세스를 포함하는 Angular 타임시트 응용 프로그램을 개발하기 위한 상태 전환 기술에 대해 설명합니다. 타임시트 제출 및 승인 워크플로우 프로세스는 이 기법을 설명하기 위한 예로 간주됩니다.

다음과 같은 경로 구성에서 시작하여 Angular 타임시트 애플리케이션을 신속하게 개발할 수 있습니다:

const appRoutes: Routes = [
  { path: 'timesheet', component: TimesheetComponent },
  { path: '', redirectTo: '/timesheet', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
]

 

 

타임시트 구성요소에 "제출", "승인" 및 "승인"과 같은 단추가 있는 타임시트 양식이 표시됩니다 직원이 /timesheet 링크에 액세스하면 "Submit(제출)" 버튼만 표시되고, 관리자가 /timesheet 링크에 액세스하면 "Approve(승인)" 버튼 등이 표시됩니다. 타임시트 구성요소가 모든 기능을 처리하면서 중량이 증가하는 것은 분명합니다.

워크플로 오류 경로가 응용 프로그램에 추가되면 타임시트 구성 요소의 복잡성이 훨씬 더 높아집니다. 다음 섹션에서는 보다 유지보수 가능하고 쉽게 확장 가능한 Angular 코드를 작성하는 데 도움이 되는 상태 전환 기반 기술에 대해 설명합니다.

 

 

상태 전환

이제 다음과 같은 상태 전환에 따라 위의 요구 사항을 변환해 보겠습니다:

UNKNOWN	empTimesheet	loadEmpTs()	loadEmpTsSuccess	EMPTSLOADED
EMPTSLOADED	submitTimesheet	processSubmitTs()	submitTsSuccess	TSSUBMITTED
TSSUBMITTED	mgrTimesheet	loadMgrTs()	loadMgrTsSuccess	MGRTSLOADED
MGRTSLOADED	approveTimesheet	processApproveTs()	approveTsSuccess	TSAPPROVED
TSAPPROVED	hrTimesheet	loadHrTs()	loadHrTsSuccess	HRTSLOADED
HRTSLOADED	acceptTimesheet	processAcceptTs()	acceptTsSuccess	TSACCEPTE

 

 

모든 상태 전환이 - 초기 상태 > 사전 이벤트(또는 트리거) > 프로세서(또는 동작) -> 사후 이벤트 > 최종 상태와 같은 패턴을 따릅니다. 간략하게 논의하기 위해 위의 전환에 로그인 프로세스 및 워크플로우 오류 경로를 포함하지 않았습니다.

그런 다음 app-routing.module.ts의 경로를 다음과 같이 설정할 수 있습니다:

const appRoutes: Routes = [
  { path: 'acceptTimesheet', component: ProcessAcceptTimesheetComponent },
  { path: 'hrTimesheet', component: HRTimesheetComponent },
  { path: 'approveTimesheet', component: ProcessApproveTimesheetComponent },
  { path: 'managerTimesheet', component: ManagerTimesheetComponent },
  { path: 'submitTimesheet', component: ProcessSubmitTimesheetComponent },
  { path: 'employeeTimesheet', component: EmployeeTimesheetComponent },
  { path: 'timesheet', component: TimesheetComponent },
  { path: '', redirectTo: '/timesheet', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
]

 

 

타임시트 구성 요소가 로그인한 사용자의 역할에 따라 그리고 타임시트 상태(일반적으로 백엔드 DB에 저장되는 TS Submitted, TS PROVED 및 TS ACCEPED)를 확인한 후 <직원 타임시트> 또는 <관리자 타임시트> 또는 <관리자 타임시트> 또는 <시간 타임시트>를 로드하는 경우. 경로 직원에 유의하십시오타임시트, 관리자위에는 타임시트 및 hr 타임시트가 예시용으로 표시되어 있으며 이러한 타임시트는 제거할 수 있습니다.

위의 각 구성 요소는 매우 가볍고 각 구성 요소가 하나의 작업만 처리합니다. 관리자가 수정을 위해 타임시트를 반환하는 등 추가해야 하는 모든 새 기능은 하나 이상의 새 상태 전환을 추가하여 처리할 수 있습니다. 이 워크플로우의 초기 구현은 여기에서 확인할 수 있습니다.

 

 

다음 단계

이러한 아이디어에 대해 더 많이 탐구하는 데 관심이 있는 독자는 여기에 제시된 아이디어를 확장하는 깃허브 프로젝트를 살펴볼 수 있습니다.

 

 

결론

상태 전이 접근법을 사용하여 기존 접근법보다 쉽게 확장할 수 있고 유지 관리가 가능한 Angular 코드를 생성할 수 있음을 보여줍니다.