1.引入angular-translate.js
2.在script/base文件夹下准备cn.json和en.json两个json文件,用来配置中英文键
//cn.json
{
"你好!": "你好!",
"国际化": "国际化"
}
//en.json
{
"你好!": "Hello!",
"国际化": "Internationalization"
}
3.在app.js中注入依赖
var app = angular.module('myApp', ['pascalprecht.translate']) //把 angular-translate 模块以一个依赖项加载进来
.config(['$translateProvider', function ($translateProvider) {
var lang = window.localStorage.lang || 'cn'; //获取上一次的语言(读取缓存),第一次进入默认显示中文
$translateProvider.preferredLanguage(lang); //告诉 angular.js 哪种语言是默认已注册的语言.
$translateProvider.useStaticFilesLoader({
prefix: '/script/base', //指定文件前缀
suffix: '.json' //指定文件后缀
});
}]);
4.放一个选择语言的下拉列表框
<div>
<div ng-click="changeLanguage('cn')"><span>中文</span></div>
</div>
<div>
<div ng-click="changeLanguage('en')"><span>English</span></div>
</div>
5.在appController.js中切换语言
angular.module('myApp').controller('appCtrl', [
'$scope', '$translate', function (scope, $translate) {
scope.changeLanguage= function(lang){
$translate.use(lang); //选择显示什么语言,lang对应的是某个语言的键
window.localStorage.lang = lang; //在缓存中存储当前语言
};
scope.cur_lang = $translate.use();
}]);
6.使用
//html
<span>{{'你好'|translate}}</span>
//js
var info = $filter("translate")("你好!");