Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Internationalization

Xin chào các bạn nhà phát triển web đang học hỏi! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới quốc tế hóa trong AngularJS. Là một giáo viên khoa học máy tính gần gũi, tôi sẽ hướng dẫn bạn qua chủ đề hấp dẫn này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng chúng ta bắt đầu nhé!

AngularJS - Internationalization

什么是国际化和本地化?

Trước khi bắt đầu lập mã, hãy hiểu xem quốc tế hóa là gì. Hãy tưởng tượng bạn đã tạo ra một trang web tuyệt vời, nhưng chỉ có tiếng Anh. Nếu bạn muốn người dùng từ các quốc gia khác sử dụng nó thì sao? Đó là lúc quốc tế hóa phát huy tác dụng! Nó giống như cấp cho trang web của bạn một hộ chiếu để du lịch khắp thế giới.

Quốc tế hóa (thường được viết tắt là i18n - có 18 chữ cái giữa 'i' và 'n') là quá trình thiết kế ứng dụng của bạn để nó có thể được điều chỉnh cho các ngôn ngữ và khu vực khác nhau mà không cần thay đổi kỹ thuật.

Tại sao quốc tế hóa lại quan trọng?

Hãy nghĩ về nó như này: Nếu bạn sở hữu một cửa hàng kem, bạn sẽ chỉ bán một hương vị thôi không? Tất nhiên là không! Bạn sẽ muốn phục vụ nhiều hương vị khác nhau. Tương tự như vậy, khi quốc tế hóa ứng dụng AngularJS của bạn, bạn đang làm cho nó dễ tiếp cận và thân thiện hơn với người dùng trên toàn thế giới. Đó là như phục vụ kem sốt trong mọi hương vị!

Bây giờ, hãy撸 lên áo và xem cách AngularJS làm cho quốc tế hóa trở nên dễ dàng.

Thiết lập AngularJS cho quốc tế hóa

Trước hết, chúng ta cần thiết lập ứng dụng AngularJS của mình để xử lý quốc tế hóa. Chúng ta sẽ sử dụng thư viện angular-translate, giống như một cây đũa phép để dịch ứng dụng của mình.

Dưới đây là cách chúng ta thiết lập:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
<div ng-controller="TranslateController">
<!-- Nội dung ứng dụng của chúng ta sẽ nằm ở đây -->
</div>
<script src="app.js"></script>
</body>
</html>

Trong file app.js, chúng ta sẽ thiết lập mô-đun AngularJS và cấu hình nhà cung cấp dịch:

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
// Cấu hình sẽ nằm ở đây
}]);

app.controller('TranslateController', function($scope, $translate) {
// Logic của controller sẽ nằm ở đây
});

Ví dụ sử dụng locale丹麦

Bây giờ, hãy tạo một ví dụ đơn giản nơi chúng ta sẽ dịch ứng dụng của mình sang tiếng Đan Mạch. Tại sao lại là tiếng Đan Mạch? Tại sao không! Ngoài ra, tôi từng có một học sinh rất thích bánh Đan Mạch, vì vậy ví dụ này dành cho bạn, Lars!

Hãy cập nhật file app.js của chúng ta:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

Đây là những gì đang xảy ra:

  1. Chúng ta định nghĩa các dịch cho tiếng Anh ('en') và tiếng Đan Mạch ('da').
  2. Chúng ta đặt tiếng Anh là ngôn ngữ ưu tiên.
  3. Chúng ta tạo một hàm changeLanguage trong controller để chuyển đổi ngôn ngữ.

Bây giờ, hãy cập nhật HTML của chúng ta:

<div ng-controller="TranslateController">
<h2>{{ 'TITLE' | translate }}</h2>
<p>{{ 'FOO' | translate }}</p>
<button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
<button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

Kết quả

Khi bạn chạy mã này, bạn sẽ thấy:

  • Tiêu đề là "Hello"
  • Một đoạn văn là "This is a paragraph."
  • Hai nút có nhãn "English" và "Danish"

Nhấn nút "Danish", và voilà! Ứng dụng của bạn bây giờ nói tiếng Đan Mạch:

  • Tiêu đề thay đổi thành "Hej"
  • Đoạn văn nói "Dette er et afsnit."
  • Các nút bây giờ có nhãn "Engelsk" và "Dansk"

Có phải như魔法 không? Nhưng hãy nhớ, đó không phải là魔法 - đó là sức mạnh của AngularJS và kỹ năng lập mã của bạn!

Ví dụ sử dụng locale của trình duyệt

Bây giờ, hãy nâng cấp một chút. Giả sử chúng ta muốn ứng dụng của mình tự động sử dụng ngôn ngữ của trình duyệt người dùng. Đó là như có một trang web có thể nói ngôn ngữ của bạn trước khi bạn thậm chí yêu cầu!

Hãy điều chỉnh file app.js của chúng ta:

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.useLocalStorage();
$translateProvider.fallbackLanguage('en');
$translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
'en*': 'en',
'da*': 'da'
});
$translateProvider.determinePreferredLanguage();
}]);

Những gì mới ở đây?

  1. Chúng ta sử dụng bộ nhớ cục bộ để nhớ ngôn ngữ ưu tiên của người dùng.
  2. Chúng ta đặt tiếng Anh là ngôn ngữ备用.
  3. Chúng ta đăng ký các khóa ngôn ngữ khả dụng.
  4. Chúng ta sử dụng determinePreferredLanguage() để tự động phát hiện ngôn ngữ của trình duyệt.

Kết quả

Bây giờ, khi một người dùng truy cập trang web của bạn:

  • Nếu ngôn ngữ của trình duyệt họ là tiếng Đan Mạch, họ sẽ thấy phiên bản tiếng Đan Mạch.
  • Nếu là ngôn ngữ khác, họ sẽ thấy phiên bản tiếng Anh (ngôn ngữ备用).
  • Ngôn ngữ đã chọn sẽ được nhớ cho lần truy cập tiếp theo.

Đó là như trang web của bạn là một con rắn变色龙, thích nghi với mỗi môi trường người dùng!

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã biến ứng dụng AngularJS của mình thành một kỳ quan đa ngôn ngữ. Hãy nhớ, quốc tế hóa không chỉ về dịch - nó còn về việc tạo ra một trải nghiệm ấm cúng cho người dùng trên toàn thế giới.

Khi bạn tiếp tục hành trình lập mã của mình, hãy luôn nhớ đến người dùng. Dù họ ở Copenhagen hay California, ứng dụng của bạn bây giờ có thể chào đón họ bằng ngôn ngữ họ hiểu.

Tiếp tục thực hành, giữ sự tò mò, và ai biết? Có lẽ một ngày nào đó bạn sẽ tạo ra một ứng dụng có thể nói nhiều ngôn ngữ hơn cả C-3PO! Đến gặp lại bạn, chúc bạn lập mã vui vẻ!

Phương thức Mô tả
$translateProvider.translations(langKey, translationTable) Thêm một bảng dịch mới cho một ngôn ngữ cụ thể
$translateProvider.preferredLanguage(langKey) Đặt ngôn ngữ ưu tiên
$translateProvider.useLocalStorage() Sử dụng bộ nhớ cục bộ để nhớ ngôn ngữ ưu tiên
$translateProvider.fallbackLanguage(langKey) Đặt ngôn ngữ备用
$translateProvider.registerAvailableLanguageKeys(keys, aliases) Đăng ký các khóa ngôn ngữ khả dụng và bí danh của chúng
$translateProvider.determinePreferredLanguage() Tự động phát hiện ngôn ngữ ưu tiên của trình duyệt
$translate.use(langKey) Thay đổi ngôn ngữ hiện tại

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Chỉ thị tùy chỉnh
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng ToDo