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

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之后引入

<html>

<head>

</head>

</body>

</html>

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');

}]);

<h2>{{ 'HEADLINE' | translate }}</h2>

三.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 你就可以直接在视图上面做翻译

就像下面这段代码：

<p>{{'PARAGRAPH' | translate}}</p>

五.Using translate directive

另一种在视图上翻译内容，也可以使用translate directive 下面有几种使用方法

1.<ANY translate>TRANSLATION_ID</ANY>

2.<ANY translate="TRANSLATION_ID"></ANY>

3.<ANY translate="{{toBeInterpolated}}"></ANY>

4.<ANY translate>{{toBeInterpolated}}</ANY>

六.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'

};

}]);

3.variable repalcement in translate directive

<ANYtranslate="TRANSLATION_ID" translate-values='{ username: "PascalPrect"}'></ANY>

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

{

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

}

七.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');

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");

angular-translate 的总结

猜你喜欢