javascript - angularjs动态加载json语言文件

标签 javascript json angularjs angular-translate

我是 Angular 新手......:/

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

我该怎么做?现在我有 2 个 Controller 文件和 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以及所选语言的依赖项,您还将获得翻译后的文本。

这是一个想法吗?

关于javascript - angularjs动态加载json语言文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30506542/

相关文章:

javascript - 删除类 onclick ... angular js

javascript - 类型 'open' 上不存在属性 'MatDialogModule'

javascript - 发送表单数据到 Node 服务器

javascript - 移动问题滑动(Iphone)

jquery - 使用 Foundation Framework 为 json 输出设置行/列/类的样式

java.lang.IllegalStateException 错误消息

javascript - 强制浏览器请求动态加载的图标

javascript - 我如何编写一个 Javascript 警报,使其在每个网络 session 中只填充一次?

android - 如何从 phonegap android 应用程序访问 SQL 服务器数据库?

javascript - 如何处理 AngularJS 配置 block 错误