Ionic + AngularJS angular-translate 国际化本地化解决方案

一、手动切换语言

1.在app.js文件中首先要加上一个参数:

angular.module(’passbox’,[‘ionic’,’pascalprecht.translate’])

2.需要引用js文件

<script src=”js/angular-translate.js”></script>

3.在edit.html文件中加入点击切换按钮:

<button ng-click=”changeLanguage(‘en’)” translate=”Language_en”>

<button ng-click=”changeLanguage(‘zh’)” translate=”Language_zh”>

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。

三、这个自动获取手机语言一加上去,瞬间感觉软件高大上了好多~

参考教程:通过插件来控制切换语言的:https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/

这个更详细一点:http://angular-translate.github.io/docs/#/guide/07_multi-language

时间: 2024-08-29 14:08:17

Ionic + AngularJS angular-translate 国际化本地化解决方案的相关文章

[转]Ionic + AngularJS angular-translate 国际化本地化解决方案

本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html 欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术分享/ionic-plus-angularjs-angular-translate-国际化本地化解决方案/ 一.手动切换语言 1.在app.js文件中首先要加上一个参数: ? 1 angular.module(’passbox’,[‘ionic’,’pascalprecht.translate’])

[Angularjs]angular ng-repeat与js特效加载先后导致的问题

写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效的那些代码加载的先后顺序造成的.有了这样的猜测,就有查找解决方案的方向了. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]ng-show和ng-hide [Angularjs]视图和路由(一) [Angularjs]视图和路由(二) [Angular

Ionic + AngularJS

Ionic Framework Ionic framework is the youngest in our top 5 stack, as the alpha was released in late November 2013. Built on top of the popular AngularJS framework from Google, Ionic utilizes AngularJS to provide the application structure, while Ion

【Ionic+AngularJS 开发】之『个人日常管理』App(一)

写在前面的话 过去一年自己接触了不少手机前端开发,得益于现在手机性能的提升和4G普及,感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了.新年伊始,对自己2016年所学知识做一个阶段性总结,记录一个自制的"小而萌"Hybrid App开发历程,共勉! [扩展阅读] 企业移动应用开发 混合开发成香饽饽 2016年JavaScript领域中最受欢迎的"明星"们 Hybrid APP混合开发的一些经验和总结 App预览 (*模糊化的个人数据) 简介 个人日常管

AngularJs Angular数据类型判断

AngularJs Angular数据类型判断 angular.isArray 判断括号内的值是否为数组. 格式:angular.isArray(value); value: 被判断是否为数组的值. --------------------------------------------------------------- angular.isDate 判断括号内的值是否是一个时间. 格式:angular.isDate(value); value:被判断是否为时间的值. -----------

iOS开发-Xcode6应用程序国际化本地化

[置顶] iOS开发-Xcode6应用程序国际化本地化 分类: iOS开发2014-10-11 19:44 3116人阅读 评论(0) 收藏 举报 ios应用国际化本地化xcodeiOS国际化终极教程 应用程序国际化和本地化 本文来自:http://blog.csdn.net/yangbingbinga/article/details/39998673转载请注明出处 1.国际化.首先创建一个工程,在  Localizations里面添加你需要支持的语言 2.然后对要国际化的东西  如,故事板 右

Netsuite本地化解决方案

多年来,中小型企业在中国面临着一个艰难的选择:他们是选择一个成熟的,但缺少符合中国会计准则的财务功能的国际ERP系统好,还是他们部署本地开发的系统,像用友和金蝶,但功能上具有有限性和系统灵活性的好呢?! 但现在,国内中小企业可以考虑另一种选择,不仅使他们能够享受一个集成全部业务功能的ERP系统,也可以直接生成完全符合中国会计准则的财务报告. 这种解决方案是基于云计算技术的ERP解决方案,称为"软件即服务".云ERP是提供软件作为一种服务,如NetSuite的ERP系统,比传统的系统平台

iOS 优化内存(三)iOS应用程序多语言本地化解决方案

iOS应用程序多语言本地化解决方案 最近要对一款游戏进行多语言本地化,在网上找了一些方案,加上自己的一点点想法整理出一套方案和大家分享! 多语言在应用程序中一般有两种做法: 一.程序中提供给用户自己选择的机会: 二.根据当前用户当前移动设备的语言自动将我们的app切换对应语言. 第一种做法比较简单完全靠自己的发挥了,这里主要讲第二种做法,主要分一下几点: 1.本地化应用程序名称 2.本地化字符串 3.本地化图片 4.本地化其他文件 1.本地化应用程序名称 (1)点击"new file"

NetSuite中国授权商-本地化解决方案的实施案例!

全球的中型企业存在一个显著趋势: 越来越多的国际化中小企业将中国作为其全球业务的基地.在过去,许多国际企业在进入中国之前往往要在美国或欧洲创建总部,然而如今的国际化中型企业在上海或北京创建总公司变得十分常见.考虑到这些城市在全球经济日趋增长的影响力,这种现象并不令人吃惊. 然而中国境外的业务扩建为公司带来的众多挑战也是不容小视的.其中挑战之一在于信息管理系统:许多中国的公司使用像用友和金蝶这样本土开发的ERP或财务管理系统去管理他们的财务和客户数据,是因为这些系统的开发符合中国的通用会计准则.但