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='';
};
}
]);
我在 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 和所选语言的依赖项,您还将获得翻译后的文本。
这是个主意吗?
我是 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='';
};
}
]);
我在 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 和所选语言的依赖项,您还将获得翻译后的文本。
这是个主意吗?