1. I18N و L10N في AngularJS
1. ما هي I18N و L10N؟
يعد التدويل ، الذي يشار إليه باسم I18N ، معيارًا لتطوير المنتجات بطريقة يمكنهم ببساطة توطين لغة المنتج وثقافته. التعريب ، المشار إليه باسم L10N ، هو معيار يمكّن التطبيقات والنصوص من التكيف مع الأسواق الثقافية أو اللغوية الخاصة. بالنسبة لمطوري التطبيقات ، فإن تدويل البرنامج يعني أن جميع الأوتار والمناطق الأخرى تحتاج إلى استخلاص من البرنامج حيث تكون أكثر خصوصية (مثل تنسيقات التاريخ والعملة). توطين البرنامج يعني توفير الترجمة وتنسيق توطين الكتل المستخرجة من I18N.
2. ما هي مستويات I18N و L10N مدعومة حاليًا بواسطة Angular؟
حاليًا ، يوفر Angular دعم I18N و L10N لمرشحات DateTime والرقم والعملة.
بالإضافة إلى ذلك ، يدعم Angular التوطين المتنوع من خلال التوجيه ngpluralize (http://docs.angularjs.org/api/ng.directive:ngpluralize).
تعتمد جميع عناصر التحكم القابلة للترجمة على مجموعة قواعد ميزات الإعداد المحلية التي تتم إدارتها من خلال خدمة $ locale.
للسماح للقراء بمشاهدة الأمثلة الفعلية ، قام المسؤول بإعداد بعض أمثلة صفحة الويب لإظهار كيفية استخدام المرشحات الزاوية لجمع المتغيرات من خلال قواعد المنطقة. يمكننا العثور على أمثلة مماثلة في GitHub (https://github.com/angular/angular.js/tree/master/i18n/e2e) أو في i18n/e2e في حزمة التطوير الزاوي.
3. ما هو الهوية الإقليمية؟
المنطقة هي منطقة جغرافية وسياسية وثقافية محددة. يتكون معرف اللغة الأكثر استخدامًا من جزأين: رمز اللغة ورمز البلد. على سبيل المثال ، تعد كل من en-us و en-au و zh-cn كلها معرفات محلية صالحة ، وكلها تحتوي على رموز اللغة ورموز البلد. لأن البلد الترميز المحدد في المعرف المحلي اختياري ، فإن المعرفات المحلية مثل EN و ZH و SK كلها صالحة. تحقق من موقع الويب ICU (http://userguide.icu-project.org/locale) ، حيث يوجد المزيد من المعلومات حول معرف اللغة.
4.
يفصل Angular مجموعة القواعد للأرقام وتنسيقات التاريخ والوقت في ملفات مختلفة ، لكل ملف منطقة فريدة. يمكننا العثور على قائمة المحطة المدعومة حاليًا هنا (https://github.com/angular/angular.js/tree/master/i18n/locale)
2. تخصيص قواعد اللغة في الزاوية
هناك طريقتان لتخصيص اللغة في الزاوية:
1. مجموعات القواعد المربعة قبل
يمكننا تنفيذ الملف المحلي المتوقع عن طريق توصيل الملف المحدد الخاص بـ Angular.js أو Angular.min.js.
على سبيل المثال ، في *nix ، يمكننا إنشاء ملف Angular.js يحتوي على قواعد التوطين الإقليمية الألمانية من خلال الأمر التالي:
Cat angular.js i18n/Angular-locale_de-ge.js> angular_de-ge.js
عندما يستخدم التطبيق البرنامج النصي angular_de-ge.js بدلاً من البرنامج النصي General Angular.js ، يبدأ Angular تلقائيًا قواعد توطين (تم تكوينه مسبقًا) في ألمانيا.
2. قم بتضمين نص JS النصي إلى صفحة index.html
يمكننا أيضًا تضمين ملفات JS في المنطقة المحددة في الصفحة. على سبيل المثال ، إذا كان العميل يتطلب ملفًا إقليميًا ألمانيًا ، فيمكننا تقديم صفحة مثل ما يلي:
<html ng-app> <head> ... <script src = "Angular.js"> </script> <script src = "i18n/Angular-locale_de-ge.js"> </script> ... </head> ... </html>
تتطلب كلتا الطريقتين المذكورة أعلاه تقديم صفحات index.html مختلفة أو ملفات JS في كل منطقة للتوطين. نحتاج أيضًا إلى تكوين الخادم الخاص بنا لتوفير الملفات المحلية الصحيحة والمطلوبة.
ومع ذلك ، ستكون الطريقة الثانية (بما في ذلك الملفات المحلية في الصفحة) أبطأ لأن برنامج نصي آخر مطلوب لتحميله. (-_- !!!).
3. فخ ("gotchas")
1. فخ رمز العملة
يتيح لنا مرشح العملة Angular استخدام رمز العملة الافتراضي من الخدمة المحلية ، ويمكننا أيضًا توفير رموز عملات مخصصة. إذا تم استخدام تطبيقنا فقط في مجال واحد ، فيمكننا الاعتماد على (تعيين) رمز العملة الافتراضي. ومع ذلك ، إذا توقعنا أن يستخدم المستخدمون في المناطق الأخرى تطبيقنا أيضًا ، فيجب علينا توفير رموز العملات المخصصة لدينا للتأكد من أن المستخدم يفهم القيمة الفعلية.
على سبيل المثال ، إذا كنا نريد ربط مرشح العملة لعرض رصيد الحساب البالغ 1000 يوان: {{1،000 | Currency}} ، ويستخدم تطبيقنا حاليًا لغة En-US ، ثم سيتم عرض "1،000.00 دولار". ومع ذلك ، إذا قام المستخدمون في بعض المناطق الأخرى (مثل الصين البر الرئيسي) بزيارة تطبيقنا ، فسيحدد متصفح المستخدم إعداد المنطقة إلى "الصين البر الرئيسي" ، وسيتم عرض الرصيد على أنه "1000.00" (خطأ حزين للغاية ، سعر الصرف ...).
في هذا المثال ، عندما نحتاج إلى تعيين الفلتر ، نحتاج إلى إعادة كتابة رمز العملة الافتراضي من خلال توفير رموز العملة كمعلمات لفلتر العملة (http://docs.angularjs.org/api/ng.filter:currency) ، المعلمة مثل: USD $. وبهذه الطريقة ، سوف يتجاهل Angular أي تغييرات في اللغة ويستمر في إظهار الرصيد على أنه "1000.00 دولار أمريكي".
2. فخ طول الترجمة
تذكر ، عند ترجمة السلاسل وتنسيقات الأحداث ، قد يختلف الطول بشكل كبير. على سبيل المثال ، "3 يونيو 1977" يصبح "3 de Junio de 1977" عند ترجمته إلى الإسبانية. بالطبع ، قد تكون هناك مواقف أكثر تطرفًا. لذلك ، عندما نتلألؤ بالتطبيق ، نحتاج إلى إعداد قواعد CSS المقابلة وإجراء اختبارات شاملة لضمان عدم انهيار مكونات واجهة المستخدم (المتغيرات).
3. المنطقة الزمنية
تذكر أن مرشح DateTime الخاص بـ Angular يستخدم المنطقة الزمنية التي يحددها المتصفح. لذلك ، سيعرض التطبيق نفسه معلومات زمنية مختلفة وفقًا لإعدادات المنطقة الزمنية للكمبيوتر التي تقوم بتشغيل التطبيق ، بدلاً من المنطقة الزمنية المحددة من قبل المطور في JavaScript أو Angular.