项目中采用国际化方案,页面需要做中英文切换,
需要用到的翻译插件有
<!--翻译插件-->
<script src="bower_components/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>(异步翻译(无需重新加载页面))
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/messageformat/messageformat.js"></script>
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="bower_components/angular-translate-interpolation-messageformat/angular-translate-interpolation-messageformat.js"></script>
<script src="bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>
(angular-translate-loader-static-files.min.js 模块是用来读取本地文件的模块,因为我们的翻译内容都是独立的 json 文件.)
模块注入
'tmh.dynamicLocale',
'pascalprecht.translate',
$translatePartialLoader(以下简写为TPL)是angular-translate中的局部加载器,由于该加载器可以以模块为单位同时加载多个国际化文件,因此成为angular开发SAP必选的加载器。
关于项目中是怎么做翻译的
1 .页面上中英文切换的按钮
<div ng-controller="LanguageController as languageVm">
<div class="language" uib-dropdown>
<a uib-dropdown-toggle class="text-muted count-info fa fa-flag">
</a>
<ul uib-dropdown-menu class="translateList animated fadeInRight">
<li ng-repeat="language in languageVm.languages">
<a ng-click="languageVm.changeLanguage(language)">{{language | findLanguageFromKey}}</a>
</li>
</ul>
</div>
</div>
2.LanguageController 控制器是如何做到中英文切换的
(function() {
'use strict';
angular
.module('App')
.controller('LanguageController', LanguageController);
LanguageController.$inject = ['$translate','$log','LanguageService','tmhDynamicLocale'];
function LanguageController($translate,$log,iLanguageService, tmhDynamicLocale) {
var vm = this;
vm.changeLanguage = changeLanguage;
vm.languages = null;
JhiLanguageService.getAll().then(function(languages) {
vm.languages = languages;
});//获取所有语言种类
function changeLanguage(languageKey) {
$translate.use(languageKey);
tmhDynamicLocale.set(languageKey);
}
})();
3.如何加载多语言资源文件(translatePartialLoader:加载器)
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('test');
return $translate.refresh();
}]
(function() {
'use strict';
angular
.module('ejt1GatewayApp')
.config(translationConfig);
translationConfig.$inject = ['$translateProvider', 'tmhDynamicLocaleProvider','$httpProvider'];
function translationConfig($translateProvider, tmhDynamicLocaleProvider,$httpProvider) {
// Initialize angular-translate
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'i18n/{lang}/{part}.json'
});
//$httpProvider.defaults.headers.common["Accept-Language"] = "en";
$translateProvider.preferredLanguage('en');
$translateProvider.useStorage('translationStorageProvider');
$translateProvider.useSanitizeValueStrategy('escaped');
$translateProvider.addInterpolation('$translateMessageFormatInterpolation');
tmhDynamicLocaleProvider.localeLocationPattern('bower_components/angular-i18n/angular-locale_{{locale}}.js');
tmhDynamicLocaleProvider.useCookieStorage();
tmhDynamicLocaleProvider.storageKey('NG_TRANSLATE_LANG_KEY');
}
})();
html元素做翻译的几种情况
比如i18n下zh-cn,en目录下各有一个test.json文件
{
"title1":"填写页面上需要翻译的内容",
"placeholder":"placeholder内容",
"submit":"提交"
}
<span data-translate="title1"></span>或者<span>{{'title1' | translate}}</span>
placeholeder的翻译写法ng-attr-placeholder="{{'placeholder' | translate}}"
<input type="submit" class="btn btn-primary block full-width m-b" translate
translate-attr-value="{{'submit' | translate}}"
关于ui-bootstrap的日历插件如何做翻译:
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
<p class="input-group">
<input type="text" ng-attr-placeholder="{{'date.content.start' | translate}}" class="form-control" uib-datepicker-popup
ng-model="startT" is-open="startPopupOpened" datepicker-options="startDateOptions"
ng-required="true" clear-text="{{'date.content.clear' | translate}}" close-text="{{'date.content.close' | translate}}" current-text="{{'date.content.current' | translate}}"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="startOpen()"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
关于ng-option如何做翻译:http://stackoverflow.com/questions/23568180/how-to-ng-translate-inside-select-box-option-in-angularjs