22/09/2018, 08:28
Vấn đề đa ngôn ngữ trong angularjs
Trong phần này, mình sẽ thêm chức năng đa ngôn ngữ cho dự án. Đa ngôn ngữ là một phần quan trọng và có mặt ở rất nhiều ứng dụng. Việc xây dựng chức năng này tương đối phức tạp, tuy nhiên lại mang lại lợi ích không nhỏ về lâu dài. Phần source code của dự án các bạn có thể xem tại đây ...
Trong phần này, mình sẽ thêm chức năng đa ngôn ngữ cho dự án. Đa ngôn ngữ là một phần quan trọng và có mặt ở rất nhiều ứng dụng. Việc xây dựng chức năng này tương đối phức tạp, tuy nhiên lại mang lại lợi ích không nhỏ về lâu dài. Phần source code của dự án các bạn có thể xem tại đây https://github.com/thanhson1085/bean-seed/tree/4.4
Trước khi bắt đầu, chúng ta cần cài đặt các thư viện sau:
bower install --save angular-translate
bower install --save angular-translate-storage-local
bower install --save angular-translate-loader-static-files
bower install --save angular-translate-handler-log
|
1 2 3 4 5 6 |
bower install --save angular-translate bower install --save angular-translate-storage-local bower install --save angular-translate-loader-static-files bower install --save angular-translate-handler-log |
Sau đó thêm module mới pascalprecht.translate vào app/scripts/config.tpl.js
angular
.module('siteSeedApp', [
'ngTouch',
'ngResource',
'ngCookies',
'ui.router',
'ui.bootstrap',
'oc.lazyLoad',
'pascalprecht.translate'
])
|
1 2 3 4 5 6 7 8 9 10 11 12 |
angular .module('siteSeedApp', [ 'ngTouch', 'ngResource', 'ngCookies', 'ui.router', 'ui.bootstrap', 'oc.lazyLoad', 'pascalprecht.translate' ]) |
Tiếp đến chúng ta cần tạo thư mục resources để lưu các file ngôn ngữ:
cd app
mkdir resources
cd resources
echo "{}" > locale-us_US.json
|
1 2 3 4 5 6 |
cd app mkdir resources cd resources echo "{}" > locale-us_US.json |
Thêm nội dung vào file locale-us_US.json
{
"views.users.list.Users": "Users",
"views.users.list.ListOfUsers": "List Of User"
}
|
1 2 3 4 5 6 |
{ "views.users.list.Users": "Users", "views.users.list.ListOfUsers": "List Of User" } |
Thêm cấu hình đa ngôn ngữ vào các file config như config/local.json
"locales": {
"locales": {
"vi_VN": "Việt Nam",
"en_US": "English"
},
"preferredLocale": "en_US"
},
|
1 2 3 4 5 6 7 8 9 |
"locales": { "locales": { "vi_VN": "Việt Nam", "en_US": "English" }, "preferredLocale": "en_US" }, |
Thêm config vào file app.js
.config(['$resourceProvider', function($resourceProvider) {
$resourceProvider.defaults.stripTrailingSlashes = false;
}])
.config(function ($translateProvider, APP_CONFIG) {
if (APP_CONFIG.debug_mode) {
$translateProvider.useMissingTranslationHandlerLog();
}
$translateProvider.useStaticFilesLoader({
files: [
{
prefix: 'resources/locale-',
suffix: '.json'
}
]
});
$translateProvider.preferredLanguage(APP_CONFIG.locales.preferredLocale);
$translateProvider.useLocalStorage();
})
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.config(['$resourceProvider', function($resourceProvider) { $resourceProvider.defaults.stripTrailingSlashes = false; }]) .config(function ($translateProvider, APP_CONFIG) { if (APP_CONFIG.debug_mode) { $translateProvider.useMissingTranslationHandlerLog(); } $translateProvider.useStaticFilesLoader({ files: [ { prefix: 'resources/locale-', suffix: '.json' } ] }); $translateProvider.preferredLanguage(APP_CONFIG.locales.preferredLocale); $translateProvider.useLocalStorage(); }) |
Thay đổi nội dung file app/views/users/list.html
<h1 class="page-header"><i class="fa fa-user"></i> <span translate="views.users.list.Users"></span></h1>
<div class="panel-heading"><i class="fa fa-list"></i> <span translate="views.users.list.ListOfUsers"></span>
|
1 2 3 4 5 |
<h1 class="page-header"><i class="fa fa-user"></i> <span translate="views.users.list.Users"></span></h1> <div class="panel-heading"><i class="fa fa-list"></i> <span translate="views.users.list.ListOfUsers"></span> |
Như vậy, đến đây chúng ta đã có thể thấy rằng Angular Translate sẽ đọc các label được khai báo trong file ngôn ngữ và đưa vào view (ví dụ list.html). Nhưng vẫn còn thiếu phần để người dùng có thể thay đổi ngôn ngữ của ứng dụng. Ở đây, ứng dụng có hai ngôn ngữ là English và Việt Nam.
Để làm được điều đó, chúng ta sẽ xây dựng một View và một Directive với từng bước như sau:
Tạo một Service thay đổi ngôn ngữ app/scripts/services/locale.js
'use strict';
angular.module('siteSeedApp')
.service('LocaleService', function ($translate, APP_CONFIG, $rootScope) {
// get locales from config
var localesObj = APP_CONFIG.locales.locales;
// locales and locales display names
var locales = Object.keys(localesObj);
if (!locales || locales.length === 0) {
console.error('There are no locales provided');
}
var localesDisplayNames = [];
locales.forEach(function (locale) {
localesDisplayNames.push(localesObj[locale]);
});
// storing current locale
var currentLocale = $translate.use();
var checkLocaleIsValid = function (locale) {
return locales.indexOf(locale) !== -1;
};
var setLocale = function (locale) {
if (!checkLocaleIsValid(locale)) {
console.error('Locale name "' + locale + '" is invalid');
return;
}
currentLocale = locale;// updating current locale
// asking angular-translate to load and apply proper translations
$translate.use(locale);
};
return {
getLocaleDisplayName: function () {
return localesObj[currentLocale];
},
setLocaleByDisplayName: function (localeDisplayName) {
setLocale(
locales[
localesDisplayNames.indexOf(localeDisplayName)// get locale index
]
);
},
getLocalesDisplayNames: function () {
return localesDisplayNames;
}
};
});
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
'use strict'; angular.module('siteSeedApp') .service('LocaleService', function ($translate, APP_CONFIG, $rootScope) { // get locales from config var localesObj = APP_CONFIG.locales.locales; // locales and locales display names var locales = Object.keys(localesObj); if (!locales || locales.length === 0) { console.error('There are no locales provided'); } var localesDisplayNames = []; locales.forEach(function (locale) { localesDisplayNames.push(localesObj[locale]); }); // storing current locale var currentLocale = $translate.use(); var checkLocaleIsValid = function (locale) { return locales.indexOf(locale) !== -1; }; var setLocale = function (locale) { if (!checkLocaleIsValid(locale)) { console.error('Locale name "' + locale + '" is invalid'); return; } currentLocale = locale;// updating current locale // asking angular-translate to load and apply proper translations $translate.use(locale); }; return { getLocaleDisplayName: function () { return localesObj[currentLocale]; }, setLocaleByDisplayName: function (localeDisplayName) { setLocale( locales[ localesDisplayNames.indexOf(localeDisplayName)// get locale index ] ); }, getLocalesDisplayNames: function () { return localesDisplayNames; } }; }); |
Tiếp đến tạo một Directive app/scripts/directives/locale.js
'use strict';
angular.module('siteSeedApp')
.directive('ngTranslateLanguageSelect', function (LocaleService) {
return {
restrict: 'A',
replace: true,
templateUrl:'views/locale/locale.html',
controller: function ($scope) {
$scope.currentLocaleDisplayName = LocaleService.getLocaleDisplayName();
$scope.localesDisplayNames = LocaleService.getLocalesDisplayNames();
$scope.visible = $scope.localesDisplayNames && $scope.localesDisplayNames.length > 1;
$scope.changeLanguage = function (locale) {
LocaleService.setLocaleByDisplayName(locale);
};
}
};
});
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
'use strict'; angular.module('siteSeedApp') .directive('ngTranslateLanguageSelect', function (LocaleService) { return { restrict: 'A', replace: true, templateUrl:'views/locale/locale.html', controller: function ($scope) { $scope.currentLocaleDisplayName = LocaleService.getLocaleDisplayName(); $scope.localesDisplayNames = LocaleService.getLocalesDisplayNames(); $scope.visible = $scope.localesDisplayNames && $scope.localesDisplayNames.length > 1; $scope.changeLanguage = function (locale) { LocaleService.setLocaleByDisplayName(locale); }; } }; }); |
Tạo một view, và thêm Directive vừa tạo vào view app/views/users/setting.html
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" translate="views.users.setting.Settings"></h1>
</div>
<div class="row">
<div class="col-lg-12">
<div ng-translate-language-select></div>
</div>
</div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="row"> <div class="col-lg-12"> <h1 class="page-header" translate="views.users.setting.Settings"></h1> </div> <!-- /.col-lg-12 --> <div class="row"> <div class="col-lg-12"> <div ng-translate-language-select></div> </div> <!-- /.col-lg-12 --> </div> |
Cuối cùng, thêm một route mới – app/scripts/app.js
.state('dashboard.user_setting',{
templateUrl:'views/users/setting.html',
url:'/users/setting',
})
|
1 2 3 4 5 6 |
.state('dashboard.user_setting',{ templateUrl:'views/users/setting.html', url:'/users/setting', }) |
Như vậy, chúng ta đã hoàn thành các bước để thêm chức năng Đa ngôn ngữ vào ứng dụng.
Techtalk via sonnguyen
