最近手头再维护一个老项目,浅谈下双语建站,木有耐心的,直接拿代码吧
只要思路还是用json语言包
搭建步骤:npm 下载angular-translate
npm install angular
npm install angular-translate
npm install angular-translate-loader-static-files
index.html中引用脚本及相应选择框
<script src="angular-1.6.8.js"></script>
<script src="angular-translate.min.js"></script>
<script src="angular-translate-loader-static-files.min.js"></script>
<script src="factory.js"></script>
<script src="controller.js"></script>
<select class="language-switching" ng-controller="LanguageSwitchingCtrl" ng-model="cur_lang" ng-change="switching(cur_lang)">
<option value="en">English</option>
<option value="cn">简体中文</option>
</select>
文件 angular-translate.min.js 是angular官方提供的国际化模块
文件 angular-translate-loader-static-files.min.js 模块是用来读取本地文件的模块,因为我们的翻译内容都是独立的 json 文件.
json文件格式
en.json : {“10”:”Login”,”11”:”Register”}
cn.json : {“10”:”Login”,”11”:”Register”}
模块引入
var app = angular.module('myApp', ['pascalprecht.translate'])
.config(['$translateProvider',function($translateProvider){
var lang = window.localStorage.lang||'cn'; //利用localstorage查询用户本地注册语言
$translateProvider.preferredLanguage(lang); //默认已注册的语言
$translateProvider.useStaticFilesLoader({
prefix: '/lang/', //prefix : 指定文件前缀 调用json文件
suffix: '.json' //suffix: 指定文件后缀 调用json文件
});
}]);
translate.controller.js
翻译模块
angular.module('myApp').controller('LanguageSwitchingCtrl', ['$scope', '$translate', function (scope, $translate) {
scope.switching = function(lang){
$translate.use(lang);
window.localStorage.lang = lang;
window.location.reload();
};
scope.cur_lang = $translate.use(); //默认select选项
}]);
factory.js
创建服务
angular.module('myApp').factory('Switch', ['$translate', function($translate) {
var Switch = {
Switch:function(key) {
if(key){
return $translate.instant(key);
}
return key;
}
}
return Switch;
}]);
login.controller.js
对应模块调用服务
angular.module('myApp').controller('LoginCtrl', ['$scope','Switch',
function($scope,Switch) {
$scope.login_title=Switch.Switch(10); //直接调用 Switch 服务的 Switch 方法,传入翻译ID 返回 翻译值.
}
]);
待续