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之后引入
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实现国际化
补充：
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");