ionic国际化 - translte

Ionic与Angular实现中英双语国际化教程 在移动互联网迅速发展的2013年,原生应用开发成为了主流,然而原生应用开发成本高昂且难以维护。为了突破这些限制,开发者Braden Parker联合Max Lynch和Adam Bradley创建了Ionic框架,旨在为开发者提供一个跨平台的解决方案,让他们能够使用单一的代码库来构建在iOS、Android和Web上运行的应用。Angular自从2016年从AngularJS(也被称为Angular 1.x)进行大版本迭代后,已经经历了多个版本的更新和发展。 阅读详情

最近在整理项目中的国际化json文件,觉得这个需要总结一下。

目前我们是用ionic做的项目,之前在网上找的方案,是直接用angular的translate服务,配了两个json文件,一个中文包,一个英文包,结果在ionic serve 的时候没问题,但是打包在手机上运行的时候却行不通,页面显示全是一堆国际化的key,简直是醉了。

百度什么的查了一下,发现这个问题是存在的,目测是ionic的bug。于是换了一种方案,如下:

(function () {
  'use strict';

  angular.module('service.T',[])
    .factory('T', ['$translate',T]);

  function T($translate) {
    var T = {
      T:function(key) {
        if(key){
          return $translate.instant(key);
        }
        return key;
      }
    }
    return T;
  }
})();
这是用$translate封装的一个服务,方便使用,在controller中调用的时候直接T.T(KEY),就ok。

第一步:在app.js中进行初始化:
      //配置国际化(angular-translate)                //$translateProvider.useSanitizeValueStrategy('sanitize');
      //translate安全策略
      $translateProvider.translations('ZH', testProvider.$get().providerzh);
      $translateProvider.translations('EN', testProvider.$get().provideren);
      $translateProvider.preferredLanguage('EN');//首选语言
      $translateProvider.fallbackLanguage('EN');
第二部:在www目录下新建一个i18n的文件夹,先创建一个一个js文件,我这里命名问multilang.js,文件内容为:
angular.module('dlp.constants',[])
    .provider('test', ['translationZH', 'translationEN', function (translationZH, translationEN) {
        this.$get = function () {
            return {
                providerzh: translationZH,
                provideren: translationEN
            };
        }
    }]);
第三步:在i18n目录下创建两个js文件,分别命名为en.js和zh.js.这里以en.js为例:
angular.module('dlp.constants')
  .constant('translationEN',
    {
      "aboutUs": {
        "title": "About us",
        "name": "AlphaMoney",
        "version": "v1.0"
      }
  })
zh.js 同理
如果还想配置更多语言,请添加就可。
angular 实现网站多语言-国际化 这是一个用angular写的一个多语言的demo,下载代码就可以完美运行,请给位朋友放心使用。 立即下载

相关推荐

i18n-ionic-tutorial:有关如何对Ionic应用程序进行国际化和本地化的教程的源代码

i18n离子教程 该项目是有关如何通过使用Angular Translate,Angular动态语言环境和Cordova全球化插件对Ionic应用程序进行国际化和本地化的教程的源代码。 在哪里可以找到本教程 完整的教程发布在。 依赖,运行和构建 安装NodeJS依赖项 运行npm install以安装所有需要的依赖项 安装Javascript依赖项 运行bower install以安装所有需要的依赖项。 运行应用 使用grunt serve -l在浏览器中运行该应用程序,并注意代码中的更改 或者 使用grunt serve可以仅运行应用程序以进行浏览器预览 或者 使用grunt serve --lab在两个平台上的浏览器中同时运行该应用程序。 添加平台 $ grunt platform:add: < platform> 支持的Cordova平台: $ grunt platform:a

ionic 对话框:深入探索与最佳实践

在Ionic中,对话框通常用于显示警告、提示或请求用户输入信息。:显示警告信息,并允许用户确认或取消。:请求用户输入信息,并允许用户提交或取消。:提供一组操作选项,用户可以从中选择。Ionic允许您通过CSS自定义对话框的样式。Ionic对话框作为一款强大的UI组件,在移动应用开发中扮演着重要角色。通过本文的介绍,相信您已经对Ionic对话框有了更深入的了解。在实际开发中,结合本文所述的技巧和最佳实践,相信您能设计出更优秀的移动应用界面。

lsx202406的博客 418

Ionic+Angular实现中英国际化示例代码.zip

ionic+Angular实现中英国际化示例代码

Ionic国际化解决方案

1. 核心内容 使用Angular2的国际化(i18n)库:ngx-translate 官网地址:http://www.ngx-translate.com/ GitHub地址:https://github.com/ngx-translate/core 官网和GitHub都有详细的使用说明,也有demo可供参考。下面大体介绍一下使用办法。 2. 安装ngx-t...

weixin_33739541的博客 281

MT4-EA自动化交易研究笔记(2022-04-22)

自从接触到mt4的EA自动化交易,更让我这个10多年的老程序员看到了曙光,目前来看也确实出了一点成果,只是是否能稳定盈利有待时间的考验,所以开此专栏,一来做做记录与分析,更好的优化我的EA,二来也希望能与更多的高手交流,以完善我的交易系统

t35254056的博客 2291

【技术解析】华为智算中心:昇腾AI算力与无损网络如何驱动大模型训练

本文深入解析了华为智算中心如何通过昇腾AI算力与超融合以太无损网络的协同,驱动千亿参数大模型的高效训练。昇腾NPU提供专用计算引擎,而基于RoCE的无损网络则通过PFC、ECN等技术确保万卡集群间的高带宽、零丢包通信,实现算力利用率最大化,解决大规模AI训练的核心瓶颈。

weixin_29311017的博客 194

Ionic4国际化实战

Ionic4国际化实战背景实现效果前置条件国际化实现过程1、准备资源文件2、修改app.module.ts3、在所有需要显示语言元素的页面中文本的双向绑定中使用translate,如下所示:3、实现语言切换 背景 现在很多企业都早布局国际化战略,而且国际化也是大势所趋。在各种App大行其道的当下,国际化也是很多开发者要考虑的问题之一。对于h5小规模团队,个人开发者使用Ionic进行App开发还是个...

分享技术,传播知识! 1612

C++ 核电站

问题描述 一个核电站有n个放核物质的坑,排列在一条直线上。如果连续m个坑中放入核物质就会发生爆炸,所以某些坑中不能放核物质。 本题的任务:对于给定的n和m,求不发生爆炸的放置核物质的方案总数。 输入格式 第一行两个正整数n和m,之间用一个空格隔开。2≤n≤50,2≤m≤5。 输出格式 一行一个正整数,表示方案总数。 输入样例 4 3 输出样例 13 数据规模与约定 2≤n≤50,2≤m≤5 CODE #include<bits/stdc++.h> using namespace

HybridCOW_HORSE的博客 1804

Ionic + Angular 实现国际化

Ionic + Angular 实现国际化

Lyrelion的博客 1139

【变化检测】变化检测相关数据集+代码+论文合集

光学影像变化检测领域数据集(有label的,无label的)、高光谱影像变化检测领域数据集、3D变化检测领域数据集、传统变化检测算法、深度学习变化检测算法、SAR变化检测算法、高光谱变化检测算法论文及代码等资源。

向上生长的程序媛的博客 2089

手机VPN的连接方法分享

6、返回到VPN页面,可以看到刚刚新添加的VPN,点击开启VPN后面的开关。5、在打开的添加VPN的页面中输入VPN的信息后点击右上角的“保存”按钮。7、待VPN开关开启后,可以看到添加的VPN正在连接的提示信息了。2、在打开的小米手机设置页面中点击“更多连接方式”的菜单项。3、然后在打开的更多连接方式页面中点击VPN的菜单项。4、在打开的VPN设置页面中点击“添加VPN”的按钮。1、首先在手机屏幕左右的滑动,找到手机的设置图标。

惠惠软件 3万+

Ionic i18n国际化解决方案(ngx-translate)

i18n,即“国际化”,是指根据App使用环境不同,调用不同的语言包在页面展示。可以是用户设置语言,也可以是跟随系统语言。 下面,我们在Ionic中加入i18n国际化,请准备好你的项目了! 1.核心内容 使用Angular7的国际化(i18n)库:ngx-translate 官网地址:http://www.ngx-translate.com/ GitHub地址:https://github.com/ngx-translate/core ngx-translate官网 ng...

学无止境! 无休无止! 1108

PyCharm 怎么不升级直接使用Jupyter Notebook

在PyCharm 中需要升级到 PyCharm Professional 版本,才能直接使用 Jupyter Notebook。从截图来看,Jupyter Notebook 已经成功启动,并且正在运行。这将在默认网络浏览器中打开一个新的标签页,显示文件浏览器界面。可以在这里创建和编辑。文件添加到 PyCharm 项目中,并使用纯文本编辑功能进行修改。支持与外部工具集成,可以配置它以调用命令行工具或脚本来启动。,参数可以根据需要设置,工作目录设置为项目根目录。,你仍然可以在本地环境中安装和运行。

Davina_yu的博客 996

Ionic 5 社交网络应用开源项目介绍

Ionic 5 社交网络应用开源项目介绍 该项目是一个基于Ionic 5框架的社交网络应用的开源项目,主要使用TypeScript语言进行开发,同时也包含了HTML、SCSS和JavaScript等编程语言。 核心功能 组件和模板:提供了丰富的组件和模板,方便开发者快速构建移动应用。 原生组件:整合了原生组件,使得应用可以更好地利用移动设备的功能。 ngrx:使用ngrx进行状态管理,有助于维护...

gitblog_00453的博客 438

AUTOSAR TcpIp模块 以太网配置开发2

someip协议之tcpIp协议

汽车电子电气 1085

**YOLOv11性能突破:基于YOLOv10-PSA注意力机制的目标检测革命性升级**

购买即可解锁300+YOLO优化文章,并且还有海量深度学习复现项目,价格仅需两杯奶茶的钱,别人有的本专栏也有!

m0_71589036的博客 196

ionic3 显示html内容,ionic3 国际化 转义 html

import { DomSanitizer } from '@angular/platform-browser';//引入export class SeetablePage {public detail=" 请求内容不存在";//这里是HTML样式的string 这里可以添加获取过来的json 内容当json 里带有html 标签的时候直接放入到页面是不可用的//引入 要在js 内获取json 内...

weixin_39567222的博客 332

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

ionic3 国际化

http://www.cnblogs.com/huangenai/p/6868173.html 按上面这个网站的步骤整一遍, 但是ionic3 会报错 所以 在 import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { LoginPage }...

weixin_30413739的博客 208

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

AngularJS 国际化——Angular-translate

对于一个用户群面向全球的的应用来说,不得不考虑国际化的问题。当然,即便是刚刚起步的小应用,如果有心搞大,也应该提前设计国际化的方案。 本篇讲述使用AngularJS构建的应用的简单国际化方案,准确的说,是国际化服务.... i18n与l10n i18n是Internationalization得缩写,取第一个字母和最后一个字母,以及中间省略的字母数目,即i18n,类似的l1...

xingoo 349

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

Ionic学习笔记13 国际化

插件网址: http://ngcordova.com/docs/plugins/globalization/ 安装插件 cordova plugin add cordova-plugin-globalization 获得语言 module.controller('MyCtrl', function($cordovaGlobalization) { $cordovaGl...

猿来这样-谢厂节的博客 675

ionic2 基于ngx-translate实现多语言切换,翻译

介绍 ngx-translate 是Angular 2+的国际化(i18n)库,在github的地址是箭头 https://github.com/ngx-translate/core 将ngx-translate  使用与ionic2 项目中,实现多语言的切换。 1.安装ng2-translate 在命令提示符中进入到项目目录下,输入以下 回车。 npm install ng2-translat...

weixin_34075551的博客 287

angular 国际化移动端可以使用

1 安装translate:执行bower install angular-translate

jiana227的专栏 1796

tradingview使用心得

因为公司目前是在做一个交易所的项目,页面中需要用到k线图,之前用了echart的k线,太过简陋了,参考了另外几个同级网站,决定用tradingview这个专业的股票交易所类的图表库。 从上周开始就研究tradingview,一直到昨天才算是勉强能够在本地运行,真的是不容易。下面来说说使用过程中遇到的一些坑。 1、tradingview虽然是开源免费,可也是仅限于一些基本的图表服务,但这也基本上够用...

jacoby_fire的博客 2万+

封装一个丝滑的聊天框组件

这里没有写滚动条的处理逻辑,手写一下: 用ref绑定滚动条,发送消息or拉取历史记录,需要计算滚动条滚动的高度并作出对应处理。应公司业务要求,需要做个聊天机器人,要适应不同的业务场景,大概就跟淘宝客服类似,发送消息,机器人自动回复。

jacoby_fire的博客 2万+
上一篇: 使用ionic自带的push notification
下一篇: 移动端适配方案
jacoby_fire
博客等级 码龄10年 231粉丝 32原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值