200 سوال مصاحبه انگولار ! بزرگترین لیست سوالات مصاحبه Angular !
اگه برنامه نویس فِرانت اِند هستی و Angular کار میکنی، قطعا میدونی که آشنایی عمیق نسبت به سوالات مصاحبه Angular میتونه تو استخدامی ها برات حسابی امتیاز مثبت داشته باشه! وقتی می‌خوای برای مصاحبه شغلی آماده بشی، یه لیست از سوال های پرتکرار میتونه معجزه کنه، چون میتونی به خوبی با سوالاتی که منتظرت هستن آشنا بشی.
اما چرا سوالات مصاحبه اینقدر مهمن؟ مصاحبه های فنی تو حوزه برنامه نویسی فقط درباره دانش تئوری نیستن. مصاحبه گر می‌خواد ببینه که چطور میتونی مفاهیم پیچیده Angular رو در عمل توضیح بدی و چقدر آماده ای که تو تیم و پروژشون کار رو به بهترین شکل انجام بدی. این سوالات میتونن بهت کمک کنن ضعف هات رو بشناسی و تسلطت رو بالا ببری. از طرف دیگه، اگه بدونی معمولاً چه سوالاتی پرسیده میشه، استرست هم کمتر میشه و میتونی تو مصاحبه بهتر عمل کنی.
خب دیگه وقت رو هدر نریم و بریم سراغ سوالات مصاحبه انگولار 🙂
بخش اول سوالات مصاحبه Angular !
Angular یک فریمورک قدرتمند جاوااسکریپتی هست که توسط گوگل توسعه داده شده و برای ساخت اپلیکیشن‌های وب تک صفحه‌ای (SPA) استفاده میشه. دلیل اصلی استفاده از Angular اینه که توسعه دهنده‌ها با استفاده از امکانات اون مثل Data Binding و Dependency Injection میتونن اپلیکیشن های تعاملی و مقیاس پذیر ایجاد کنن.
AngularJS نسخه قدیمی تر فریمورکه و با معماری مبتنی بر MVC کار میکنه. Angular (نسخه‌های 2 به بعد) یه بازنویسی کامله و از TypeScript به جای JavaScript استفاده میکنه و معماری مبتنی بر کامپوننت‌ها رو ارائه میده، که باعث کارایی و انعطاف پذیری بیشتر میشه.
معماری Angular شامل چند بخش مهمه:
- کامپوننت‌ها (Components): بخش‌های اصلی رابط کاربری.
- ماژول‌ها (Modules): ساختاردهی و سازمان دهی اپلیکیشن.
- سرویس‌ها (Services): مدیریت داده ها و منطق تجاری.
- دایرکتیوها (Directives): اضافه کردن رفتار به عناصر HTML. این معماری کمک میکنه کد مرتب تر و قابل نگهداری تر باشه.
Angular از دو نوع Data Binding پشتیبانی میکنه:
- یک طرفه (One-way Data Binding): داده ها فقط از کامپوننت به view یا برعکس حرکت میکنن.
- دو طرفه (Two-way Data Binding): داده ها بین کامپوننت و view به صورت خودکار همگام سازی میشن. این ویژگی باعث میشه تغییرات توی view یا مدل به طور همزمان بازتاب پیدا کنه.
- Decorators برای تزئین یا مشخص کردن رفتار کلاس ها، متغیرها یا توابع توی Angular استفاده میشن. مثلاً
@Componentیه Decorator برای ساخت کامپوننت هاست. - Directives عناصر HTML رو گسترش میدن و رفتاری خاص به اون ها اضافه میکنن. مثلاً
*ngIfیه دایرکتیوه که شرطی بودن نمایش عنصر رو کنترل میکنه.
ماژول توی Angular یه مجموعه از کامپوننت ها، دایرکتیو ها، سرویس ها و سایر بخش‌هاست که برای سازمان دهی کد استفاده میشه. هر اپلیکیشن Angular حداقل یه ماژول به اسم AppModule داره. استفاده از ماژول ها باعث میشه کد به بخش‌های کوچیکتر و قابل مدیریت تر تقسیم بشه و استفاده مجدد از بخش‌ها راحت تر بشه.
کامپوننت ها قلب اپلیکیشن های Angular هستن و از سه بخش اصلی تشکیل میشن:
- HTML Template: مشخص کننده ظاهر رابط کاربری.
- CSS Styles: استایل دهی به عناصر.
- TypeScript Class: منطق رفتاری کامپوننت. کامپوننت ها به ما اجازه میدن بخش‌های مختلف رابط کاربری رو به صورت مستقل توسعه بدیم.
ngIf: یه دایرکتیوه که عنصر رو بر اساس یه شرط نمایش یا پنهان میکنه. مثلاً:<div *ngIf="isVisible">...</div>.ngSwitch: یه دایرکتیوه که شبیه به شرط های switch توی برنامه نویسی عمل میکنه و به ما اجازه میده عناصر مختلف رو بر اساس مقادیر مختلف نمایش بدیم.
سرویس‌ها کلاس‌هایی هستن که منطق تجاری و عملیات مشترک بین کامپوننت ها رو مدیریت میکنن، مثل فراخوانی API ها یا مدیریت داده ها. استفاده از سرویس ها باعث میشه کد کامپوننت ها تمیزتر بشه و منطق به صورت قابل استفاده مجدد پیاده سازی بشه.
Dependency Injection (DI) یه الگوی طراحی نرم‌افزاریه که Angular ازش برای مدیریت وابستگی ها استفاده میکنه. به جای این که کلاس‌ها خودشون وابستگی‌ها رو ایجاد کنن، Angular این وابستگی ها رو به کلاس‌ها تزریق میکنه. این باعث میشه تست کردن و مدیریت وابستگی ها راحت تر بشه.
بخش دوم سوالات مصاحبه Angular !
constructor: یه تابعیه که هنگام ایجاد یه نمونه از کلاس فراخوانی میشه و بیشتر برای تزریق وابستگی ها استفاده میشه.ngOnInit: یه متد lifecycle توی Angular هست که بعد از ایجاد کامپوننت و مقداردهی متغیرها اجرا میشه. برای کدی که باید بعد از آماده شدن کامپوننت اجرا بشه،ngOnInitاستفاده میشه و کاربرد داره.
Pipe ها توی Angular برای تغییر فرمت یا تبدیل داده ها توی قالب ها استفاده میشن. مثلاً | date برای فرمت کردن تاریخ یا | uppercase برای بزرگ کردن حروف. ما میتونیم Pipe های سفارشی هم بسازیم تا نیازهای خاصی رو پوشش بدیم.
- Template-Driven Forms: برای فرم‌های ساده و با استفاده از HTML ساخته میشن. اعتبارسنجی و کنترل فرم بیشتر به کمک دایرکتیوهای Angular انجام میشه.
- Reactive Forms: بیشتر برای فرم‌های پیچیده و با استفاده از کلاس‌های Angular ساخته میشن. به برنامه‌نویس ها کنترل بیشتری روی فرم‌ها و اعتبارسنجی ها میده و به طور کامل در TypeScript مدیریت میشه.
TypeScript یه زبان برنامه نویسی است که امکانات پیشرفته ای مثل تایپ دهی ایستا و ابزارهای بهتر برای کدنویسی ارائه میده. استفاده از TypeScript توی Angular باعث میشه کدها قابل پیش بینی تر و قابل نگهداری تر باشن. همچنین به ما کمک میکنه ارورها رو قبل از اجرای کد پیدا کنیم.
RxJS یه کتابخونه برای مدیریت عملیات غیرهمزمان با استفاده از Observables هست. توی Angular برای مدیریت درخواست های HTTP و رویدادهای استریم از RxJS استفاده میشه. امکاناتی مثل map، filter و switchMap رو برای کار با داده‌های استریم ارائه میده.
- Observable: میتونه چندین مقدار رو در طول زمان بازگردونه و قابل لغو کردنه. میتونه عملیات غیر همزمان یا رویدادهای استریم رو مدیریت کنه.
- Promise: فقط یه مقدار رو باز می‌گردونه و قابل لغو نیست. وقتی یه Promise تکمیل یا رد بشه، نتیجه یا خطا رو برمیگردونه.
برای ساخت یه Pipe سفارشی:
- یه کلاس TypeScript ایجاد کن.
- از Decorator
@Pipeاستفاده کن و یه نام برای Pipe تعیین کن. - متد
transformرو تعریف کن که ورودی رو پردازش و خروجی رو برمیگردونه. مثال:
import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({ name: ‘reverse’ })
export class ReversePipe implements PipeTransform {
transform(value: string): string {
return value.split(”).reverse().join(”);
}
}
Lifecycle Hooks متدهایی هستن که Angular در مراحل مختلف زندگی کامپوننت فراخوانی میکنه. بعضی از این متدها:
- ngOnInit: بعد از مقداردهی کامپوننت اجرا میشه.
- ngOnChanges: وقتی یه مقدار ورودی (Input) تغییر کنه، اجرا میشه.
- ngOnDestroy: قبل از نابودی کامپوننت اجرا میشه، معمولاً برای پاک سازی استفاده میشه.
Angular CLI یه ابزار خط فرمانه که به توسعه دهنده ها کمک میکنه تا به راحتی پروژه‌های Angular رو ایجاد، مدیریت و بهینه کنن. با استفاده از دستورات CLI میتونیم کامپوننت ها، سرویس‌ها، ماژول ها و موارد دیگه رو سریعاً بسازیم، پروژه رو build کنیم و تست ها رو اجرا کنیم.
با استفاده از Angular CLI میتونیم به راحتی یه کامپوننت بسازیم. فقط کافیه دستور زیر رو توی ترمینال اجرا کنیم:
ng generate component component-name
این دستور یه کامپوننت جدید به همراه فایل‌های TypeScript، HTML، CSS و Spec (برای تست) ایجاد میکنه.
بخش سوم سوالات مصاحبه Angular !
ng-contentیه دایرکتیوه که برای درج محتوای پویا توی کامپوننت ها استفاده میشه. این ویژگی به ما کمک میکنه محتوایی که توی تگ کامپوننت قرار میگیره، بصورت دینامیک در قسمت های مختلف کامپوننت نمایش داده بشه. این قابلیت برای ساخت کامپوننت های قابل استفاده مجدد خیلی مفیده.
Change Detection سیستمیه که Angular استفاده میکنه تا تشخیص بده داده ها یا مدل ها تغییر کرده و نیاز به بروزرسانی DOM هست یا نه. Angular از Zone.js برای کنترل تغییرات و اجرای دوباره change detection در هنگام وقوع رویدادها استفاده میکنه، و به این ترتیب رابط کاربری همیشه بروز می‌مونه.
@Input: برای دریافت داده ها از کامپوننت والد به کامپوننت فرزند استفاده میشه. داده ها میتونن از والد به فرزند پاس داده بشن.@Output: برای ارسال رویداد ها از کامپوننت فرزند به والد به کار میره. با استفاده ازEventEmitterمیتونیم رویدادها رو به والد اطلاع بدیم.
Router توی Angular یه سیستم مسیریابیه که به ما اجازه میده مسیرهای مختلفی برای اپلیکیشن تک صفحه‌ای خودمون تعریف کنیم. از این طریق، کاربران میتونن بین بخش های مختلف اپلیکیشن جابجا بشن بدون اینکه صفحه دوباره بارگذاری بشه. RouterModule و RouterLink از ابزارهای اصلی برای مدیریت مسیریابی هستن.
ActivatedRoute یه سرویسه که اطلاعات مربوط به مسیر فعال رو فراهم میکنه. با استفاده از ActivatedRoute میتونیم پارامترهای مسیر، query parameters و اطلاعات اضافی مربوط به مسیر رو توی کامپوننت ها به دست بیاریم. این برای مسیریابی پویا خیلی مفیده.
Lazy Loading یه تکنیک بهینه سازی برای بارگذاری ماژول ها به صورت پویاست. این باعث میشه فقط وقتی ماژولی مورد نیاز هست بارگذاری بشه، نه همه‌ی ماژول ها در ابتدای بارگذاری اپلیکیشن. این کار به بهبود سرعت لود اولیه کمک میکنه. برای پیاده سازی Lazy Loading از loadChildren توی تنظیمات مسیرها استفاده میکنیم.
forRoot(): برای تعریف مسیرهای اصلی (root) توی اپلیکیشن استفاده میشه و فقط یه بار در کل برنامه باید استفاده بشه.forChild(): برای تعریف مسیرهای فرعی یا ماژول های lazy-loaded استفاده میشه. این برای تقسیم بندی مسیرها و سازمان دهی بهتر اپلیکیشن مفیده.
ViewChild: برای دسترسی به عناصر یا کامپوننت های داخلی (از داخل template کامپوننت فعلی) استفاده میشه.ContentChild: برای دسترسی به محتوایی که از کامپوننت والد به این کامپوننت فرستاده شده، استفاده میشه. این بیشتر برای محتوایی به کار میره که باng-contentوارد شده.
HttpClient سرویسی توی Angularه که برای ارتباط با سرور و انجام درخواست‌های HTTP (GET، POST، PUT، DELETE و غیره) استفاده میشه. این سرویس امکاناتی مثل ارسال هدرهای HTTP، مدیریت خطا و کار با observables رو برای ارتباطات API فراهم میکنه. برای استفاده از HttpClient باید ماژول HttpClientModule رو وارد کنیم.
برای مدیریت خطاهای HTTP از متد catchError توی RxJS استفاده میکنیم. catchError به ما این امکان رو میده که به خطاها رسیدگی کنیم و رفتار مناسب رو پیاده‌سازی کنیم. به عنوان مثال:
بخش چهارم سوالات مصاحبه Angular !
Interceptorها به ما اجازه میدن تا درخواست های HTTP و پاسخ‌های سرور رو قبل از رسیدن به هدفشون تغییر بدیم یا پردازش کنیم. برای ساخت یه Interceptor، یه سرویس ایجاد میکنیم و از HttpInterceptor پیاده سازی میکنیم. کاربردهای رایج شامل اضافه کردن توکن های احراز هویت یا لاگ کردن درخواست هاست.
Angular Universal یه فریمورک برای رندر کردن سمت سرور (SSR) توی Angular هست. این ویژگی به اپلیکیشن کمک میکنه تا سریع تر بارگذاری بشه و بهبود سئو داشته باشه، چون محتوای اپلیکیشن توی سرور رندر و به مرورگر ارسال میشه. این برای اپلیکیشن های عمومی که نیاز به بهینه سازی SEO دارن خیلی مفیده.
Zone.js یه کتابخانه جاوااسکریپتیه که Angular ازش برای مدیریت و کنترل تغییرات و اجرای Change Detection استفاده میکنه. به زبان ساده، Zone.js محیط اجرایی کد رو دنبال میکنه و هر زمان که تغییری اتفاق بیفته، به Angular اطلاع میده تا رابط کاربری رو بروزرسانی کنه.
ساختار پیشفرض پروژه Angular شامل پوشه ها و فایل‌های زیره:
- src: شامل کدهای اصلی اپلیکیشن.
- app: شامل کامپوننت‌ها، ماژول‌ها و سرویس‌ها.
- assets: برای ذخیره منابع استاتیک مثل تصاویر.
- environments: برای مدیریت تنظیمات محیط‌های مختلف (تولید و توسعه). این ساختار به پروژه نظم میده و نگهداری کد رو آسون تر میکنه.
Guards ابزارهایی هستن که به ما اجازه میدن دسترسی به مسیرهای خاصی رو محدود کنیم. بعضی از انواع Guards:
- CanActivate: تعیین میکنه آیا میشه به یه مسیر خاص دسترسی پیدا کرد یا نه.
- CanDeactivate: تعیین میکنه آیا میشه از یه کامپوننت خارج شد یا نه. برای استفاده از Guards، باید یه سرویس پیاده سازی کنیم و اون رو توی مسیرها مشخص کنیم.
ngClass: برای اضافه کردن یا حذف کلاس‌های CSS به یه عنصر استفاده میشه. مثلاً:
Ivy موتور رندر پیشفرض توی Angular هست که از نسخه 9 به بعد معرفی شد. Ivy باعث میشه اندازه بسته های تولیدی (build) کوچیک تر و زمان کامپایل سریع تر بشه. همچنین ویژگی های جدیدی مثل tree-shaking بهتر و تشخیص خطای بهتر رو ارائه میده.
برای بهینه سازی عملکرد اپلیکیشن Angular میتونیم از موارد زیر استفاده کنیم:
- استفاده از Lazy Loading برای بارگذاری ماژول ها فقط زمانی که نیاز هست.
- استفاده از Change Detection Strategy: OnPush برای کاهش تعداد اجرای Change Detection.
- بهینه‌سازی اندازه تصاویر و فایل‌های استاتیک.
- فشرده‌سازی و Minify کردن کد با ابزارهای build.
وقتی از Observableها توی کامپوننت استفاده میکنیم، باید به موقع از اون ها Unsubscribe کنیم تا از مشکلات حافظه جلوگیری بشه. این کار رو میتونیم توی متد ngOnDestroy انجام بدیم:
import { Subscription } from ‘rxjs’;
export class MyComponent implements OnDestroy {
private subscription: Subscription;
ngOnInit() {
this.subscription = this.myService.getData().subscribe(data => {
// عملیات
});
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
Renderer2 یه سرویس توی Angular هست که برای دستکاری امن DOM استفاده میشه. به جای تغییر مستقیم DOM با جاوااسکریپت، از Renderer2 استفاده میکنیم تا سازگاری بیشتری با پلتفرم های مختلف و امنیت بیشتر داشته باشیم، مثل جلوگیری از حملات XSS. مثلاً:
بخش پنجم سوالات مصاحبه Angular !
ViewEncapsulationروش کنترل محدوده استایل‌های CSS برای کامپوننت‌ها در Angular رو مشخص میکنه. سه حالت اصلی داره:- Emulated (پیشفرض): استایل ها به صورت محلی برای کامپوننت اعمال میشن، اما در نهایت توسط Angular به عناصر خاص مرتبط میشن.
- None: استایل‌ها به صورت جهانی و بدون محدودیت اعمال میشن و میتونن تمام عناصر اپلیکیشن رو تحت تأثیر قرار بدن.
- ShadowDom: از قابلیت Shadow DOM مرورگر استفاده میکنه و استایل ها رو به صورت محلی و جدا از بقیه DOM اعمال میکنه.
- Pure Pipe: فقط زمانی اجرا میشه که مقدار یا مرجع ورودی تغییر کنه. این نوع Pipe برای بهینه سازی عملکرد مناسب تره و پیش‌فرضه.
- Impure Pipe: هر بار که Angular تغییراتی توی Change Detection پیدا کنه اجرا میشه، حتی اگه مقدار ورودی تغییر نکرده باشه. این نوع Pipe کمتر بهینه است و فقط در شرایط خاص استفاده میشه.
برای ایجاد یه Pipe غیرخالص، باید pure: false رو توی Decorator @Pipe مشخص کنیم:
@Pipe({
name: ‘impurePipe’,
pure: false
})
export class ImpurePipe {
transform(value: any): any {
// منطق تبدیل داده
}
}
Preloading Strategy توی Angular برای بارگذاری ماژول های Lazy-Loaded در پس زمینه استفاده میشه. دو استراتژی پیش فرض:
- PreloadAllModules: همه ماژول های Lazy-Loaded رو در پس زمینه بارگذاری میکنه.
- NoPreloading: هیچ ماژولی رو بارگذاری نمیکنه. برای استفاده، باید این استراتژی رو توی
RouterModuleپیکربندی کنیم:
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules });
Angular Elements به ما این امکان رو میده که کامپوننت های Angular رو به عنوان عناصر وب سفارشی (Custom Elements) بسته بندی کنیم و اون ها رو توی پروژه های غیر Angular هم استفاده کنیم. این ویژگی برای ادغام تدریجی Angular توی پروژه های قدیمی یا چند فریمورکی خیلی مفیده.
برای ایجاد یه ماژول Feature:
- از Angular CLI استفاده کن:
ng generate module feature-name. - کامپوننت ها، سرویس ها و سایر قسمت های مربوط به این ماژول رو تعریف کن.
- ماژول رو به عنوان lazy-loaded یا به صورت فرزند توی
AppModuleوارد کن.
برای اضافه کردن استایل های سراسری:
- فایل
styles.cssیاstyles.scssرو توی پوشهsrcویرایش کن. - میتونی کتابخانه های استایل مثل Bootstrap رو هم توی این فایل import کنی یا توی فایل
angular.jsonاضافه کنی.
Router Outlet یه دایرکتیوه که Angular برای مشخص کردن جایی که کامپوننت های مسیریابی باید نمایش داده بشن استفاده میکنه . این مثل یه placeholder عمل میکنه و کامپوننت ها رو براساس مسیر فعال نشون میده:
<router-outlet></router-outlet>
ActivatedRoute.snapshot: یه نسخه فوری از اطلاعات مسیر رو برمیگردونه و فقط یک بار مقداردهی میشه.ActivatedRoute.params: یه Observable از پارامترهای مسیر رو برمیگردونه که میتونه بروزرسانی بشه و برای گوش دادن به تغییرات مفیده.
تست کردن متدهای خصوصی توصیه نمیشه، چون میتونه باعث بشه کد سخت تر نگهداری بشه. اما اگر ضروری بود، میتونی از روش‌های Reflection یا تغییر دسترسی متد استفاده کنی. به عنوان مثال:
بخش ششم سوالات مصاحبه Angular !
ngOnChangesیکی از Lifecycle Hook های Angular هست که هر وقت یه تغییر توی مقادیر ورودی (Input properties) کامپوننت اتفاق بیفته اجرا میشه. این متد بیشتر برای نظارت بر تغییرات مقادیر و اجرای کدی خاص بر اساس این تغییرات استفاده میشه.
Renderer2 به ما کمک میکنه تا دستکاری ایمن DOM رو انجام بدیم، بخصوص برای جلوگیری از مشکلات امنیتی مثل XSS. مثال:
Async Pipe یه Pipe داخلی توی Angular هست که برای ساده کردن کار با Observableها یا Promiseها توی template استفاده میشه. این Pipe به صورت خودکار مشترک میشه و بروزرسانی های داده ها رو مدیریت میکنه. به این ترتیب نیازی به Unsubscribe کردن دستی نیست. مثال:
برای ایجاد یه Custom Validator:
- یه تابع بنویس که مقدار کنترل رو بگیره و یه خطا یا null برگردونه.
- تابع رو توی کنترل فرم استفاده کن. مثال:
Dependency Injection باعث میشه وابستگی های خارجی (مثل سرویس‌ها) به صورت پویا به کلاس ها تزریق بشن. این طراحی به راحتی mock کردن و جایگزین کردن وابستگی‌ها توی تست های واحد (Unit Test) کمک میکنه. به این ترتیب میتونیم کلاس ها رو بصورت مستقل و بدون وابستگی های واقعی تست کنیم.
ng-template یه ابزار توی Angular هست که برای تعریف محتوای قابل جایگزینی و استفاده دوباره استفاده میشه. این محتوا تا زمانی که به صورت صریح فراخوانی نشه، رندر نمیشه. مثال:
برای فراخوانی یه فایل JSON:
- از
HttpClientاستفاده کن و فایل JSON رو توی پوشهassetsقرار بده. - درخواست رو ارسال کن:
this.httpClient.get(‘/assets/data.json’).subscribe(data => {
console.log(data);
});
برای این کار باید HttpClientModule رو توی AppModule وارد کرده باشی.
برای استفاده از Angular توی یه پروژه باید موارد زیر رو در نظر بگیری:
- Node.js و npm: باید نصب باشن.
- دانش TypeScript: چون Angular با TypeScript نوشته شده.
- دانش HTML و CSS: برای طراحی و استایل دهی.
- همچنین باید درک مناسبی از مفاهیم SPA (تک‌صفحه‌ای) داشته باشی.
برای استفاده از چندین Routing Guard توی یه مسیر، اون ها رو به صورت آرایه تعریف میکنیم. مثلاً:
Content Projection اجازه میده محتوایی که از بیرون یه کامپوننت ارسال میشه رو داخل اون کامپوننت نمایش بدیم. برای این کار از ng-content استفاده میکنیم. مثال:
بخش هفتم سوالات مصاحبه Angular !
@HostListener یه Decorator توی Angular هست که به ما اجازه میده رویداد های DOM رو از داخل یه کامپوننت مدیریت کنیم. این ابزار به ما امکان میده به راحتی به رویداد های کاربر (مثل کلیک یا تغییر اندازه) گوش بدیم. مثال:
@HostListener(‘window:resize’, [‘$event’])
onResize(event: Event) {
console.log(‘Window resized:’, event);
}
اینجا onResize هر بار که اندازه پنجره تغییر کنه اجرا میشه.
برای ساخت یه Directive سفارشی:
- از Angular CLI استفاده کن:
ng generate directive directive-name. - منطق Directive رو پیاده‌سازی کن. مثال ساده برای تغییر رنگ متن:
@Directive({
selector: ‘[appHighlight]’
})
export class HighlightDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.style.color = ‘blue’;
}
}
حالا میتونی از این دایرکتیو توی HTML استفاده کنی: <p appHighlight>Text with blue color</p>.
Tree Shaking یه فرآیند بهینه سازیه که قسمت های استفاده نشده از کد رو حذف میکنه. این باعث میشه اندازه نهایی باندل (build) کاهش پیدا کنه. Angular از این ویژگی به صورت پیش فرض توی فرآیند build استفاده میکنه تا فقط کدهایی که واقعاً مورد نیاز هستن باقی بمونن.
ng-container: یه عنصر مجازی که توی DOM رندر نمیشه و برای گروه بندی محتوای بدون تگ اضافی استفاده میشه.ng-template: برای تعریف یه بلوک محتوای قابل استفاده دوباره که رندر نمیشه مگر اینکه صریحاً فراخوانی بشه.
<ng-container *ngIf=”condition”>
<p>This content is conditionally rendered</p>
</ng-container>
RendererFactory2 یه ابزار پیشرفته تر توی Angular هست که برای ساخت نمونه های Renderer2 استفاده میشه. این برای کنترل سفارشی دستکاری های DOM در محیط های مختلف مثل Server-Side Rendering (SSR) مفیده. مثال:
constructor(private rendererFactory: RendererFactory2) {
this.renderer = this.rendererFactory.createRenderer(null, null);
}
AOT کامپایلریه که کد Angular رو قبل از اجرای مرورگر به جاوااسکریپت ساده تبدیل میکنه. این کار باعث میشه اپلیکیشن سریع تر لود بشه و از بسیاری از خطاهای زمان اجرا جلوگیری میکنه. AOT به صورت پیشفرض توی فرآیند build فعال میشه و کارایی و امنیت رو بهبود میده.
- AOT: کد Angular رو در زمان ساخت (build time) کامپایل میکنه. این روش اپلیکیشن سریع تری رو فراهم میکنه، اما فرآیند build طولانی تر میشه.
- JIT: کد رو در زمان اجرا (runtime) کامپایل میکنه. برای توسعه سریع تر خوبه، اما میتونه سرعت لود اپلیکیشن رو کاهش بده.
برای چند زبانه کردن اپیکیشن انگولار :
- از
@angular/localizeاستفاده کن. - متون رو توی قالب ها مشخص کن و با تگ‌های i18n علامت گذاری کن.
- فایل‌های ترجمه رو ایجاد کن.
- از Angular CLI برای build کردن نسخه های محلی مختلف استفاده کن. مثال:
برای تست E2E از ابزار هایی مثل Protractor استفاده میشه. Protractor یه ابزار تست E2E برای Angular هست که با WebDriverJS و Selenium کار میکنه. میتونیم تست ها رو با استفاده از Angular CLI اجرا کنیم:
ngx-translate یه کتابخونه معروف برای مدیریت ترجمه و چند زبانه بودن توی اپلیکیشن‌های Angular هست. برای استفاده:
- کتابخونه رو نصب کن:
npm install @ngx-translate/core @ngx-translate/http-loader. - تنظیمات مربوطه رو توی
AppModuleانجام بده. - فایل‌های ترجمه رو ایجاد کن و از
TranslateServiceاستفاده کن. مثال:
بخش هشتم سوالات مصاحبه Angular !
ngFor یه دایرکتیوه که برای تکرار عناصر بر اساس یه آرایه استفاده میشه. سینتکس پایه:
برای ایجاد یه Reactive Form:
- ماژول
ReactiveFormsModuleرو تویAppModuleوارد کن. - یه فرم توی کامپوننت تعریف کن:
import { FormGroup, FormControl } from ‘@angular/forms’;
this.myForm = new FormGroup({
name: new FormControl(”),
email: new FormControl(”)
});
- از این فرم توی HTML استفاده کن:
Event Binding به ما امکان میده رویداد های کاربر مثل کلیک رو مدیریت کنیم. سینتکس پایه:
ngClass به ما اجازه میده کلاس های CSS رو بر اساس شرایط پویا اعمال کنیم:
ngStyle برای تنظیم استایل های داخلی به صورت پویا استفاده میشه:
برای ایجاد یه متغیر local template reference، از علامت # استفاده میکنیم:
برای گوش دادن به تغییرات توی فرم:
ngOnDestroy یه Lifecycle Hook توی Angular هست که برای پاک سازی منابع یا Unsubscribe کردن از Observableها استفاده میشه:
TrackBy یه تابعیه که به Angular کمک میکنه بهتر تغییرات رو توی لیست مدیریت کنه و کارایی رو افزایش بده. این به Angular میگه که چطور آیتم‌های منحصربفرد رو پیگیری کنه:
ngSwitch به ما اجازه میده چندین حالت مختلف رو مدیریت کنیم:
چند نکته قبل شروع مصاحبه فنی انگولار
حالا که به انتهای لیست جامع 200 سوال مصاحبه Angular رسیدیم، وقتشه درباره چند نکته عمومی و مهم صحبت کنیم که میتونه موفقیت شما رو توی مصاحبه های فنی تضمین کنه.
این نکات شاید در نگاه اول ساده به نظر برسن، ولی اجرای درستشون واقعاً تاثیرگذاره.
۱. تمرین، تمرین، تمرین!
یادت باشه فقط خوندن سوالات کافی نیست. باید روی کدنویسی عملی تمرکز کنی و از مفاهیم Angular تو پروژه های واقعی یا تمرین های کوچک استفاده کنی.
همین کار بهت کمک میکنه تا مطمئن بشی که میتونی به سوالات عملی و سناریو های مختلف پاسخ بدی. علاوه بر این، اگه موقع مصاحبه خواستن کد بنویسی، دستت راحت تر و سریع تر عمل میکنه.
۲. آماده باش تا توضیح بدی، نه فقط جواب بدی.
مصاحبه‌گرها علاقه دارن ببینن که چقدر خوب میتونی چیزی که بلدی رو توضیح بدی. این نشون میده که نه‌تنها Angular رو خوب یاد گرفتی، بلکه توانایی این رو داری که توی تیم و پروژه به خوبی همکاری کنی.
برای همین، بهتره هر مفهوم رو به زبان ساده توضیح بدی و اگر لازمه، از مثال‌های واقعی استفاده کنی.
۳. با اعتماد به نفس باش، حتی اگه همه چیز رو نمیدونی.
این نکته خیلی مهمه: هیچ‌کس همه چیز رو نمیدونه، حتی مصاحبه‌گرها. اگه به سوالی برخوردی که پاسخش رو نمیدونی، با صداقت بگو که نمیدونی، ولی علاقه‌مندی که بیشتر دربارش یاد بگیری.
چیزی که مهمه، نحوه برخورد و واکنش تو در موقعیت‌های ناشناخته است. این نشون میده که اهل یادگیری و رشد هستی.
۴. نرم افزار ها و تکنولوژی های مکمل رو بشناس.
علاوه بر Angular، دونستن چیزایی مثل TypeScript، RxJS و ابزارهای مختلفی که با Angular کار میکنن، میتونه امتیاز بزرگی برات باشه. این آشنایی‌های جانبی، سطح توانایی هات رو بالاتر میبره و نشون میده که یه برنامه نویس حرفه ای و همه فن حریف هستی.
در پایان، امیدوارم که این لیست سوالات مصاحبه انگولار برات مفید واقع شده باشه و بهترین موقعیت های شغلی نصیبت بشه 🙂
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سوالات بسار کامل و عالی بودن. مرسی از سایت خوبتون
سلام علی جان خیلی خوشحالم که مفید بودن برات 🙂
موفق باشی