بین‌المللی‌سازی
بین‌المللی‌سازی (Internationalization یا i18n) در انگولار به فرآیندی گفته می‌شود که با آن یک برنامه انگولار قادر می‌شود به چند زبان و قالب منطقه‌ای مختلف مانند تاریخ، عدد و واحد پولی واکنش نشان دهد. این ویژگی برای برنامه‌های مدرن وب و SPAs بسیار مهم است زیرا تجربه کاربری یکنواخت و بومی‌سازی شده را برای کاربران جهانی فراهم می‌کند. استفاده درست از بین‌المللی‌سازی باعث بهبود دسترسی، تجربه کاربری و نگهداری برنامه می‌شود.
در انگولار، بین‌المللی‌سازی به چند مفهوم کلیدی وابسته است. Components بلوک‌های UI قابل استفاده مجدد هستند که باید به صورت language-neutral طراحی شوند. State Management تضمین می‌کند که داده‌ها و زبان انتخاب شده در سراسر برنامه به صورت پایدار مدیریت شوند. Data Flow جریان اطلاعات را کنترل می‌کند تا از Prop Drilling و re-renders غیرضروری جلوگیری شود. Lifecycle Hooks مانند ngOnInit و ngOnChanges تعیین می‌کنند که وقتی زبان یا داده‌ها تغییر می‌کنند، component چگونه و چه زمانی به‌روزرسانی شود.
در این آموزش، شما یاد خواهید گرفت که چگونه Localeها را پیکربندی کنید، سوئیچینگ دینامیک بین زبان‌ها انجام دهید و components قابل استفاده مجدد و performant ایجاد کنید. همچنین با بهترین شیوه‌ها، مشکلات رایج و تکنیک‌های بهینه‌سازی انگولار برای بین‌المللی‌سازی آشنا خواهید شد.
مثال پایه
typescriptimport { Component } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeFa from '@angular/common/locales/fa';
import localeEn from '@angular/common/locales/en';
registerLocaleData(localeFa, 'fa');
registerLocaleData(localeEn, 'en');
@Component({
selector: 'app-international',
template: ` <div> <h1>{{ 'خوش آمدید به بین‌المللی‌سازی در انگولار' }}</h1> <p>{{ today | date: 'fullDate':undefined:currentLocale }}</p> <p>{{ amount | currency:'IRR':'symbol':undefined:currentLocale }}</p> <button (click)="switchLanguage('fa')">فارسی</button> <button (click)="switchLanguage('en')">English</button> </div>
`
})
export class InternationalComponent {
today = new Date();
amount = 12345.67;
currentLocale = 'fa';
switchLanguage(locale: string) {
this.currentLocale = locale;
}
}در این مثال پایه، مفاهیم کلیدی بین‌المللی‌سازی در انگولار نمایش داده شده‌اند. با استفاده از registerLocaleData، داده‌های Locale فارسی و انگلیسی ثبت می‌شوند تا Pipes مانند date و currency بتوانند قالب‌بندی مناسب را اعمال کنند. کامپوننت دارای یک state داخلی به نام currentLocale است که با استفاده از متد switchLanguage قابل تغییر است.
در template، Pipes برای فرمت کردن تاریخ و واحد پول بر اساس Locale انتخاب شده استفاده شده‌اند. دکمه‌ها تغییر currentLocale را فعال می‌کنند و UI بدون نیاز به reload به‌روز می‌شود. این الگو از prop drilling و re-renders غیرضروری جلوگیری می‌کند و مدیریت state و جریان داده‌ها را به صورت بهینه نشان می‌دهد. این مثال بهترین شیوه‌ها برای ایجاد components قابل استفاده مجدد و language-neutral را به توسعه‌دهندگان آموزش می‌دهد.
مثال کاربردی
typescriptimport { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-advanced-international',
template: ` <div> <h2>{{ 'TITLE' | translate }}</h2> <p>{{ today | date: 'fullDate':undefined:currentLocale }}</p> <p>{{ amount | currency:'IRR':'symbol':undefined:currentLocale }}</p> <select (change)="switchLanguage($event.target.value)"> <option value="fa">فارسی</option> <option value="en">English</option> <option value="fr">Français</option> </select> </div>
`
})
export class AdvancedInternationalComponent implements OnInit {
today = new Date();
amount = 98765.43;
currentLocale = 'fa';
constructor(private translate: TranslateService) {}
ngOnInit() {
this.translate.setDefaultLang('fa');
this.translate.use(this.currentLocale);
}
switchLanguage(locale: string) {
this.currentLocale = locale;
this.translate.use(locale);
}
}در این مثال پیشرفته، از @ngx-translate/core برای مدیریت دینامیک ترجمه‌ها استفاده شده است. در ngOnInit زبان پیش‌فرض تنظیم می‌شود و TranslateService برای بارگذاری زبان انتخاب شده به کار می‌رود. انتخاب زبان از طریق select element باعث به‌روزرسانی state و render فوری UI می‌شود.
Pipes برای فرمت تاریخ و واحد پول بر اساس currentLocale استفاده شده‌اند. Lifecycle hooks و سرویس متمرکز ترجمه از re-renders غیرضروری و prop drilling جلوگیری می‌کنند. این الگو برای SPAs پیچیده مناسب است و امکان ایجاد components قابل استفاده مجدد و با performance بالا را فراهم می‌کند.
بهترین شیوه‌ها در بین‌المللی‌سازی انگولار شامل مدیریت متمرکز ترجمه‌ها، استفاده از Pipes برای فرمت locale-specific و سوئیچینگ دینامیک زبان است. Components باید از prop drilling و mutation مستقیم state جلوگیری کنند.
اشتباهات رایج شامل hard-coded text، استفاده نادرست از lifecycle hooks و re-renders غیرضروری است. برای بهینه‌سازی performance، فایل‌های ترجمه باید lazy load شوند و استراتژی change detection OnPush استفاده شود. برای امنیت، محتوای ترجمه شده باید sanitize شود تا از XSS جلوگیری شود. استفاده صحیح از ngOnInit و ngOnChanges تضمین می‌کند که components به تغییرات زبان و داده‌ها به‌طور reliable پاسخ دهند.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| registerLocaleData | ثبت داده‌های locale برای استفاده در Pipes | registerLocaleData(localeFa, 'fa') |
| Pipes (date, currency) | فرمت تاریخ و واحد پول | {{ today |
| TranslateService | مدیریت دینامیک ترجمه‌ها | this.translate.use('en') |
| Component State | مدیریت state داخلی کامپوننت | currentLocale = 'fa' |
| Lifecycle Hooks | کنترل initialization و update کامپوننت | ngOnInit() { this.translate.setDefaultLang('fa'); } |
به طور خلاصه، بین‌المللی‌سازی در انگولار امکان ساخت برنامه‌های چندزبانه و scalable را فراهم می‌کند که تجربه کاربری عالی ارائه می‌دهند. با استفاده صحیح از Pipes، مدیریت state و سرویس‌های ترجمه، می‌توان components قابل استفاده مجدد و با performance بالا ایجاد کرد. در ادامه، می‌توانید به مطالعه مدیریت state پیشرفته با NgRx، استراتژی OnPush و integration با APIهای چندزبانه بپردازید. پروژه‌های تمرینی شامل داشبورد یا برنامه‌های تجارت الکترونیک چندزبانه هستند. منابع مفید شامل مستندات رسمی Angular، @ngx-translate/core و آموزش‌های Angular University می‌باشند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود