做的项目需要国际化，能够切换不通的语言，在做之前先根据网上的方案写了两个例子，
使用angular-translate插件实现：
具体代码：
<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-controller="MainCtrl as mainctrl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular_v1.7.2/angular.js"></script>
<script src="bower-angular-translate-2.18.1/angular-translate.js"></script>
</head>
<body>
<!--<div ng-app="myapp">-->
<!--<div ng-controller="MainCtrl as mainctrl">-->
<h1>test1</h1>
{{defaultLanguage}}
<select ng-model="defaultLanguage" ng-click="changeLanguage()" ng-options="x.english as x.lang for x in language">
</select>
<h1>{{ 'edit' | translate }}</h1>
<h1>{{ 'delete' | translate }}</h1>
<!--<span translate="delete"></span>-->
<!--</div>-->
<!--</div>-->
<script>
var myapp = angular.module("myapp", ['pascalprecht.translate']);
myapp.controller("MainCtrl", function ($scope, $translate) {
$scope.lang = navigator.language || navigator.userLanguage;
console.log( $scope.lang);//通过浏览器检测语言
$scope.defaultLanguage = "";
$scope.language = [
{id: 1, lang: "English", english: "english"},
{id: 2, lang: "中文简体", english: "simplifiedChinese"},
{id: 3, lang: "中文繁體", english: "traditionalChinese"},
{id: 4, lang: "Việt", english: "vietnamese"},
{id: 5, lang: "العربية", english: "arabic"},
];
$scope.changeLanguage = function () {
localStorage.setItem("language", $scope.defaultLanguage);
$translate.use($scope.defaultLanguage)
}
$scope.getDefaultLanguage = function () {
if (localStorage.getItem("language") === null) {
$scope.defaultLanguage = "english";
} else {
$scope.defaultLanguage = localStorage.getItem("language")
}
$scope.changeLanguage();
};
$scope.getDefaultLanguage();
});
myapp.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('English', {
'delete': 'delete',
'edit': 'edit'
});
$translateProvider.translations('simplifiedChinese', {
'delete': '删除',
'edit': '编辑',
});
$translateProvider.translations('traditionalChinese', {
'delete': '繁体删除',
'edit': '繁体编辑'
});
$translateProvider.translations('vietnamese', {
'delete': '越南语删除',
'edit': '越南语编辑'
});
$translateProvider.translations('arabic', {
'delete': '阿拉伯语删除',
'edit': '阿拉伯语编辑'
});
$translateProvider.preferredLanguage('simplifiedChinese');
}]);
</script>
</body>
</html>
这样做已经可以实现多语言切换了，但是要在js中配置多语言数据，不太合适，再利用http://angular-translate.github.io/
<!DOCTYPE html>
<html lang="en" ng-app="myapp" ng-controller="MainCtrl as mainctrl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/angular_v1.7.2/angular.js"></script>
<script src="/bower-angular-translate-2.18.1/angular-translate.js"></script>
<script src="/bower-angular-translate-2.18.1/angular-translate-loader-static-files.js"></script>
</head>
<body>
{{defaultLanguage}}
<select ng-model="defaultLanguage" ng-click="changeLanguage()" ng-options="x.english as x.lang for x in language">
</select>
<h1>{{ 'edit' | translate }}</h1>
<h1>{{ 'delete' | translate }}</h1>
<span translate="delete"></span>
<script>
var myapp = angular.module("myapp", ['pascalprecht.translate']);
myapp.controller("MainCtrl", function ($scope, $translate) {
var lang = navigator.language||navigator.userLanguage;
console.log(lang);//通过浏览器检测语言
if(localStorage.getItem("language")){
$scope.defaultLanguage=localStorage.getItem("language")
}else {
$scope.defaultLanguage = "english";
}
$scope.language =[
{id:1,lang:"English",english:"english"},
{id:2,lang:"中文简体",english:"simplifiedChinese"},
{id:3,lang:"中文繁體",english:"traditionalChinese"},
{id:4,lang:"Việt",english:"vietnamese"},
{id:5,lang:"العربية",english:"arabic"},
]
$scope.changeLanguage = function () {
localStorage.setItem("language", $scope.defaultLanguage);
$translate.use($scope.defaultLanguage)
console.log($scope.defaultLanguage);
}
$scope.getDefaultLanguage = function () {
if (localStorage.getItem("language") === null) {
$scope.defaultLanguage = "english";
} else {
$scope.defaultLanguage = localStorage.getItem("language")
}
$scope.changeLanguage();
};
$scope.getDefaultLanguage();
})
myapp.config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
files: [{
prefix: '/langConfig/',//语言包路径
suffix: '.json' //语言包后缀名
}]
});
$translateProvider.fallbackLanguage('english');//默认加载语言包
}]);
</script>
<!--<script src="translate.js"></script>-->
</body>
</html>
相关链接：
https://cdnjs.com/libraries/angular-translate-loader-static-files
http://angular-translate.github.io/
1.如需转载本站原创文章，请务必注明文章出处并附上链接，非常感谢。
2.本站用于记录个人 工作、学习、生活，非商业网站，更多信息请 点击这里
Hello there,
My name is Aly and I would like to know if you would have any interest to have your website here at crazyming.cn promoted as a resource on our blog alychidesign.com ?
We are in the midst of updating our broken link resources to include current and up to date resources for our readers. Our resource links are manually approved allowing us to mark a link as a do-follow link as well
.
If you may be interested please in being included as a resource on our blog, please let me know.
Thanks,
Aly