如何使用requirejs-angularAMD在angular-translate中為每種語言創建和使用單獨的文件？

Question

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

    });

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

這是答案末尾的異步加載首選項鏈接中的修改示例（ 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/Asynchronous-loading#registering-asynchronous-loaders

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