angular-translate 的总结

新的项目需要用到国际化,发现angular-translate方便,简单,接下来就对angular-translate官网https://angular-translate.github.io/docs/#/guide,整理总结

一.installation

  1.通过bower你可以很方便的安装angular-translate.在cmd命令行执行下面命令
  bower install angular-translate
然后在bower_components就可以看见angular-translate
angular-translate 的总结_第1张图片
2.你也可以通过clone github 仓库拿到angular-translate的源码
$ git clone git://github.com/angular-translate/angular-translate.git

3..通过npm 管理工具下载angularJS及angular-translate模板
   npm install angular-translate

二.Getting started

在html中引入angular-translate需要在angular.js之后引入
     
i18n app
 
 
 

1.申明依赖
   app中使用angular-translate,需要在申明app是添加依赖注入
   var app = angular.module('myApp', ['pascalprecht.translate']);

   当有一种语言的时候,eg:
app.config(['$translateProvider', function($translateProvider) {
 
$translateProvider.translations('en', {
    HEADLINE: 'Hello there, This is my awesome app!',
    INTRO_TEXT: 'And it has i18n support!'
  })
.preferredLanguage('en');
}]);

{{ 'HEADLINE' | translate }}


三.using $translate service

    1.首先你得像注入其他依赖一样注入$translate,就像下面的代码:

app.controller('Ctrl', ['$translate', function ($translate) {
 
}]);

     2.用$translate service翻译内容,您给出translate id $translate 给异步的给出一个promise,
        成功找到translate id翻译会返回翻译,失败会translate id
        用法如下:
app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
$translate('HEADLINE').then(function (headline) {
     $scope.headline = headline;
}, function (translationId) {
     $scope.headline = translationId;
});
$translate('PARAGRAPH').then(function (paragraph) {
     $scope.paragraph = paragraph;
}, function (translationId) {
     $scope.paragraph = translationId;
});
     $translate('NAMESPACE.PARAGRAPH').then(function (anotherOne) {
     $scope.namespaced_paragraph = anotherOne;
}, function (translationId) {
     $scope.namespaced_paragraph = translationId;
});
}]);

也可以将上面的多条语句合并成一条:
app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
$translate(['HEADLINE', 'PARAGRAPH', 'NAMESPACE.PARAGRAPH']).then(function (translations) {
$scope.headline = translations.HEADLINE;
$scope.paragraph = translations.PARAGRAPH;
$scope.namespaced_paragraph = translations['NAMESPACE.PARAGRAPH'];
}, function (translationIds) {
$scope.headline = translationIds.headline;
$scope.paragraph = translationIds.paragraph;
$scope.namespaced_paragraph = translationIds.namespaced_paragraph;
});
}]);

四.Using translate filter

在Using translate service中 你需要引入$translate服务,用translate filter 你就可以直接在视图上面做翻译
就像下面这段代码:

{{'PARAGRAPH' | translate}}


五.Using translate directive

  另一种在视图上翻译内容,也可以使用translate directive 下面有几种使用方法
  1.TRANSLATION_ID
  2.
  3.
  4.{{toBeInterpolated}}

六.Variable replacement

翻译中的带变量,例如:
{
  "TRANSLATION_ID": "{{username}} is logged in."
}

1.variable repalcement in translate service,翻译时需要带上第二个参数
   $translate('TRANSLATION_ID', { username: 'PascalPrecht' });
   如果translation id 包含多个变量,你也可以
$translate('TRANSLATION_ID', {
username: 'PascalPrecht',
lastLogin: '2013-07-21 6:50PM'
});

 2.variable repalcement in translate filter
    {{ 'TRANSLATION_ID' | translate:'{ username: "PascalPrecht" }' }}
    也可以
angular.module('myApp').controller('Ctrl', ['$scope', function ($scope) {
 
$scope.translationData = {
username: 'PascalPrecht'
};
}]);

{{ 'TRANSLATION_ID' | translate:translationData }}

    

3.variable repalcement in translate directive

or
or

从2.0版本之后,你也可以定义自己的属性: translate-value-*

{
"GREETING": "Hi, my name is {{name}}"
}

or




七.Muti Language

//注册language为'en'的翻译
$translateProvider.translations('en', {
GREETING: 'Hello world!'
});

//注册language为'zn'的翻译
$translateProvider.translations('zn', {
GREETING: '你好!'
});

$translateProvider.preferredLanguage('en');//默认语言设置为英文

$translateProvider.determinePreferredLanguage();通过浏览器的语言设置默认语言

运行时切换语言:
$translate.use();//获取当前语言
$translate.use(langKey);//改变当前使用语言

八.Registering a fallback language

$translateProvider
.translations('de', { /* ... */ })
.translations('en', { /* ... */ })
.fallbackLanguage('en');//将en设置为没有加载到语言的失败语言

九.Asynchronous Loading

1.Using urlLoader
     
$ bower install angular-translate-loader-url

  $translateProvider.useUrlLoader('foo/bar.json');
  $translateProvider.preferredLanguage('en');

2.Using staticFilesLoader
  
$ bower install angular-translate-loader-static-files
 

$translateProvider.useStaticFilesLoader({
prefix: 'locale-',//i18n文件所在文件夹的前缀路径
suffix: '.json'//文件的后缀地址
});
$translateProvider.preferredLanguage('en');//将会加载locale-en.json这个文件

3.Using partialLoader

$ bower install angular-translate-loader-partial

使用部分加载,文件结构如:
/i18n/home/en.json
/i18n/home/de.json
/i18n/contact/en.json
/i18n/contact/de.json

部分加载需要定义加载端口,我们使用 $translatePartialLoaderProvider's addPart()方法
$translatePartialLoaderProvider.addPart('home');
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: '/i18n/{part}/{lang}.json'
});
$translateProvider.preferredLanguage('en');
or
angular.module('contact')
.controller('ContactCtrl', function ($scope, $translatePartialLoader, $translate) {
     $translatePartialLoader.addPart('contact');
     $translate.refresh();
});

补充:
1.定义filter实现国际化
   .filter("tFilter",['$translate',function($translate){
      return function(key){
               if(key){ 
                  return $translate.instant(key);
              }
      }
   }])

  使用方法:{{'登录'|T:100001}}


   2.在service中定义实现国际化
    
    .factory('tService',['$translate',function($translate){
     
     var tran = function(key){
         if(key){
              return $translate.instant(key)
         }
         return key;
     }
    return tran;
   }]);
   使用方法:
 $scope.login_title=tService.tran("key");








你可能感兴趣的:(web,前端)