- Email devpro.edu.vn@gmail.com
- Hotline0985.95.08.95
Đa ngôn ngữ (i18n) trong AngularJS với 3 kiểu filter là currency, date và number. Chúng ta chỉ cần kết hợp đoạn js tương ứng với vị trí tùy quốc gia. Mặc định nó sẽ gắn với vị trí trong trình duyệt web. Nội dung bài này sẽ giải quyết các vấn đề cơ bản sau:
Lấy văn hóa hiện tại từ máy chủ đến máy khách
Hỗ trợ cho datetime, số lượng và tiền tệ
Hỗ trợ nhiều ngôn ngữ (văn bản nhãn)
Scott Hanselman đã xây dựng một định nghĩa về các thuật ngữ sau đây:
Quốc tế hóa (i18n *) - Giúp ứng dụng của bạn có thể hỗ trợ nhiều ngôn ngữ và ngôn ngữ.
Bản địa hóa (L10n *) - Làm cho ứng dụng của bạn hỗ trợ ngôn ngữ / ngôn ngữ cụ thể.
Toàn cầu hóa - Sự kết hợp của quốc tế hóa và địa phương hóa.
Ngôn ngữ - Ví dụ, tiếng Tây Ban Nha nói chung. Mã ISO "es".
Locale - Mexico. Lưu ý rằng tiếng Tây Ban Nha ở Tây Ban Nha không giống như tiếng Tây Ban Nha ở Mexico, ví dụ: "es-ES" và "es-MX" (id ngôn ngữ).
* Số 18 trong i18n và 10 trong L10n phản ánh số chữ cái giữa chữ cái đầu tiên và chữ cái cuối cùng.
Nó cũng là kiến thức hữu ích để tách các thuộc tính CurrentCulture và CurrentUICulture của CultureInfo trong .NET:
CurrentCulture = Số, ngày tháng, tiền tệ,…
CurrentUICulture = Bản địa hóa / dịch thuật giao diện người dùng.
Nhiệm vụ đầu tiên là giữ một CurrentCulture của ứng dụng ở phía máy khách. Nhận giá trị cookie trong AngularJS rất đơn giản:
Bao gồm "angular-cookies.js":
Khi bạn đã bao gồm một tệp miền địa phương, bạn có thể sử dụng các tùy chọn bộ lọc tích hợp sẵn. Ví dụ ngày có một số định dạng có thể bản địa hóa:
'trung bình': tương đương với 'MMM d, yh: mm: ss a' cho ngôn ngữ en_US (ví dụ: Sep 3, 2010 12:05:08 pm)
'short': tương đương với 'M / d / yy h: mm a' cho ngôn ngữ en_US (ví dụ: 9/3/10 12:05 pm)
'fullDate': tương đương với 'EEEE, MMMM d, y' cho ngôn ngữ en_US (ví dụ: Thứ Sáu, ngày 3 tháng 9 năm 2010)
'longDate': tương đương với 'MMMM d, y' cho ngôn ngữ en_US (ví dụ: ngày 3 tháng 9 năm 2010)
'mediumDate': tương đương với 'MMM d, y' cho ngôn ngữ en_US (ví dụ: ngày 3 tháng 9 năm 2010)
'shortDate': tương đương với 'M / d / yy' cho ngôn ngữ en_US (ví dụ: 9/3/10)
'mediumTime': tương đương với 'h: mm: ss a' cho ngôn ngữ en_US (ví dụ: 12:05:08 pm)
'shortTime': tương đương với 'h: mm a' cho ngôn ngữ en_US (ví dụ: 12:05 chiều)
Có thể được sử dụng như thế này trong mẫu HTML:
{{periodStart | ngày: 'mediumDate'}}
Không có cách tích hợp để xử lý dịch chuỗi trong AngularJS. Vì vậy, tôi googled các trang web mà không cần tìm một cách tốt và đơn giản để thực hiện hỗ trợ đa ngôn ngữ. Có một mô-đun góc thứ 3 khả thi của Angular được gọi là "góc dịch". Ngoài ra, phạm vi của tôi chỉ là dịch các văn bản nhãn trên trang web. Giải pháp của tôi là bằng cách tạo các tệp JSON riêng biệt chứa từng bản dịch và "translationService" đọc tệp chính xác và điền biến giữ mảng dịch, làm cho dữ liệu này có thể sử dụng được cho dữ liệu góc chung ràng buộc.
Bước 1: Thêm các tệp JSON được tổ chức dưới dạng từ điển khóa-giá trị. Các phím là phổ biến cho mỗi tập tin. Quy ước đặt tên là "translation_" + locale id + ".json".
Bước 2: Tệp tiếng Anh ("en") sẽ trông giống như sau:
{
"COLOR": "Color",
"HELLO": "Hello",
"HELLO_WORLD": "Hello World!"
}
Na Uy ("nb-không") tương đương:
{
"COLOR": "Farge",
"HELLO": "Hallo",
"HELLO_WORLD": "Hallo verden!"
}
Bước 3: Đặt JSON là kiểu MIME trong web.config (điều này cũng có thể được cấu hình trong IIS):
Nếu JSON không được đặt làm loại MIME, bạn sẽ gặp lỗi 404.3 khi cố truy xuất tệp. Khi loại MIME được đặt, bạn có thể truy cập tệp bằng trình duyệt:! [Browserresult] (/ content / images / 2014/10 / browserresult.png)
Bước 4: Tạo dịch vụ dịch thuật:
app.service('translationService', function($resource) {
this.getTranslation = function($scope, language) {
var languageFilePath = 'somepath_' + language + '.json';
$resource(languageFilePath).get(function (data) {
$scope.translation = data;
});
};
};
Bước 5: Bộ điều khiển cần gọi dịch vụ dịch thuật:
translationService.getTranslation ($ scope, $ cookies.lang);
Bước 6: Dữ liệu liên kết với mảng dịch trong mã HTML:
{{translation.HELLO_WORLD}}
Hoặc sử dụng ng-bind:
Bước 7: Và HTML sẽ hiển thị "Hello World!" cho rằng id miền địa phương là "vi".
Kiến thức về AngularJS khác:
