angularjs loading json language file dynamically

Question

I'm new to angular... :/

I would like to load a a differtent json file for data for each language... (json/Agenda-nl.json)

How should I do that? Now I have 2 controller files and 2 different html files to load them... how can I load them dinamically.... maybe using the angular-translate module?

Thanks in advance for the help

var App = angular.module('App', ['pascalprecht.translate']);

App.config(function($translateProvider) {
    $translateProvider.translations('fr', {
        TYPE: 'Type',
        BUTTON_TEXT_FR: 'français',
        BUTTON_TEXT_NL: 'nederlands'
    })
        .translations('nl', {
            TYPE: 'Type',
            BUTTON_TEXT_FR: 'français',
            BUTTON_TEXT_NL: 'nederlands'
        });
    $translateProvider.preferredLanguage('fr');
});
App.controller('TranslateController', function($translate, $scope) {
    $scope.changeLanguage = function (langKey) {
        $translate.use(langKey);
    };
});

App.controller('AgendaListCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('json/Agenda-nl.json').success(function(data) {
            $scope.courses = data;
        });
        $http.get('json/language.json').success(function(language) {
            $scope.language = language;
        });
        $http.get('load.php').success(function(loaded) {
            $scope.load = loaded;
        });            

        $scope.selectModel = '1';

        $scope.hover = function(course) {
            // Shows/hides the enroll button on hover
            return course.showOverlay = ! course.showOverlay;
         };

         // create a blank object to hold our form information
        // $scope will allow this to pass between controller and view
        $scope.formData = {}; 
        //$scope.data = {};

        //empty out msgs if errors remains on screen after registration
        //$scope.message = [];
        //$scope.errors = [];

        // process the form
        $scope.processForm = function() {
            console.log("----->Submitting Form");
            $scope.formData
            $http({
                url     : 'insert.php',
                method  : 'POST',
                data    : $.param($scope.formData),  // pass in data as strings
                headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }  // set the headers so angular passing info as form data (not request payload)
            })
            .success(function(data) { // form submitted succesfully, nothing to do with injected in db or not... normally will always go into this routine...
            console.log(data); // debug in console window

            if (!data.success) {
                // if not successful, bind errors to error variables
                $scope.errormessage = data.errors.message;
                console.log(data.errors.message);
            } else {
                        // if successful, bind success message to message
                        $scope.message = data.message;
                        console.log(data.message);
                        // empty out array when everything went well...
                        //$scope.formData = {};
                    }
            });
   //out
            // reset form when submitted:
            //$scope.formData = {};
            //$scope.register.$setPristine();
            //$scope.model='';
        };

    }
]);

Answer 1

Is it possible for you to use the loader concept?

I am using something like this in the App.config and it is working nicely:

$translatePartialLoaderProvider.addPart("agenda");
$translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: '/app/localization/agenda-{lang}/{part}.json'
})
.preferredLanguage('nl')
.useLocalStorage();
$translateProvider.fallbackLanguage('nl');

The folder structure would look like this:

app/localization/agenda-nl/agenda.json

app/localization/agenda-fr/agenda.json

The content of the different json files could be:

{
    "AGENDA_TEXT": "Dit is jouw agenda tekst",
}

In your application you can than just use AGENDA_TEXT and dependend of the selected language, you'll get the translated text.

Is that an idea?