Ionic + AngularJS angular-translate 国际化本地化解决方案
2015-03-13 11:12
363 查看
欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术分享/ionic-plus-angularjs-angular-translate-国际化本地化解决方案/
一、手动切换语言
1.在app.js文件中首先要加上一个参数:
2.需要引用js文件
3.在edit.html文件中加入点击切换按钮:
4.在controllers.js文件edit的控制器中加入切换的函数:
5.在app.js文件中先定义变量:
之后再写函数方法:
二、自动获取手机语言为默认语言
1.在app.js文件中首先要加上一个参数:
2.需要引用js文件
3.在app.js文件中添加参数:
4.翻译的变量可一根据上面那样来自己定义,也可以通过路由来改变(但是经过测试这种方法不适用在手机上,模拟机上都测试失败(增加第五条为手机可以识别的)。):
【1】可以将每个翻译文件放到/language/中,比如/languages/en.json /language/zh.json
【2】然后通过useStaticFilesLoader来配置:
【3】需要引用js文件
【4】注意:
json文件格式要注意不可以有注释内容;
引用的js文件需要的是静态的文件angular-translate-loader-static-files.min.js。
5.这是经过测试研究后又得到的经验,上边路由方法其实是不可行的,可以将json文件改为js文件,在index.html文件中引用,接着在app文件中:
当然这种方法也不需要再引入<script src=”js/angular-translate-loader-static-files.min.js”></script>这个文件了.
三、这个自动获取手机语言一加上去,瞬间感觉软件高大上了好多~
参考教程:通过插件来控制切换语言的:https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/
这个更详细一点:http://angular-translate.github.io/docs/#/guide/07_multi-language
一、手动切换语言
1.在app.js文件中首先要加上一个参数:
angular.module(’passbox’,[‘ionic’,’pascalprecht.translate’])
2.需要引用js文件
<script src=”js/angular-translate.js”></script>
3.在edit.html文件中加入点击切换按钮:
<button class="button" ng-click="changeLanguage('en')" translate="Language_en"></button> <button class="button" ng-click="changeLanguage('zh')" translate="Language_zh"></button>
4.在controllers.js文件edit的控制器中加入切换的函数:
.controllers(‘edit’,[‘$scope’ ,function($scope, $translate){ $scope.changeLanguage = function (langkey) { $translate.use(langkey); }; }])
5.在app.js文件中先定义变量:
var translationsEN = { Language_en: 'english', Language_zh: 'chinese', }; var translationZH = { Language_en: '英文', Language_zh: '中文', };
之后再写函数方法:
angular.model(‘passbox’,[‘ionic’,’pascalprecht.translate’]); .config(function($stateProvider,$translateProvider){ $translateProvider.translations(‘en’,translationEN); $translateProvider.translations(‘zh’,translationZH); $translateProvider.preferredLanguage(‘en’);//首选语言 $translateProvider.fallbackLanguage(‘en’); }
二、自动获取手机语言为默认语言
1.在app.js文件中首先要加上一个参数:
angular.module(’passbox’,[‘ionic’,’pascalprecht.translate’]);
2.需要引用js文件
<script src=”js/angular-translate.js”></script><script src=”js/angular-translate-loader-static-files.min.js”></script>
3.在app.js文件中添加参数:
.config(function($stateProvider,$translateProvider){ $translateProvider.registerAvailabeLanguageKeys([‘en’,’zh’],{ ‘en-*’:’en’, ‘zh-*’:’zh’ }); $translateProvider.determinePreferredLanguage();//这个方法是获取手机默认语言设置
4.翻译的变量可一根据上面那样来自己定义,也可以通过路由来改变(但是经过测试这种方法不适用在手机上,模拟机上都测试失败(增加第五条为手机可以识别的)。):
【1】可以将每个翻译文件放到/language/中,比如/languages/en.json /language/zh.json
【2】然后通过useStaticFilesLoader来配置:
$translateProvider.useStaticFilesLoader({ Prefix:’/languages/’, Suffix:’.json’ });
【3】需要引用js文件
<script src=”js/angular-translate-loader-static-files.min.js”></script>
【4】注意:
json文件格式要注意不可以有注释内容;
引用的js文件需要的是静态的文件angular-translate-loader-static-files.min.js。
5.这是经过测试研究后又得到的经验,上边路由方法其实是不可行的,可以将json文件改为js文件,在index.html文件中引用,接着在app文件中:
$translateProvider.translations('en',_translate_EN); $translateProvider.translations('zh',_translate_ZH); $translateProvider.translations('ja',_translate_JA); $translateProvider.registerAvailableLanguageKeys(['en','zh','ja'],{ 'en-*': 'en', 'zh-*': 'zh', 'jp-*': 'ja' }); $translateProvider.determinePreferredLanguage();
当然这种方法也不需要再引入<script src=”js/angular-translate-loader-static-files.min.js”></script>这个文件了.
三、这个自动获取手机语言一加上去,瞬间感觉软件高大上了好多~
参考教程:通过插件来控制切换语言的:https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/
这个更详细一点:http://angular-translate.github.io/docs/#/guide/07_multi-language
相关文章推荐
- Ionic + AngularJS angular-translate 国际化本地化解决方案
- [转]Ionic + AngularJS angular-translate 国际化本地化解决方案
- angular.js 国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境
- 关于Angular.js和ionic配合使用ios和安卓的tab等不统一的解决方案
- angularjs/ionic $resource 出现 preflight的解决方案
- angular.js 国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境
- angular.js 国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境
- AngularJS 国际化——Angular-translate
- ZH奶酪:ionic+angularJS+cordova(FileTransfer)上传图片【移动端】
- Code Organization in Large AngularJS and JavaScript Applications(waititng for translate)
- angularjs ng-option ie issue解决方案
- Angularjs+ionic 学习(一):Angularjs常用指令
- mac下 搭建Cordova+ionic+AngularJs开发环境
- ionic + angularJS $ionicHistory接口文档
- ASP.Net本地化/国际化解决方案原理和代码示例
- 为Cordova + Ionic + AngularJS 应用添加微信分享功能
- ionic+AngularJS欢迎引导界面
- ASP.Net本地化/国际化解决方案原理和代码示例
- ASP.Net本地化/国际化解决方案原理和代码示例
- 为Angularjs ngOptions加上index解决方案 推荐