سوالات مصاحبه زاویه ای – انجمن DEV

ek3nk4r 2025-01-10

0 2 خواندن این مطلب 15 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

برای شخصی که 2 سال تجربه در Angular دارد، سوالات مصاحبه معمولاً از مفاهیم اولیه تا موضوعات سطح متوسط را شامل می شود. در اینجا یک لیست طبقه بندی شده از سوالات متداول وجود دارد:

فهرست مطالب

مفاهیم اساسی

Angular چیست و چه تفاوتی با AngularJS دارد؟
بلوک های سازنده Angular چیست؟
تفاوت بین اجزا و دستورالعمل ها را توضیح دهید.
داده binding چیست و انواع آن چیست؟
هدف از Angular CLI چیست؟ می توانید چند دستور CLI را نام ببرید؟
TypeScript چیست و چرا در Angular استفاده می شود؟

کامپوننت ها و قالب ها

یک جزء چیست؟ چگونه آن را ایجاد و استفاده می کنید؟
نقش را توضیح دهید @Input() و @Output() دکوراتورها
تفاوت بین فرم های قالب محور و فرم های واکنشی چیست؟
چگونه رویدادها را در قالب های Angular مدیریت می کنید؟
قلاب چرخه حیات چیست؟ می توانید نام ببرید و اهداف آنها را توضیح دهید؟
چگونه رندر شرطی را در قالب Angular پیاده سازی می کنید؟

بخشنامه ها

دستورالعمل های Angular چیست و چگونه طبقه بندی می شوند؟
تفاوت بین دستورالعمل های ساختاری و ویژگی ها چیست؟
چگونه یک دستورالعمل سفارشی ایجاد می کنید؟
هدف را توضیح دهید ngIf، ngFor، و ngClass.

خدمات و تزریق وابستگی

سرویس در انگولار چیست و چگونه می توان آن را ایجاد کرد؟
تزریق وابستگی چیست و Angular چگونه آن را پیاده سازی می کند؟
هدف از سرویس تک تن چیست؟
تفاوت بین را توضیح دهید providedIn: 'root' و ارائه خدمات در یک ماژول خاص.

مسیریابی

مسیریابی در Angular چگونه کار می کند؟
هدف از چیست RouterModule و Routes?
چگونه بارگذاری تنبل را در Angular پیاده سازی می کنید؟
حفاظ مسیر چیست و چه نوع محافظی موجود است؟
چگونه پارامترها را در مسیرهای Angular ارسال می کنید؟

فرم ها

تفاوت بین فرم های واکنشی و فرم های الگو محور چیست؟
چگونه اعتبار سنجی فرم را در Angular انجام می دهید؟
چگونه داده های فرم را به کامپوننت متصل می کنید؟

HTTP و Observables

چگونه درخواست های HTTP را در Angular انجام می دهید؟
هدف از چیست HttpClient ماژول؟
قابل مشاهده چیست و چگونه در Angular استفاده می شود؟
چه فرقی با هم دارند Promise و Observable?

ماژول های زاویه ای

هدف NgModules چیست؟
تفاوت بین ماژول های ویژگی و ماژول های اشتراکی را توضیح دهید.
چگونه یک برنامه Angular را در ماژول ها سازماندهی می کنید؟

عملکرد و بهینه سازی

مجموعه AOT (پیش از زمان) چیست و چرا مهم است؟
Angular چگونه لرزش درخت را کنترل می کند؟
چند راه برای بهینه سازی برنامه Angular چیست؟

متفرقه

لوله های زاویه ای چیست؟ چگونه یک لوله سفارشی ایجاد می کنید؟
تفاوت Angular در چیست؟ ngOnInit و سازنده؟
هدف انگولار چیست؟ zone.js?
رهگیرها چیست و چگونه در Angular استفاده می شود؟
نقش تشخیص تغییر در Angular را توضیح دهید.
چه نقشی دارد trackBy عملکرد در ngFor?

سناریوهای عملی

چگونه یک برنامه Angular را اشکال زدایی می کنید؟
چگونه با یک برنامه Angular با بارگذاری آهسته برخورد می کنید؟
پروژه ای که روی آن کار کرده اید و نقش خود در تیم را شرح دهید.
چگونه کنترل نسخه را در پروژه های Angular مدیریت می کنید؟

آیا می خواهید برای هر یک از این موضوعات یادداشت های کوتاه یا مثال هایی ایجاد کنم؟

در اینجا پاسخ های جامعی به تمام سوالات مصاحبه انگولار که فهرست کرده اید، به تفکیک موضوع ارائه شده است:

مفاهیم اساسی

Angular چیست و چه تفاوتی با AngularJS دارد؟
- Angular یک فریم ورک فرانت‌اند مبتنی بر TypeScript برای ساخت اپلیکیشن‌های تک صفحه‌ای پویا است. AngularJS (v1.x) مبتنی بر جاوا اسکریپت است و از معماری اتصال دو طرفه استفاده می کند. Angular با کامپایل Ahead-of-Time (AOT)، معماری مبتنی بر کامپوننت و تزریق وابستگی عملکرد بهبود یافته ای را ارائه می دهد.
بلوک های سازنده Angular چیست؟
- بلوک های اصلی ساختمان Angular عبارتند از:
  - ماژول ها (به عنوان مثال، NgModules)
  - اجزاء
  - قالب ها
  - بخشنامه ها
  - خدمات
  - تزریق وابستگی
  - لوله ها
  - مسیریابی
تفاوت بین اجزا و دستورالعمل ها را توضیح دهید.
- اجزاء نماها را کنترل می کنند، دارای قالب و سبک هستند و بلوک های اصلی سازنده UI هستند.
- بخشنامه ها رفتار یا ظاهر عناصر DOM را تغییر دهید.
  - دستورالعمل های ساختاری: تغییر ساختار DOM (به عنوان مثال، *ngIf، *ngFor).
  - دستورالعمل های ویژگی: تغییر ظاهر یا رفتار یک عنصر (به عنوان مثال، ngClass، ngStyle).
داده binding چیست و انواع آن چیست؟
- پیوندهای اتصال داده رابط کاربری و منطق برنامه. انواع:
  - درون یابی: {{data}} (یک طرفه از کامپوننت به نمای).
  - صحافی اموال: [property]="expression" (یک طرفه).
  - صحافی رویداد: (event)="handler()" (یک طرفه از نمای به جزء).
  - صحافی دو طرفه: [(ngModel)]="property" (دو طرفه).
هدف از Angular CLI چیست؟ می توانید چند دستور CLI را نام ببرید؟
- CLI ایجاد، آزمایش و استقرار برنامه را خودکار می کند. دستورات رایج:
  - ng new : یک برنامه Angular جدید ایجاد می کند.
  - ng serve: برنامه را به صورت محلی اجرا می کند.
  - ng generate : اجزا یا خدمات را تولید می کند.
  - ng build: پروژه را برای استقرار می سازد.
  - ng test: تست های واحد را اجرا می کند.
TypeScript چیست و چرا در Angular استفاده می شود؟
- TypeScript ابر مجموعه ای از جاوا اسکریپت است که تایپ استاتیک را اضافه می کند. Angular از TypeScript برای ابزار بهتر، قابلیت نگهداری و تشخیص زودهنگام خطا استفاده می کند.

کامپوننت ها و قالب ها

یک جزء چیست؟ چگونه آن را ایجاد و استفاده می کنید؟
- یک کامپوننت بلوک اصلی ساختمان رابط کاربری Angular است. با الگو و منطق خود بخشی از UI را کنترل می کند.
  - ایجاد کنید: ng generate component
  - استفاده: انتخابگر را اضافه کنید (به عنوان مثال، ) در HTML.
نقش را توضیح دهید @Input() و @Output() دکوراتورها
- @Input(): داده ها را از والد به مؤلفه فرزند منتقل کنید.
- @Output(): با استفاده از وقایع از یک کودک به والدین ارسال کنید EventEmitter.
تفاوت بین فرم های قالب محور و فرم های واکنشی چیست؟
- فرم های الگو محور: تعریف فرم ها در قالب HTML. برای فرم های کوچک ساده تر است.
- فرم های واکنشی: با استفاده از فرم ها را در کلاس کامپوننت تعریف کنید FormGroup و FormControl; برای فرم های پویا و پیچیده بهتر است.
چگونه رویدادها را در قالب های Angular مدیریت می کنید؟
- از نحو اتصال رویداد استفاده کنید: (event)="handlerFunction()". مثال:
قلاب چرخه حیات چیست؟ می توانید نام ببرید و اهداف آنها را توضیح دهید؟
- قلاب‌های چرخه حیات به توسعه‌دهندگان اجازه می‌دهند تا از رویدادهای مؤلفه بهره ببرند. مثال ها:
  - ngOnInit(): پس از مقداردهی اولیه کامپوننت اجرا می شود.
  - ngOnChanges(): زمانی اجرا می شود که ویژگی های ورودی تغییر کند.
  - ngOnDestroy(): درست قبل از از بین رفتن کامپوننت اجرا می شود.
چگونه رندر شرطی را در قالب Angular پیاده سازی می کنید؟
```
  *ngIf="condition">Content
```

بخشنامه ها

دستورالعمل های Angular چیست و چگونه طبقه بندی می شوند؟
- دستورالعمل ها دستورالعمل هایی برای دستکاری DOM هستند.
  - دستورالعمل های ساختاری: تغییر ساختار DOM (به عنوان مثال، *ngIf، *ngFor).
  - دستورالعمل های ویژگی: تغییر رفتار یا ظاهر عنصر (به عنوان مثال، ngStyle، ngClass).
تفاوت بین دستورالعمل های ساختاری و ویژگی ها چیست؟
- ساختاری: چیدمان DOM را تغییر دهید (به عنوان مثال، افزودن/حذف عناصر).
- صفت: ظاهر یا رفتار یک عنصر را تغییر دهید.

چگونه یک دستورالعمل سفارشی ایجاد می کنید؟

استفاده کنید @Directive دکوراتور مثال:

 @Directive({
   selector: '[appHighlight]'
 })
 export class HighlightDirective {
   constructor(el: ElementRef) {
     el.nativeElement.style.backgroundColor = 'yellow';
   }
 }

هدف را توضیح دهید ngIf، ngFor، و ngClass.
- ngIf: به صورت مشروط عناصر را اضافه/حذف می کند.
- ngFor: روی یک لیست تکرار می شود.
- ngClass: کلاس ها را به صورت پویا اعمال می کند.

خدمات و تزریق وابستگی

سرویس در انگولار چیست و چگونه می توان آن را ایجاد کرد؟
- یک سرویس حاوی منطق تجاری قابل استفاده مجدد است. آن را با استفاده از CLI ایجاد کنید:
```
 ng generate service serviceName
```
تزریق وابستگی چیست و Angular چگونه آن را پیاده سازی می کند؟
- DI یک الگوی طراحی است که در آن وابستگی ها به یک کلاس ارائه می شود نه اینکه توسط آن ایجاد شود. Angular DI را با استفاده از سلسله مراتب انژکتور پیاده سازی می کند.
هدف از سرویس تک تن چیست؟
- یک سرویس singleton تضمین می کند که یک نمونه از سرویس در سراسر برنامه به اشتراک گذاشته می شود.
تفاوت بین را توضیح دهید providedIn: 'root' و ارائه خدمات در یک ماژول خاص.
- providedIn: 'root': سرویس را در سراسر برنامه در دسترس قرار می دهد.
- ارائه در یک ماژول: در دسترس بودن را به آن ماژول محدود می کند.

مسیریابی در Angular

مسیریابی در Angular چگونه کار می کند؟
- مسیریابی زاویه ای امکان پیمایش بین نماها (کامپوننت ها) در یک برنامه تک صفحه ای (SPA) را فراهم می کند.
- این روتر به تغییرات URL گوش می دهد و با استفاده از پیکربندی مسیر آنها را به یک جزء خاص نگاشت می کند.
- مثال:
```
 const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: 'about', component: AboutComponent },
   { path: '', redirectTo: 'home', pathMatch: 'full' }
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}
```

هدف از چیست RouterModule و Routes?
- RouterModule: ارائه خدمات و دستورالعمل های لازم برای مسیریابی (مثلاً، ، routerLink).
- مسیرها: نگاشت مسیرهای URL به اجزا را تعریف می کند. آرایه ای از اشیا است که در آن هر شی یک مسیر را نشان می دهد.

مثال:

   const routes: Routes = [
     { path: 'dashboard', component: DashboardComponent },
     { path: 'profile', component: ProfileComponent }
   ];

چگونه بارگذاری تنبل را در Angular پیاده سازی می کنید؟
- بارهای بارگذاری تنبل، ماژول‌ها را تنها زمانی که به مسیر مرتبط آنها دسترسی داشته باشید، نشان می‌دهند که اندازه اولیه بسته را کاهش می‌دهد.
- مراحل:
  1. یک ماژول ویژگی ایجاد کنید (به عنوان مثال، AdminModule).
  2. مسیرها را در ماژول ویژگی تعریف کنید.
  3. استفاده کنید loadChildren ویژگی در مسیرهای برنامه برای اشاره به ماژول ویژگی.

مثال:

   const routes: Routes = [
     { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
   ];

در AdminModule:

   const adminRoutes: Routes = [
     { path: '', component: AdminDashboardComponent }
   ];
   @NgModule({
     imports: [RouterModule.forChild(adminRoutes)],
     exports: [RouterModule]
   })
   export class AdminRoutingModule {}

حفاظ مسیر چیست و چه نوع محافظی موجود است؟
- نگهبانان مسیر کنترل ناوبری به و از مسیرها بر اساس شرایط.
- انواع محافظ:
  - CanActivate: تعیین می کند که آیا یک مسیر می تواند فعال شود.
  - CanActivateChild: تعیین می کند که آیا مسیرهای فرزند می توانند فعال شوند یا خیر.
  - CanDeactivate: تعیین می کند که آیا کاربر می تواند یک مسیر را ترک کند یا خیر.
  - حل کند: قبل از فعال شدن مسیر، داده ها را از قبل واکشی می کند.
  - CanLoad: تعیین می کند که آیا یک ماژول می تواند لود شود یا خیر.

مثال از CanActivate:

   @Injectable({
     providedIn: 'root'
   })
   export class AuthGuard implements CanActivate {
     canActivate(): boolean {
       return isAuthenticated(); // Custom logic
     }
   }

اعمال گارد در مسیرها:

   const routes: Routes = [
     { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
   ];

چگونه پارامترها را در مسیرهای Angular ارسال می کنید؟
- پارامترهای مسیر:
  - یک مسیر را با یک پارامتر تعریف کنید:
```
   const routes: Routes = [
     { path: 'profile/:id', component: ProfileComponent }
   ];
```

 - Access the parameter in the component:

   ```typescript
   constructor(private route: ActivatedRoute) {}
   ngOnInit() {
     this.route.params.subscribe(params => {
       console.log(params['id']);
     });
   }
   ```

فرم ها

تفاوت بین فرم های واکنشی و فرم های الگو محور چیست؟
- فرم های واکنشی:
  - به صورت برنامه ریزی شده در کامپوننت با استفاده از FormGroup و FormControl.
  - مقیاس پذیرتر و آزمایش پذیرتر.
  - ایده آل برای فرم های پویا.
- فرم های الگو محور:
  - در قالب با استفاده از دستورالعمل هایی مانند تعریف شده است ngModel.
  - ساده تر، ایده آل برای فرم های کوچک.
چگونه اعتبار سنجی فرم را در Angular انجام می دهید؟
- فرم های واکنشی: اعتباردهنده ها را به صورت برنامه نویسی اضافه کنید:
```
 this.myForm = new FormGroup({
   name: new FormControl('', [Validators.required, Validators.minLength(3)])
 });
```

چگونه داده های فرم را به کامپوننت متصل می کنید؟
- فرم های واکنشی: استفاده کنید FormGroup و FormControl اتصالات
- فرم های الگو محور: استفاده کنید [(ngModel)]="property" برای اتصال دو طرفه

HTTP و Observables

چگونه درخواست های HTTP را در Angular انجام می دهید؟
- استفاده کنید HttpClient ماژول:
```
 this.http.get('api/url').subscribe(data => console.log(data));
```
هدف ماژول HttpClient چیست؟
- درخواست‌های HTTP را ساده می‌کند و کارهایی مانند سرصفحه‌های درخواست، پاسخ‌ها و رسیدگی به خطا را انجام می‌دهد. همچنین از موارد مشاهده پذیر نیز پشتیبانی می کند.
قابل مشاهده چیست و چگونه در Angular استفاده می شود؟
- قابل مشاهده ها جریان هایی از داده ها هستند که می توانند مقادیر متعددی را در طول زمان منتشر کنند. Angular از قابل مشاهده‌ها برای عملیات ناهمزمان مانند تماس‌های HTTP و مدیریت رویداد استفاده می‌کند.
تفاوت بین Promise و Observable چیست؟
- قول بده: یک مقدار منتشر می کند و قابل لغو نیست.
- قابل مشاهده: چندین مقدار را منتشر می کند، قابل لغو است و از اپراتورهایی مانند پشتیبانی می کند map و filter.

ماژول های زاویه ای

هدف NgModules چیست؟
- NgModules اجزاء، دستورالعمل ها، لوله ها و خدمات را در بلوک های منسجمی برای سازماندهی و مدولار کردن یک برنامه Angular گروه بندی می کند.
تفاوت بین ماژول های ویژگی و ماژول های اشتراکی را توضیح دهید.
- ماژول های ویژگی: شامل مؤلفه ها، خدمات و دستورالعمل های خاص یک ویژگی است.
- ماژول های مشترک: حاوی اجزای قابل استفاده مجدد، لوله‌ها و دستورالعمل‌هایی است که باید به ماژول‌های دیگر وارد شوند.
چگونه یک برنامه Angular را در ماژول ها سازماندهی می کنید؟
- ماژول‌های ویژگی را برای عملکردهای فردی، یک ماژول مشترک برای کد قابل استفاده مجدد و ماژول‌های اصلی برای خدمات singleton ایجاد کنید.

عملکرد و بهینه سازی

مجموعه AOT (پیش از زمان) چیست و چرا مهم است؟
- AOT Angular HTML و TypeScript را در زمان ساخت به جاوا اسکریپت کامپایل می‌کند و باعث کاهش سربار زمان اجرا و بهبود عملکرد می‌شود.
Angular چگونه لرزش درخت را کنترل می کند؟
- تکان دادن درخت، ماژول ها و کدهای استفاده نشده را در طول فرآیند ساخت حذف می کند و اندازه باندل را کاهش می دهد.
چند راه برای بهینه سازی برنامه Angular چیست؟
- از بارگذاری تنبل برای مسیرها استفاده کنید.
- به حداقل رساندن تشخیص تغییر با OnPush.
- پیوندهای قالب را بهینه کنید.
- کامپایل AOT را فعال کنید.
- از کتابخانه های سبک استفاده کنید.

متفرقه

لوله های زاویه ای چیست؟ چگونه یک لوله سفارشی ایجاد می کنید؟
- لوله ها داده ها را در قالب ها تغییر می دهند. یک لوله سفارشی ایجاد کنید:
```
 @Pipe({ name: 'customPipe' })
 export class CustomPipe implements PipeTransform {
   transform(value: string): string {
     return value.toUpperCase();
   }
 }
```
تفاوت Angular در چیست؟ ngOnInit و سازنده؟
- سازنده: برای تزریق وابستگی استفاده می شود.
- با OnInit: پس از مقداردهی اولیه جزء اجرا می شود، ایده آل برای منطق اولیه.
هدف Angular's zone.js چیست؟
- zone.js کارهای ناهمزمان را رهگیری و ردیابی می کند و امکان تشخیص تغییرات Angular را فراهم می کند.

رهگیرها چیست و چگونه در Angular استفاده می شود؟

رهگیرها درخواست ها و پاسخ های HTTP را برای کارهایی مانند افزودن سرصفحه یا رسیدگی به خطاها رهگیری می کنند.

 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler) {
     const authReq = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
     return next.handle(authReq);
   }
 }

نقش تشخیص تغییر در Angular را توضیح دهید.
- هر زمان که داده ها در مؤلفه تغییر کنند، تشخیص تغییر، DOM را به روز می کند. استراتژی ها:
  - پیش فرض: کل درخت جزء را بررسی می کند.
  - OnPush: فقط زمانی بررسی می کند که ویژگی های ورودی تغییر کند.
چه نقشی دارد trackBy عملکرد در ngFor?
- با ردیابی موارد با استفاده از یک شناسه منحصر به فرد، رندر را بهینه می کند. از به روز رسانی های غیر ضروری DOM جلوگیری می کند.

سناریوهای عملی

چگونه یک برنامه Angular را اشکال زدایی می کنید؟
- از ابزارهای توسعه دهنده مرورگر، Angular DevTools و console.log().
- اشکال زدایی تماس های HTTP با ابزارهای شبکه.
- خطاهای کنسول را بررسی کنید و ردپای پشته را بررسی کنید.
چگونه با یک برنامه Angular با بارگذاری آهسته برخورد می کنید؟
- اجرای بارگذاری تنبل و کامپایل AOT.
- بهینه سازی اتصالات و استفاده از OnPush استراتژی تشخیص تغییر
- محاسبات سنگین در قالب ها را به حداقل برسانید.
پروژه ای که روی آن کار کرده اید و نقش خود در تیم را شرح دهید.
- شرح مختصری از یک پروژه تهیه کنید، نقش خود را در پیاده سازی ویژگی ها، حل مشکلات یا بهینه سازی عملکرد برجسته کنید.
چگونه کنترل نسخه را در پروژه های Angular مدیریت می کنید؟
- برای کنترل نسخه از Git استفاده کنید. اقداماتی مانند شاخه‌بندی، انجام تغییرات با پیام‌های معنادار و استفاده از درخواست‌های کشش برای بررسی کد را دنبال کنید.

بیایید روی مفاهیم پیشرفته و سناریوهای دنیای واقعی تمرکز کنیم:

معماری و بهترین روش ها

چگونه یک معماری کاربردی Angular مقیاس پذیر طراحی می کنید؟
- پاسخ دهید:
  - از یک معماری مدولار با ماژول های ویژگی برای عملکرد خاص استفاده کنید.
  - یک ماژول مشترک برای قطعات و لوله های قابل استفاده مجدد پیاده سازی کنید.
  - از یک ماژول اصلی برای خدمات سینگلتون استفاده کنید.
  - برای بهینه سازی برنامه های در مقیاس بزرگ، بارگذاری تنبل را اعمال کنید.
  - از اصول SOLID برای طراحی قطعات و خدمات پیروی کنید.

مدیریت حالت را در برنامه های Angular چگونه مدیریت می کنید؟
- پاسخ دهید:
  - از کتابخانه‌هایی مانند NgRx، Akita یا خدماتی با BehaviorSubjects استفاده کنید.
  - NgRx را برای برنامه های پیچیده با ویژگی هایی مانند انتخابگرها، افکت ها و کاهنده ها پیاده سازی کنید.
  - استفاده کنید OnPush تغییر استراتژی تشخیص عملکرد
  - با استفاده از کتابخانه هایی مانند، تغییر ناپذیری را تضمین کنید immer یا تکنیک های جاوا اسکریپت ساده

چگونه از استانداردهای کدنویسی سازگار در یک پروژه تیمی اطمینان حاصل می کنید؟
- پاسخ دهید:
  - استفاده کنید راهنمای سبک زاویه ای برای ساختار سازگار
  - قوانین لینتینگ را با ESLint یا TSLint.
  - پیاده سازی کنید زیباتر برای قالب بندی کد
  - قلاب‌های پیش‌متعهد را با هاسکی برای اجرای لینترها و تست های واحد.
  - مرورهای منظم کد را انجام دهید و برنامه نویسی جفتی را تشویق کنید.

بهینه سازی عملکرد

چگونه عملکرد یک برنامه Angular را بهینه کنید؟
- پاسخ دهید:
  - فعال کردن پیش از زمان (AOT) کامپایل برای رندر سریعتر
  - استفاده کنید بارگذاری تنبل و استراتژی های پیش بارگذاری برای ماژول ها
  - پیوندهای قالب را بهینه کنید و تماشاگران را به حداقل برسانید ChangeDetectionStrategy.OnPush.
  - از دستکاری های بزرگ DOM خودداری کنید و از Angular استفاده کنید trackBy در ngFor بخشنامه ها
  - کش درخواست های HTTP با اپراتورهای RxJS مانند shareReplay.

از چه ابزارها و تکنیک هایی برای اشکال زدایی برنامه های Angular استفاده می کنید؟
- پاسخ دهید:
  - استفاده کنید فال یا Angular DevTools برای اشکال زدایی درخت مؤلفه
  - اشکال زدایی تماس های HTTP با تب شبکه DevTools مرورگر.
  - اضافه کنید console.log یا آنگولار DebugElement برای بررسی زمان اجرا
  - از تکنیک های اشکال زدایی RxJS با tap یا کتابخانه هایی مانند جاسوس RxJS.
  - نظارت بر عملکرد با استفاده از ابزارهایی مانند فانوس دریایی یا آنالایزر بسته نرم افزاری Webpack.

موضوعات پیشرفته

چگونه Angular تزریق وابستگی را در سطح عمیق‌تری مدیریت می‌کند؟
- پاسخ دهید:
  - Angular از یک سیستم تزریق وابستگی سلسله مراتبی استفاده می کند.
  - ارائه دهندگان اعلام شده در AppModule در سراسر برنامه به اشتراک گذاشته می شوند.
  - ارائه دهندگان در ماژول های تنبل بارگذاری شده نمونه های خود را ایجاد کنند.
  - توکن‌های چند ارائه‌دهنده مقادیر متعددی را برای یک توکن تزریقی یکسان اجازه می‌دهند.
  - استفاده کنید @Inject برای حل توکن ها و @Optional() برای وابستگی های اختیاری

نقش Angular Compiler در بهینه سازی عملکرد را توضیح دهید.
- پاسخ دهید:
  - کامپایلر Angular قالب ها و کامپوننت ها را در طول فرآیند ساخت با استفاده از AOT پیش کامپایل می کند.
  - خطاهای زمان اجرا را کاهش می دهد و با تشخیص زودهنگام مشکلات، امنیت را بهبود می بخشد.
  - کد جاوا اسکریپت بهینه سازی شده را تولید می کند و تکان دادن درخت را قادر می سازد تا کدهای استفاده نشده را حذف کند.

تفاوت Zone.js و Angular's Change Detection چیست؟
- پاسخ دهید:
  - Zone.js: عملیات ناهمزمان (مانند تماس‌های HTTP، رویدادها) را برای فعال کردن تشخیص تغییر ردیابی می‌کند.
  - تشخیص تغییر: DOM را بر اساس تغییرات در وضعیت برنامه به روز می کند.
  - استفاده کنید ChangeDetectorRef برای تنظیم دقیق یا فعال کردن دستی تشخیص تغییر.

تست کردن

چگونه از تست قوی برای برنامه های Angular بزرگ اطمینان حاصل می کنید؟
- پاسخ دهید:
  - بنویسید تست های واحد استفاده از Jasmine و Karma برای قطعات، خدمات و لوله ها.
  - بنویسید تست های ادغام با استفاده از Angular Testing Utilities مانند TestBed.
  - استفاده کنید انتها به انتها (E2E) تست با نقاله یا سرو
  - وابستگی ها را با استفاده از کتابخانه هایی مانند است یا ابزارهای آزمایشی Angular.
  - پوشش کد بالا را حفظ کنید و آزمایش را در خطوط لوله CI/CD یکپارچه کنید.

از چه استراتژی هایی برای تمسخر درخواست های HTTP در تست های Angular استفاده می کنید؟

چالش های دنیای واقعی

چگونه امنیت برنامه را در Angular مدیریت می کنید؟
- پاسخ دهید:
  - ورودی های کاربر را با Angular's پاکسازی کنید DomSanitizer.
  - با استفاده از پیوندهای قالب Angular از اسکریپت های متقابل سایت (XSS) اجتناب کنید ({{}}) و اجتناب از دستکاری مستقیم DOM.
  - از Angular داخلی استفاده کنید حفاظت CSRF.
  - تماس‌های HTTP را با HTTPS ایمن کنید و نشانه‌های احراز هویت را به هدرها اضافه کنید.

چگونه ارتقاء نسخه را در پروژه های بزرگ Angular مدیریت می کنید؟
- پاسخ دهید:
  - استفاده کنید راهنمای به روز رسانی زاویه ای برای یک برنامه ارتقای گام به گام
  - Angular CLI و وابستگی ها را به صورت تدریجی ارتقا دهید.
  - تست های واحد و تست های e2e را پس از هر ارتقاء اجرا کنید.
  - Refactor API ها را به تدریج منسوخ کرد.

چگونه تغییر ویژگی ها را در برنامه های Angular مدیریت می کنید؟
- پاسخ دهید:
  - از فایل‌های پیکربندی یا سرویس‌ها برای جابجایی پویا ویژگی‌ها استفاده کنید.
  - اهرم فروشگاه NgRx یا مدیریت حالت سفارشی برای تغییر ویژگی.
  - پنهان کردن یا نمایش عناصر UI بر اساس پرچم های تغییر ویژگی.

اقدامات در سطح سازمانی

معماری micro-frontend چیست و چگونه Angular می تواند آن را پیاده سازی کند؟
- پاسخ دهید:
  - Micro-frontend ها برنامه های بزرگ را به ماژول های کوچکتر و مستقل تقسیم می کنند.
  - از فریم ورک هایی مانند فدراسیون ماژول در Webpack برای بارگذاری پویا ماژول های Angular.
  - با استفاده از سرویس‌ها یا کتابخانه‌های اشتراک‌گذاری شده، از ارتباط بین فرواندهای خرد اطمینان حاصل کنید.

چگونه فرم های بزرگ مقیاس را با اعتبارسنجی پویا در Angular مدیریت می کنید؟
- پاسخ دهید:
  - استفاده کنید فرم های واکنشی برای اعتبارسنجی پویا
  - با استفاده از یک شی پیکربندی، کنترل های فرم پویا را بسازید.
  - اعتبار سنجی ورودی ها با استفاده از اعتبارسنجی های سفارشی
  - اهرم FormArray برای مدیریت مجموعه های پویا از کنترل های فرم.

این سوالات بر کاربردهای دنیای واقعی، مفاهیم پیشرفته و بهترین شیوه هایی که از یک توسعه دهنده ارشد Angular انتظار می رود، تاکید دارند. اگر می‌خواهید مثال‌های بیشتر یا بررسی عمیق‌تری در هر موضوعی داشته باشید، به من اطلاع دهید!

ek3nk4r 2025-01-10

0 2 خواندن این مطلب 15 دقیقه زمان میبرد