1. I18N และ L10N ใน AngularJS
1. I18N และ L10N คืออะไร?
การทำให้เป็นสากลเรียกว่า I18N เป็นมาตรฐานสำหรับการพัฒนาผลิตภัณฑ์ในแบบที่พวกเขาสามารถ จำกัด ภาษาและวัฒนธรรมของผลิตภัณฑ์ได้ การแปลที่เรียกว่า L10N เป็นมาตรฐานที่ช่วยให้แอปพลิเคชันและข้อความสามารถปรับให้เข้ากับตลาดวัฒนธรรมหรือภาษาพิเศษ สำหรับนักพัฒนาแอปพลิเคชันการทำให้เป็นสากลโปรแกรมหมายถึงสตริงและพื้นที่อื่น ๆ ทั้งหมดจะต้องสกัดจากโปรแกรมที่พวกเขามีความพิเศษมากขึ้น (เช่นวันที่และรูปแบบสกุลเงิน) การแปลโปรแกรมหมายถึงการให้การแปลและรูปแบบการแปลของบล็อกที่แยกจาก I18N
2. ปัจจุบันมีระดับ I18N และ L10N ระดับใดบ้างที่ได้รับการสนับสนุนจาก Angular?
ปัจจุบัน Angular ให้การสนับสนุน I18N และ L10N สำหรับตัวกรอง DateTime จำนวนและตัวกรองสกุลเงิน
นอกจากนี้ Angular ยังสนับสนุนการแปลที่หลากหลายผ่าน Ngpluralize Directive (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 เป็นรหัสสถานที่ที่ถูกต้องทั้งหมดทั้งหมดที่มีรหัสภาษาและรหัสประเทศ เนื่องจากการเข้ารหัสประเทศที่ระบุไว้ใน ID locale เป็นตัวเลือกรหัสสถานที่เช่น EN, ZH และ SK จึงถูกต้องทั้งหมด ตรวจสอบเว็บไซต์ ICU (http://userguide.icu-project.org/locale) ซึ่งมีข้อมูลเพิ่มเติมเกี่ยวกับรหัสสถานที่
4. สถานที่ที่รองรับเชิงมุม
Angular แยกชุดของกฎสำหรับตัวเลขวันที่และเวลาในไฟล์ต่าง ๆ แต่ละไฟล์มีพื้นที่ที่ไม่ซ้ำกัน เราสามารถค้นหารายการสถานที่ที่รองรับในปัจจุบันได้ที่นี่ (https://github.com/angular/angular.js/tree/master/i18n/locale)
2. ปรับแต่งกฎสถานที่ในเชิงมุม
มีสองวิธีในการปรับแต่งสถานที่ใน Angular:
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 แทนสคริปต์ Angular.js ทั่วไป Angular เริ่มต้นการกำหนดค่าล่วงหน้าโดยอัตโนมัติ (กำหนดค่าล่วงหน้า) กฎการแปลในประเทศเยอรมนี
2. รวมสคริปต์ locale js ไปที่ index.html หน้าหน้า
นอกจากนี้เรายังสามารถรวมไฟล์ JS ในพื้นที่ที่ระบุไว้ในหน้า ตัวอย่างเช่นหากลูกค้าต้องการไฟล์ภูมิภาคเยอรมันเราสามารถจัดเตรียมหน้าดังต่อไปนี้:
<html ng-app> <head> ... <script src = "angular.js"> </script> <script src = "i18n/angular-locale_de-ge.js"> </script> ... </head> ... </html>
ทั้งสองวิธีข้างต้นกำหนดให้เราต้องจัดทำดัชนีที่แตกต่างกันหน้า html หรือไฟล์ JS ในแต่ละภูมิภาคเพื่อการแปล นอกจากนี้เรายังต้องกำหนดค่าเซิร์ฟเวอร์ของเราเพื่อให้ไฟล์สถานที่ที่ถูกต้องและต้องการ
อย่างไรก็ตามวิธีที่สอง (รวมถึงไฟล์ locale ลงในหน้า) จะช้าลงเนื่องจากต้องมีสคริปต์อีกหนึ่งตัวในการโหลด -
3. กับดัก ("gotchas")
1. กับดักสัญลักษณ์สกุลเงิน
ตัวกรองสกุลเงินของ Angular ช่วยให้เราสามารถใช้สัญลักษณ์สกุลเงินเริ่มต้นจากบริการสถานที่และเรายังสามารถให้สัญลักษณ์สกุลเงินที่กำหนดเองได้ หากแอพของเราใช้ในภูมิภาคเดียวเท่านั้นเราสามารถพึ่งพา (ตั้งค่า) สัญลักษณ์สกุลเงินเริ่มต้น อย่างไรก็ตามหากเราคาดหวังว่าผู้ใช้ในภูมิภาคอื่น ๆ จะใช้แอพของเราด้วยเราควรให้สัญลักษณ์สกุลเงินที่กำหนดเองของเราเพื่อให้แน่ใจว่าผู้ใช้เข้าใจมูลค่าจริง
ตัวอย่างเช่นหากเราต้องการผูกตัวกรองสกุลเงินเพื่อแสดงยอดคงเหลือบัญชีของ RMB 1,000: {{1,000 | Currency}} และแอปพลิเคชันของเรากำลังใช้สถานที่ตั้งของ US US จากนั้น "$ 1,000.00" จะปรากฏขึ้น อย่างไรก็ตามหากผู้ใช้ในภูมิภาคอื่น ๆ (เช่นจีนแผ่นดินใหญ่) เยี่ยมชมแอพของเราเบราว์เซอร์ของผู้ใช้จะระบุการตั้งค่าภูมิภาคเป็น "จีนแผ่นดินใหญ่" และยอดคงเหลือจะแสดงเป็น "￥ 1,000.00" (ข้อผิดพลาดที่น่าเศร้าอัตราแลกเปลี่ยน ... )
ในตัวอย่างนี้เมื่อเราต้องการตั้งค่าตัวกรองเราจำเป็นต้องเขียนสัญลักษณ์สกุลเงินเริ่มต้นใหม่โดยการให้สัญลักษณ์สกุลเงินเป็นพารามิเตอร์ไปยังตัวกรองสกุลเงิน (http://docs.angularjs.org/api/ng.filter:currency) พารามิเตอร์เช่น: USD $ ด้วยวิธีนี้ Angular จะเพิกเฉยต่อการเปลี่ยนแปลงใด ๆ ในสถานที่และแสดงความสมดุลเป็น "USD $ 1,000.00"
2. กับดักความยาวการแปล
โปรดจำไว้ว่าเมื่อแปลสตริงและรูปแบบเหตุการณ์ความยาวอาจแตกต่างกันอย่างมาก ตัวอย่างเช่น "3 มิถุนายน 1977" กลายเป็น "3 de Junio de 1977" เมื่อแปลเป็นภาษาสเปน แน่นอนว่าอาจมีสถานการณ์ที่รุนแรงกว่านี้ ดังนั้นเมื่อเราทำให้แอปพลิเคชันเป็นสากลเราจำเป็นต้องตั้งค่ากฎ CSS ที่สอดคล้องกันและดำเนินการทดสอบที่ครอบคลุมเพื่อให้แน่ใจว่าส่วนประกอบ UI จะไม่ยุบ (ตัวแปร)
3. โซนเวลา
โปรดจำไว้ว่าตัวกรอง DateTime ของ Angular ใช้โซนเวลาที่กำหนดโดยเบราว์เซอร์ ดังนั้นแอปพลิเคชั่นเดียวกันจะแสดงข้อมูลเวลาที่แตกต่างกันตามการตั้งค่าโซนเวลาของคอมพิวเตอร์ที่ใช้แอปพลิเคชันแทนที่จะเป็นโซนเวลาที่กำหนดโดยนักพัฒนาใน JavaScript หรือ Angular