Question

使用 angualr-translate with 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);

    });

Answer 1

对于您想要使用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);
    };
});

这是答案末尾的asynchronus-loaded首选项链接中的修改示例（Using custom loader service部分）

OLD ANSWER

angular-translate 支持翻译文件的按需加载。在这种情况下，您不需要使用requireJS。

Currenly这是我在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/Asynchronous-loading#registering-asynchronous-loaders

https://github.com/angular-translate/angular-translate/wiki/Extensions

如何使用requirejs-angularAMD在angular-translate中为每种语言创建和使用单独的文件？

1 个答案:

OLD ANSWER