项目中采用国际化方案,页面需要做中英文切换,

需要用到的翻译插件有

<!--翻译插件-->
<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

http://plnkr.co/edit/ViSF2DWK1amSW8BwwPKn?p=preview

results matching ""

    No results matching ""