浅析如何利用angular结合translate为项目实现国际化
前言
利用H5项目第一版本已经上线，话说有了第一期就有了第二期，这不要为第二期做准备了，老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能，好吧我表示没怎么接触过，这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉，于是乎就有了这篇文章的产生。其实没我什么事，我也是主动请缨说交给我，因为年底了嘛，也没什么事，不急不忙的，一天也乐得清闲，还不给自己找点事做，而且还能在做的过程中能学到东西，何乐而不为呢！Angular已盛行一时，但请恕我见识少，一直认为Angular是属于微软旗下，结果。。。。你懂的，不说了，回到话题。
话题
找到了官网有关Angular的APi，看其最新版本是1.3.9，貌似还有比此版本更高的，无所谓了，只要不影响实现就ok，下载的包里面有国际化文件夹却没有APi，此时第一想到的去github上瞧瞧，果不其然还真有，搜索【Angular translate】即可，幸好英语还算基本过关，关键时刻找点东西还是挺有帮助的。下面一步一步来看，别着急 ，由浅入深。
第一步
两个脚本文件必不可少，我喜欢用压缩的，看个人爱好，angular.min.js，angular-translate.min.js
第二步
我们开始利用开启angular装逼模式。
【第一次尝试】
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-translate.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('zh-cn', {
'hello': '你好',
});
$translateProvider.preferredLanguage('zh-cn');
}]);
</script>
</head>
<body>
<h1>{{hello | translate}}</h1>
</body>
</html>
上面我们要将hello翻译成中文你好，结果什么都没有，还没出错，是不是很神奇。
【注意】hello必须以字符串形式给出，要不然得不到你所预期。这么写就对了{{"hello" | translate}}
输出如下：
【第二次改进】
上面只是简单的开始，老大过来看，不错初步得到我想要的结果，我们项目就要实现这样的结果，但是这结果不太令人满意。
我们的场景是这样的：我们有存储各种语言的JSON文件，当页面加载时，获取用户的所使用的语言，加载该JSON文件，里面存储的是键值对，分别是对应的中文-》英文以及英文-》中文，若获取用户所使用的语言为英文你就将中文翻译成英文。反之亦然，好吧，原来是将翻译的键值对放在JSON文件，那就加载该文件不就得了，继续做呗。
在translate源码下载包里中找到loader-static-files脚本并引入该文件
测试代码，如下：
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-translate.min.js"></script>
<script src="~/Scripts/loader-static-files.js"></script>
<script type="text/javascript">
var app = angular.module("app", ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: '/il8n/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en-us');
}]);
</script>
</head>
<body>
<h1>{{"Hello" | translate}}</h1>
<h1>{{"xpy0928" | translate}}</h1>
</body>
</html>
上述中【prefix】为存储语言的JSON文件夹目录，【suffix】为我们需要请求的文件的扩展名即JSON。而【$translateProvider.preferredLanguage('en-us')】则是请求il8n文件夹下名为【en-us】的JSON文件。
接下来我们运行试试，擦，尼玛，给我原字符串输出，说好的翻译成中文呢？
再一看，擦，竟然没找到zh-cn的JSON文件，如下图！这个问题有点叼，开始我还以为是文件夹名【il8n】中的【l】写成【1】。
原来是无法请求JSON文件，必须添加映射，在VS 2013 express中添加对JSON的映射需进行如下操作：
（1）通过命令行到C:\Program Files(x86)\IIS Express文件夹
（2）继续命令行：appcmd set config /section:staticContent /+[fileExtension='.json',mimeType='application/json']
当然如果是发布在本地IIS中只需在Mime中添加映射以及应用配置程序中进行配置即可。
最终翻译成功如下：
【第三次升级终极版本】
做成这样老大应该满意了吧，赶紧欣喜的将老大叫过来大功告成啊，尼玛，终于完事了，好，要的就是这效果，非常不错，不过。。。心想难道这么做你还不满意还是不行，结果又被挑到刺了。
挑刺话题中：如上所示，{{"Hello" | translate}}，这么绑定的话，如果页面加载快还行，若是加载慢的话，那就把模板给显示出来了，太丑了，你再想想有没有办法规避这种行为。哈哈，其实我早就想到了，这么绑定会出现他担心的那个问题，我就是卖个关子而已，装装逼也是可以的嘛。用【ng-bind】解决不就ok了吗。心里早就有数，来继续走你。
分析中：[ng-bind]只能绑定在元素的属性中，例如这样<span ng-bind="text"></span>，咦，貌似不对，要是显示html内容，那该怎么办，强大的IDE【vs】的智能提示，显示有[ng-bind-html]，令人比较满意的分析。马上试试看。
更改为如下：
<h1 ng-bind-html="{{"Hello" | translate}}"></h1>
<h1 ng-bind-html="{{"xpy0928" | translate}}"></h1>
结果出错，看错误很明显是语法用错了，试试下面的
<h1 ng-bind-html="'Hello' | translate"></h1> <h1 ng-bind-html="'xpy0928' | translate"></h1>
这下也不行，不过不是语法的问题，如下图所示：
也可能出现如下错误：
[$sce:unsafe] Attempting to use an unsafe value in a safe context
结果一查资料却是要添加一个【angular-sanitize.min.js】脚本文件，并且依赖于它。继续添加此脚本文件看看。结果如我预期。
【注意】添加此脚本文件之后，要在模块中对此脚本文件进行依赖。如下：
var app = angular.module("app", ['pascalprecht.translate', 'ngSanitize']);
我们反过来将中文转换为因为试试看，进行如下修改
$translateProvider.preferredLanguage('en-us');
<h1 ng-bind-html="'你好' | translate"></h1>
<h1 ng-bind-html="'博客园' | translate"></h1>
结果显然是成功的，如下：
总结
利用angular进行国际化转换时利用【ng-bind-html】来进行语言的翻译是接近几乎比较完美的方案，不会像利用【{{}}】模式，当页面加载缓慢时导致页面太丑。但是利用【ng-bind-html】还是有点问题，，当刷新总有一个切换的过程，比如从中文【你好】切换到英文【hello】，这样过程你是可以看见的，暂时未想到更好的解决方案，期待你更好的解决方案。整个转换个过程必须要引用以下四个脚本文件。
<script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/angular-translate.min.js"></script> <script src="~/Scripts/loader-static-files.js"></script> <script src="~/Scripts/angular-sanitize.min.js"></script>
参考资料
【translate api】：translate api
【translate new letter】：translate new letter
【angular sanitize/ng-bind-html not working】：angular sanitize/ng-bind-html not working
【translate download】：translate github
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持我们！
相关推荐
-
Angular2中如何使用ngx-translate进行国际化
相较于AngularJS中的ng-translate, angular2也有适合自己的国际化模块,就是ngx-translate. 项目地址:https://github.com/ngx-translate/core 使用angular-cli初始化项目: ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-translate/core npm install --save @ngx-translate/http-lo
-
AngularJs 国际化（I18n/L10n）详解
一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言.文化的本地化的方法的规范.本地化(Localization),简称L10n,一个使得应用.文本有适应特殊的文化或者语言市场的能力的规范.对于应用开发者,使一个程序国际化,意味着需要从程序中抽取所有字符串和其他区域较为特别的地方(例如日期和货币格式).使一个程序本地化,意味着需要提供根据I18n
-
详解使用angular-cli发布i18n多国语言Angular应用
在模板html标签中增加i18n <h1 i18n>Hello world!</h1> 使用ng命令产生xlf格式的message.xlf文件 $ ng xi18n --output-path src/i18n 命令执行后,生成 src/i18n/messages.xlf 文件 <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xml
-
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
前言 本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: npm 安装 ngx-translate 模块 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 在 Angular 项目配置 app.module.ts 添加 import { TranslateLoader, Tr
-
浅析如何利用angular结合translate为项目实现国际化
前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎么接触过,这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉,于是乎就有了这篇文章的产生.其实没我什么事,我也是主动请缨说交给我,因为年底了嘛,也没什么事,不急不忙的,一天也乐得清闲,还不给自己找点事做,而且还能在做的过程中能学到东西,何乐而不为呢!Angular已盛行一时,但请恕
-
Angular 项目实现国际化的方法
正如angular官网所说,项目国际化是一件具有挑战性,需要多方面的努力.持久的奉献和决心的任务. 本文将介绍angular项目的国际化方案,涉及静态文件(html)和ts文件文案的国际化. 背景 Angular: 5.0 Angular Cli: 1.6.1(1.5.x也可以) NG-ZORRO: 0.6.8 Angular i18n i18n模板翻译流程有四个阶段: 在组件模板中标记需要翻译的静态文本信息(即打上i18n标签). Angular的i18n工具将标记的信息提取到一个行业标准的翻
-
Angular 项目实现国际化的方法
目录 背景 Angular i18n 部署翻译文件 ts文件文案和NG-ZORRO框架文案翻译 总结 正如angular官网所说,项目国际化是一件具有挑战性,需要多方面的努力.持久的奉献和决心的任务.本文将介绍angular项目的国际化方案,涉及静态文件(html)和ts文件文案的国际化. 背景 Angular: 5.0 Angular Cli: 1.6.1(1.5.x也可以) NG-ZORRO: 0.6.8 Angular i18n i18n模板翻译流程有四个阶段: 在组件模板中标记需要翻译的
-
利用PM2部署node.js项目的方法教程
前言 大家在开发中应该发现了,如果直接通过node app来启动,如果报错了可能直接停在整个运行,supervisor感觉只是拿来用作开发环境的.再网上找到pm2.目前似乎最常见的线上部署nodejs项目的有forever,pm2这两种.下面本文将详细介绍利用PM2部署node.js项目的方法教程,需要的朋友们下面来一起看看详细的介绍: 使用场合: supervisor是开发环境用. forever管理多个站点,每个站点访问量不大,不需要监控. pm2 网站访问量比较大,需要完整的监控界面. P
-
C++利用多态实现职工管理系统(项目开发)
分析 首先看一下这个项目的文件: 主要分为两部分: 主体部分: main.cpp和workManager.h,workManager.cpp职工部分(这里采用多态的方式编写): 主要是worker.h和worker.cpp 三种职位:boss,employee,manager 经过分析是否大概知道了其中各部分的意思呢? 看起来这里面有很多,但是正是这种多个文件编写才时代码更加简洁. 所以在正式写项目之前一定要先考虑好整体架构,在进行编写. 项目整体架构: 这个项目的难度并不大,主要是要学会这个项
-
利用Vue3 创建Vue CLI 项目（一）
目录 一.官方文档 二.创建Vue CLI项目 1.安装Vue CLI 2.创建web应用 3.启动web应用 三.Vue CLI项目结构讲解 一.官方文档 Vue3文档 - vuejs https://www.vue3js.cn/docs/zh/ Vue核心功能:数据绑定 Vue CLI文档 https://cli.vuejs.org/zh/guide/ Vue CLI = Vue.js + 一堆组件 二.创建Vue CLI项目 1.安装Vue CLI 淘宝镜像 SQL: npm get re
-
利用Vite搭建Vue3+ElementUI-Plus项目的全过程
目录 创建项目 初始化项目 添加依赖并运行 添加路由 添加依赖 添加路由配置文件 在main.js中添加路由 添加Home页面进行测试 添加ElementUI-Plus 安装element-plus依赖 引入element-plus依赖 引入Element Icon 添加依赖 修改element的主题颜色 总结 本文主要记录使用Vite搭建一个Vue3+ElementUI-Plus,以及集成Vue Router的过程.本次搭建过程的Nodejs版本为 V16.14.2 创建项目 初始化项目 使用
-
详解利用Angular实现多团队模块化SPA开发框架
0.前言 当一个公司有多个开发团队时,我们可能会遇到这样一些问题: 1.技术选项杂乱,大家各玩各 2.业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现) 3.业务壁垒,业务之间的互通变得比较麻烦 4.部署方式复杂,多个域名(或IP地址)访问,给用户造成较大的记忆难度 5.多套系统,风格难以统一 6.等等... 当然,解决方式有不少.以下就来讲解下我们这边的一种解决方案. 1.思路 Angualr Angular(注:非AngularJS) 是流行的前端
-
如何利用@angular/cli V6.0直接开发PWA应用详解
什么是PWA PWA(Progressive Web App)利用TLS,webapp manifests和service workers使应用程序能够安装并离线使用. 换句话说,PWA就像手机上的原生应用程序,但它是使用诸如HTML5,JavaScript和CSS3之类的网络技术构建的. 如果构建正确,PWA与原生应用程序无法区分. PWA 的主要特点包括下面三点: 可靠 - 即使在不稳定的网络环境下,也能瞬间加载并展现 体验 - 快速响应,并且有平滑的动画响应用户的操作 粘性 - 像设备上的
-
高效利用Angular中内置服务$http、$location等
AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结. 1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absU