How to create and use separate file for each language in angular-translate with requirejs-angularAMD?

Question

Using angualr-translate with requirejs. Want to create separate files for each language (contains translate keys), for the time it is all in app.js.

Example- 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

For case you want to use js instead of 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);
    };
});

this is an modified example in the preference link of asynchronus-loading in the end of the answer (section Using custom loader service)

OLD ANSWER

angular-translate supports on-demand load for translation files. You don't need to use requireJS in this case.

Currenly this is my code in app.config()

$translateProvider.useUrlLoader('/translate');
$translateProvider.preferredLanguage('en');
$translateProvider.fallbackLanguage('en');

all you need to do is setup url like below

{your_host}/something-translate?lang={language_key}

In my case, the server real url is like.

localhost/translate?lang=en

localhost/translate?lang=fr

localhost/translate?lang=es

...

Then in controller:

$scope.translate = function (langKey){
    $translate.use(langKey);
}

Preference link:

https://github.com/angular-translate/angular-translate/wiki/Asynchronous-loading#registering-asynchronous-loaders

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