1. I18n dan L10n di AngularJS
1. Apa itu i18n dan l10n?
Internasionalisasi, disebut sebagai I18N, adalah standar untuk pengembangan produk dengan cara yang mereka dapat melokalisasi bahasa dan budaya produk. Lokalisasi, disebut sebagai L10N, adalah standar yang memungkinkan aplikasi dan teks untuk beradaptasi dengan pasar budaya atau bahasa khusus. Untuk pengembang aplikasi, internasionalisasi suatu program berarti bahwa semua string dan bidang lain perlu diekstraksi dari program di mana mereka lebih istimewa (seperti format tanggal dan mata uang). Melokalisasi program berarti menyediakan terjemahan dan format lokalisasi blok yang diekstraksi dari I18N.
2. Level I18N dan L10N apa yang saat ini didukung oleh Angular?
Saat ini, Angular menyediakan dukungan I18N dan L10N untuk datetime, angka, dan filter mata uang.
Selain itu, Angular mendukung lokalisasi yang beragam melalui Ngpluralize Directive (http://docs.angularjs.org/api/ng.directive:ngpluralize).
Semua kontrol yang dapat dilokalkan bergantung pada set aturan fitur pengaturan lokal yang dikelola melalui layanan $ lokal.
Untuk memungkinkan pembaca melihat contoh aktual, pejabat telah menyiapkan beberapa contoh halaman web untuk menunjukkan cara menggunakan filter sudut untuk mengumpulkan variabel melalui aturan wilayah. Kita dapat menemukan contoh yang sesuai di github (https://github.com/angular/angular.js/tree/master/i18n/e2e) atau di i18n/e2e dalam paket pengembangan sudut.
3. Apa itu ID regional?
Lokal adalah wilayah geografis, politik, dan budaya tertentu. ID lokal yang paling umum digunakan terdiri dari dua bagian: kode bahasa dan kode negara. Misalnya, en-us, en-au, dan zh-CN semuanya adalah ID lokal yang valid, semuanya berisi kode bahasa dan kode negara. Karena pengkodean negara yang ditentukan dalam ID lokal adalah opsional, ID lokal seperti EN, ZH dan SK semuanya valid. Lihatlah situs web ICU (http://userguide.icu-project.org/locale), di mana ada lebih banyak informasi tentang ID lokal.
4. Lokal yang didukung sudut
Angular memisahkan serangkaian aturan untuk angka, format tanggal dan waktu dalam file yang berbeda, setiap file memiliki area yang unik. Kami dapat menemukan daftar lokal yang saat ini didukung di sini (https://github.com/angular/angular.js/tree/master/i18n/locale)
2. Kustomisasi aturan lokal di sudut
Ada dua cara untuk menyesuaikan lokal di Angular:
1. Set aturan yang telah dibundel sebelumnya
Kami dapat mengimplementasikan file lokal yang diharapkan dengan menghubungkan file spesifik lokal ke angular.js atau angular.min.js.
Misalnya, di *nix, kita dapat membuat file angular.js yang berisi aturan lokalisasi regional Jerman melalui perintah berikut:
Cat Angular.js I18N/Angular-Locale_de-ge.js> angular_de-ge.js
Ketika aplikasi menggunakan skrip Angular_DE-GE.js alih-alih skrip General Angular.js, Angular dimulai secara otomatis aturan lokalisasi yang telah dikonfigurasi sebelumnya (pra-konfigurasi) di Jerman.
2. Sertakan skrip locale js ke halaman index.html
Kami juga dapat memasukkan file JS di area yang ditentukan ke dalam halaman. Misalnya, jika klien memerlukan file regional Jerman, kami dapat menyediakan halaman seperti berikut:
<html ng-app> <head> ... <script src = "angular.js"> </script> <script src = "i18n/angular-locale_de-ge.js"> </script> ... </head> ... </html>
Kedua metode di atas mengharuskan kami untuk menyediakan file indeks.html yang berbeda atau file JS di setiap wilayah untuk lokalisasi. Kami juga perlu mengkonfigurasi server kami untuk menyediakan file lokal yang benar dan diinginkan.
Namun, metode kedua (termasuk file lokal ke dalam halaman) akan lebih lambat karena satu skrip lagi diperlukan untuk memuat. (-_- !!!).
3. Trap ("gotchas")
1. Perangkap Simbol Mata Uang
Filter Mata Uang Angular memungkinkan kami untuk menggunakan simbol mata uang default dari layanan lokal, dan kami juga dapat memberikan simbol mata uang khusus. Jika aplikasi kami hanya digunakan di satu wilayah, maka kami dapat mengandalkan (mengatur) simbol mata uang default. Namun, jika kami berharap bahwa pengguna di wilayah lain juga akan menggunakan aplikasi kami, kami harus memberikan simbol mata uang khusus kami untuk memastikan bahwa pengguna memahami nilai aktual.
Misalnya, jika kita ingin mengikat filter mata uang untuk menampilkan saldo akun RMB 1.000: {{1.000 | Mata uang}}, dan aplikasi kami saat ini menggunakan Locale En-AS, lalu "$ 1.000,00" akan ditampilkan. Namun, jika pengguna di beberapa wilayah lain (seperti daratan Cina) mengunjungi aplikasi kami, browser pengguna akan menentukan pengaturan wilayah ke "daratan Cina", dan saldo akan ditampilkan sebagai "￥ 1000,00" (kesalahan yang sangat menyedihkan, nilai tukar ...).
Dalam contoh ini, ketika kita perlu mengatur filter, kita perlu menulis ulang simbol mata uang default dengan memberikan simbol mata uang sebagai parameter ke filter mata uang (http://docs.angularjs.org/api/ng.filter:currency), parameter seperti: USD $. Dengan cara ini, Angular akan mengabaikan perubahan di lokasi dan tetap menunjukkan saldo sebagai "USD $ 1000,00".
2. Perangkap Panjang Terjemahan
Ingat, saat menerjemahkan string dan format acara, panjangnya dapat sangat bervariasi. Misalnya, "3 Juni 1977" menjadi "3 de junio de 1977" ketika diterjemahkan ke dalam bahasa Spanyol. Tentu saja, mungkin ada situasi yang lebih ekstrem. Oleh karena itu, ketika kita menginternasionalkan aplikasi, kita perlu mengatur aturan CSS yang sesuai dan melakukan pengujian komprehensif untuk memastikan bahwa komponen UI tidak runtuh (varian).
3. Zona waktu
Ingat, filter datetime Angular menggunakan zona waktu yang ditetapkan oleh browser. Oleh karena itu, aplikasi yang sama akan menampilkan informasi waktu yang berbeda sesuai dengan pengaturan zona waktu komputer yang menjalankan aplikasi, daripada zona waktu yang ditentukan oleh pengembang dalam JavaScript atau Angular.