[英]How to create and use separate file for each language in angular-translate with requirejs-angularAMD?
将angualr-translate与requirejs一起使用 。 想要为每种语言创建单独的文件(包含翻译键),而这一切都在app.js中进行了。
示例-app.js
define(['angularAMD', 'ngRoute','pascalprecht.translate'], function (angularAMD) {
var app = angular.module('app', ['ngRoute','pascalprecht.translate']);
app.config(['$routeProvider','$translateProvider', function($routeProvider,$translateProvider){
/* *************** routes *************** */
//...........
/* *************** routes *************** */
/* angular translate */
$translateProvider.translations('en', {
add_user: 'Add User',
first_name:'First Name',
last_name:'Last Name',
//.....
//IMPORTANT: more than 1000 translate keys...
//.....
});
$translateProvider.translations('de', {
add_user: 'Benutzer hinzufügen',
first_name:'Vorname',
last_name:'Last Name',
//.....
//IMPORTANT: more than 1000 translate keys...
//.....
});
// Bootstrap Angular when DOM is ready
return angularAMD.bootstrap(app);
});
如果您想使用js而不是JSON。
var app = angular.module('myModule', []);
app.config(function ($translateProvider) {
$translateProvider.useLoader('customLoader', {
// if you have some custom properties, go for it!
});
});
app.factory('customLoader', function ($http, $q) {
// return loaderFn
return function (options) {
var deferred = $q.defer();
// do something with $http, $q and key to load localization files
// or do something to load file with requireJS
require(['en-US'], function(translation){
var data = translation;
}
return deferred.resolve(data);
// or
return deferred.reject(options.key);
};
});
这是答案末尾的异步加载首选项链接中的修改示例( Using custom loader service
一节)
angular-translate支持翻译文件的按需加载。 在这种情况下,您不需要使用requireJS。
目前,这是我在app.config()
代码
$translateProvider.useUrlLoader('/translate');
$translateProvider.preferredLanguage('en');
$translateProvider.fallbackLanguage('en');
您所需要做的就是设置网址,如下所示
{your_host}/something-translate?lang={language_key}
就我而言,服务器的真实网址就像。
localhost/translate?lang=en
localhost/translate?lang=fr
localhost/translate?lang=es
...
然后在控制器中:
$scope.translate = function (langKey){
$translate.use(langKey);
}
首选项链接:
https://github.com/angular-translate/angular-translate/wiki/Extensions
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.