最近的app开发中需要考虑多语言国际化的问题，经查资料，目前大部分使用的是angular-translate.js这个组件，网站说明是这个:https://angular-translate.github.io
具体步骤：
1.下载angular-translate.min.js和angular-translate-loader-static-files.min.js,并在index.html中添加引用
<!--多语言模块-->
<script src="lib/angular-translate/angular-translate.min.js"></script>
<script src="lib/angular-translate/angular-translate-loader-static-files.min.js"></script>
2.设置依赖项
var app = angular.module("ionicApp", ["ionic","pascalprecht.translate"]);
3.配置多语言，此处是加载本地化的json文件，在www目录下建立languages目录,有两个json文件：en.json和zh.json
{
"LOGIN_REGISTER": "Login/Register",
"A" : "电动自行车A",
"B" : "电动三轮车B",
"MyLa":
{
"length" : ,
"values":[
{
"name" : "Huanhuan","value" : ""
},
{
"name" : "Alex","value" : ""
}
]
}
}
en.json
{
"LOGIN_REGISTER": "登录/注册",
"A" : "电动自行车",
"B" : "电动三轮车",
"MyLa":{
"length" : ,
"values":[
{
"name" : "郭欢欢","value" : ""
},
{
"name" : "大海","value" : ""
}
]}
}
zh.json
这两个文件就是我们的多语言文件，相关内容应该日后都放在这里。
4.加载多语言文件，这个是需要提前加载的（貌似也可以延迟加载,还没研究到)
app.config(function($locationProvider,$stateProvider, $urlRouterProvider, $ionicConfigProvider, $sceDelegateProvider, $compileProvider,$translateProvider)
{
$ionicConfigProvider.tabs.style("standard");
$ionicConfigProvider.tabs.position("bottom"); $ionicConfigProvider.navBar.alignTitle("center"); $ionicConfigProvider.views.transition("ios");
$ionicConfigProvider.views.maxCache();
$ionicConfigProvider.views.swipeBackEnabled(false); $ionicConfigProvider.backButton.text("");
$ionicConfigProvider.backButton.previousTitleText(false); $ionicConfigProvider.templates.maxPrefetch();
/*
Url replace by dynamic load urls.json 2016.10.25
*/
$urlRouterProvider.deferIntercept();
$urlRouterProvider.otherwise('tab/home');
$locationProvider.html5Mode({enabled: false});
$stateProviderRef = $stateProvider;
/*
添加多语言设置
*/
$translateProvider.useStaticFilesLoader({
prefix: 'languages/',
suffix: '.json'
});
$translateProvider.use('en');
})
这里的prefix，suffix和en三个参数，实际上会合成一个类似{prefix}{en}{suffix}的字符串，即languages/en.json,也就是我们的多语言文件地址
5.使用指令实现翻译效果，比如我们在view中有如下一段代码，LOGIN_REGISTER实现不同语言下的显示。
<div class="sign" ng-if=!$root.user>
<a href="#/login/">
<h2 translate>LOGIN_REGISTER</h2>
</a>
</div>
由于我们在第4步中默认使用的是英文en,所以第一次启动的时候对应的内容是en.json中LOGIN_REGISTER对应的值"Login/Register"
6.语言的切换，我们设置两个按钮事件，对应中文/英文的切换
$scope.chinese= function()
{
$translate.use("zh");
};
$scope.english= function()
{
$translate.use("en");
};
每点击下中文按钮，LOGIN_REGISTER就即刻变为zh.json中对应的 "登录/注册"，点下英文按钮，则写换到"Login/Register"
这样我们基本完成了单个值的多语言的实现.