ساختن یک برنامه زاویه ای با Enum – راهنمای عملی

Summarize this content to 400 words in Persian Lang
بیایید یک برنامه Angular ساده ایجاد کنیم که نحوه استفاده از enums را برای مدیریت ثابت های مرتبط نشان می دهد. Enums یک ویژگی قدرتمند در TypeScript است که می تواند به شما در سازماندهی و نگهداری موثرتر پایگاه کد خود کمک کند. در این راهنما، روند ساخت یک برنامه Angular را که از enums برای مدیریت نقش‌ها و وضعیت‌های کاربر استفاده می‌کند، مرور می‌کنیم.

مرحله 1: برنامه Angular را تنظیم کنید

ابتدا یک اپلیکیشن Angular جدید ایجاد کنید. دستور زیر را اجرا کنید:

ng new user-management
cd user-management

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس اجزای مورد نیاز خود را تولید کنید:

ng generate component UserStatus
ng generate component UserRole

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: گزینه های جایگزین Enum را تعریف کنید

بیایید یک پوشه به نام ایجاد کنیم types تا همه ثابت ها و انواع خود را مرتب نگه داریم.

mkdir src/app/types

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوع اتحادیه (types/user-status.type.ts)

یک نوع اتحادیه برای نمایش وضعیت کاربر تعریف کنید:

export type UserStatusType = ‘Active’ | ‘Inactive’ | ‘Pending’;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شیء ثابت (types/status.constant.ts)

یک شی ثابت برای وضعیت های کاربر تعریف کنید:

export const STATUS = {
Active: ‘Active’,
Inactive: ‘Inactive’,
Pending: ‘Pending’
} as const;

export type StatusValues = typeof STATUS[keyof typeof STATUS];

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

فضای نام با مقادیر ثابت (types/role.namespace.ts)

یک فضای نام برای نقش های کاربر تعریف کنید:

export namespace Role {
export const Admin = ‘Admin’;
export const User = ‘User’;
export const Guest = ‘Guest’;
}

export type RoleType = typeof Role.Admin | typeof Role.User | typeof Role.Guest;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کلاس با ویژگی های استاتیک (types/role.class.ts)

یک کلاس برای نقش های کاربر با ویژگی های استاتیک تعریف کنید:

export class UserRole {
static readonly Admin = ‘Admin’;
static readonly User = ‘User’;
static readonly Guest = ‘Guest’;
}

export type UserRoleType = string;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوع نقشه برداری شده (types/status-values.ts)

از یک نوع نگاشت شده برای ایجاد پویا کلیدهای وضعیت استفاده کنید:

const StatusValues = {
Active: ‘Active’,
Inactive: ‘Inactive’,
Pending: ‘Pending’
} as const;

export type MappedStatusType = keyof typeof StatusValues;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: از گزینه های جایگزین در کامپوننت ها استفاده کنید

در هر مؤلفه، ما از روش‌های مختلفی برای مدیریت و نمایش نقش‌ها و وضعیت‌های کاربر استفاده می‌کنیم.

UserStatusComponent (با استفاده از Union Type و Constant Object)

در user-status.component.ts، موارد زیر را اضافه کنید:

import { Component } from ‘@angular/core’;
import { UserStatusType } from ‘../types/user-status.type’;
import { STATUS, StatusValues } from ‘../types/status.constant’;
import { FormsModule } from ‘@angular/forms’;

@Component({
selector: ‘app-user-status’,
standalone: true,
imports: [FormsModule],
templateUrl: ‘./user-status.component.html’,
styleUrl: ‘./user-status.component.scss’,
})
export class UserStatusComponent {
status: UserStatusType = ‘Active’;
statusValues = Object.values(STATUS);

setStatus(newStatus: StatusValues) {
this.status = newStatus;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در user-status.component.html:

Set User Status
[(ngModel)]=”status”>
@for (s of statusValues; track $index) {
[value]=”s”>{{ s }}
}

Current Status: {{ status }}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

UserRoleComponent (با استفاده از فضای نام و کلاس استاتیک)

در user-role.component.ts، موارد زیر را اضافه کنید:

import { Component } from ‘@angular/core’;
import { UserRoleType, UserRole } from ‘../types/role.class’;
import { RoleType, Role } from ‘../types/role.namespace’;
import { FormsModule } from ‘@angular/forms’;

@Component({
selector: ‘app-user-role’,
standalone: true,
imports: [FormsModule],
templateUrl: ‘./user-role.component.html’,
styleUrl: ‘./user-role.component.scss’,
})
export class UserRoleComponent {
role: RoleType = Role.User;
userRoles: UserRoleType[] = [UserRole.Admin, UserRole.User, UserRole.Guest];

setRole(newRole: RoleType) {
this.role = newRole;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در user-role.component.html:

Set User Role
[(ngModel)]=”role”>
@for (r of userRoles; track $index) {
[value]=”r”>{{ r }}
}

Current Role: {{ role }}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: نمایش در مؤلفه برنامه

در app.component.html، هر دو جزء را اضافه کنید:

User Management

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 5: برنامه را پیکربندی کنید

مطمئن شوید که اجزا را وارد کنید app.component.ts:

import { Component } from ‘@angular/core’;
import { UserRoleComponent } from ‘./user-role/user-role.component’;
import { UserStatusComponent } from ‘./user-status/user-status.component’;

@Component({
selector: ‘app-root’,
standalone: true,
imports: [UserRoleComponent, UserStatusComponent],
templateUrl: ‘./app.component.html’,
styleUrl: ‘./app.component.scss’,
})
export class AppComponent {
title = ‘user-management’;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در app.config.ts، پیکربندی لازم را ارائه دهید:

import { ApplicationConfig, provideZoneChangeDetection } from ‘@angular/core’;
import { provideRouter } from ‘@angular/router’;

import { routes } from ‘./app.routes’;

export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] };

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 6: برنامه را اجرا کنید

در نهایت اپلیکیشن Angular را اجرا کنید:

ng serve

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

در این مثال، ما یک برنامه Angular پایه ایجاد کردیم که نحوه استفاده از جایگزین‌های enums را برای مدیریت ثابت‌ها و انواع در TypeScript نشان می‌دهد. هر رویکرد مزایای منحصر به فردی دارد و درک نحوه استفاده از آنها می تواند به شما کمک کند کدهای تمیزتر، خواناتر و قابل نگهداری در Angular بنویسید. شما می توانید هر جایگزینی را بر اساس نیازهای پروژه و پیچیدگی ساختار داده خود انتخاب کنید.

با خیال راحت این مثال را گسترش دهید یا آن را سفارشی کنید تا مطابق با نیازهای شما باشد. Enum ها و جایگزین های آنها ابزارهای قدرتمندی در TypeScript هستند که می توانند به شما در مدیریت موثر ثابت های مرتبط کمک کنند.

کد نویسی مبارک! 🚀

کاوش در کد

برای بررسی جزئیات کد، از مخزن GitHub دیدن کنید.

ng new user-management
cd user-management

ng generate component UserStatus
ng generate component UserRole

mkdir src/app/types

export type UserStatusType = 'Active' | 'Inactive' | 'Pending';

export const STATUS = {
  Active: 'Active',
  Inactive: 'Inactive',
  Pending: 'Pending'
} as const;

export type StatusValues = typeof STATUS[keyof typeof STATUS];

export namespace Role {
  export const Admin = 'Admin';
  export const User = 'User';
  export const Guest = 'Guest';
}

export type RoleType = typeof Role.Admin | typeof Role.User | typeof Role.Guest;

export class UserRole {
  static readonly Admin = 'Admin';
  static readonly User = 'User';
  static readonly Guest = 'Guest';
}

export type UserRoleType = string;

const StatusValues = {
  Active: 'Active',
  Inactive: 'Inactive',
  Pending: 'Pending'
} as const;

export type MappedStatusType = keyof typeof StatusValues;

import { Component } from '@angular/core';
import { UserStatusType } from '../types/user-status.type';
import { STATUS, StatusValues } from '../types/status.constant';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-status',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './user-status.component.html',
  styleUrl: './user-status.component.scss',
})
export class UserStatusComponent {
  status: UserStatusType = 'Active';
  statusValues = Object.values(STATUS);

  setStatus(newStatus: StatusValues) {
    this.status = newStatus;
  }
}

Set User Status
 [(ngModel)]="status">
    @for (s of statusValues; track $index) {
     [value]="s">{{ s }}
    }

Current Status: {{ status }}

import { Component } from '@angular/core';
import { UserRoleType, UserRole } from '../types/role.class';
import { RoleType, Role } from '../types/role.namespace';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-role',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './user-role.component.html',
  styleUrl: './user-role.component.scss',
})
export class UserRoleComponent {
  role: RoleType = Role.User;
  userRoles: UserRoleType[] = [UserRole.Admin, UserRole.User, UserRole.Guest];

  setRole(newRole: RoleType) {
    this.role = newRole;
  }
}

Set User Role
 [(ngModel)]="role">
    @for (r of userRoles; track $index) {
     [value]="r">{{ r }}
    }

Current Role: {{ role }}

User Management

import { Component } from '@angular/core';
import { UserRoleComponent } from './user-role/user-role.component';
import { UserStatusComponent } from './user-status/user-status.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [UserRoleComponent, UserStatusComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'user-management';
}

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

ng serve