angularjs 动态加载 json 语言文件

angularjs loading json language file dynamically

我是 angular 的新手...:/

我想为每种语言的数据加载一个不同的 json 文件... (json/Agenda-nl.json)

我应该怎么做?现在我有 2 个控制器文件和 2 个不同的 html 文件来加载它们……我如何动态加载它们……也许使用 angular-translate 模块?

在此先感谢您的帮助

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='';
        };

    }
]);

你可以use the loader concept吗?

我在 App.config 中使用了类似的东西,它运行良好:

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

文件夹结构如下所示:

app/localization/agenda-nl/agenda.json

app/localization/agenda-fr/agenda.json

不同 json 个文件的内容可能是:

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

在您的应用程序中,您不仅可以使用 AGENDA_TEXT 和所选语言的依赖项,您还将获得翻译后的文本。

这是个主意吗?