Ionic + AngularJS angular-translate 国际化本地化解决方案
欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术分享/ionic-plus-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 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 国际化本地化解决方案
本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html 欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术 ...
- [Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面 最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来.当时猜测是因为angularjs与特效 ...
- Ionic + AngularJS
Ionic Framework Ionic framework is the youngest in our top 5 stack, as the alpha was released in lat ...
- Ionic/Angularjs 知识点解析
Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...
- angular项目国际化配置(ngx-translate)
原文 https://www.jianshu.com/p/7d1da3098625 大纲 1.认识ngx-translate 2.ngx-translate的配置步骤 3.ngx-translate的 ...
- JS魔法堂:不完全国际化&本地化手册 之 理論篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- JS魔法堂:不完全国际化&本地化手册 之 实战篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- JS魔法堂:不完全国际化&本地化手册 之 拓展篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- Cordova Ionic AngularJS
实践分享:开始用Cordova+Ionic+AngularJS开发App http://www.cocoachina.com/webapp/20150707/12395.html
随机推荐
- 内存分配(new/delete,malloc/free,allocator,内存池)
以下来源http://www.cnblogs.com/JCSU/articles/1051826.html 程序员们经常编写内存管理程序,往往提心吊胆.如果不想触雷,唯一的解决办法就是发现所有潜伏的地 ...
- Eclipse + Apache Axis2 发布SOAP WebService(三)第一个程序Hello Axis2 SOAP!
因为Axis2同时支持SOAP和RESTful的WebService开发. 我的目标主要是RESTful,这里简单记录一个SOAP的小例子: 原文地址:https://jingyan.baidu.co ...
- jsp生成war
安装java 环境,进入jsp所在目录,使用如下命令可将当前目录中所有文件打成到xss.war包中,正常的war包中还包含另外两个文件meta-inf,web-inf,在生成的时候,需要把这两个文件加 ...
- oracle 导出表结构信息
直接贴sql: select cols.table_name 表名, cols.column_name 列名, cols.data_type 字段类型, cols.data_length 长度, co ...
- offsetWidth clientWidth scrollWidth 三者之间的区别和联系
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
- 不吹不黑,关于 Java 类加载器的这一点,市面上没有任何一本图书讲到
类加载器第7弹: 实战分析Tomcat的类加载器结构(使用Eclipse MAT验证) 还是Tomcat,关于类加载器的趣味实验 了不得,我可能发现了Jar 包冲突的秘密 重写类加载器,实现简单的热替 ...
- 长度rem的使用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- svn的简单知识
svn的简单知识 一.简介: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统, 它的设计目标就是取代CVS.互联网上很多版本控制服务已从 ...
- iOS上实现圆角图片
UIImageView自带 //圆角设置 imageView.layer.cornerRadius = ;(值越大,角就越圆) imageView.layer.masksToBounds = YES; ...
- AC日记——[USACO09OCT]Bessie的体重问题Bessie's We… 洛谷 P2639
题目描述 Bessie像她的诸多姊妹一样,因为从Farmer John的草地吃了太多美味的草而长出了太多的赘肉.所以FJ将她置于一个及其严格的节食计划之中.她每天不能吃多过H (5 <= H & ...