angularjs动态加载json语言文件(angularjs loading json language file dynamically)

我刚接触角......：/

我想为每种语言加载一个不同的json文件...（json / Agenda-nl.json）

我应该怎么做？现在我有2个控制器文件和2个不同的html文件来加载它们......我怎么能用dinamically加载它们......也许使用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=''; }; } ]);

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

最满意答案

您是否可以使用装载机概念？

我在App.config中使用这样的东西，它运行良好：

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

文件夹结构如下所示：

应用程序/定位/议程-NL / agenda.json

应用程序/定位/议程-FR / agenda.json

不同json文件的内容可以是：

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

在您的应用程序中，您可以使用AGENDA_TEXT并依赖所选语言，您将获得翻译后的文本。

这是个主意吗？

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: