对于一个用户群面向全球的的应用来说,不得不考虑国际化的问题。当然,即便是刚刚起步的小应用,如果有心搞大,也应该提前设计国际化的方案。

本篇讲述使用AngularJS构建的应用的简单国际化方案,准确的说,是国际化服务....

i18n与l10n

i18n是Internationalization得缩写,取第一个字母和最后一个字母,以及中间省略的字母数目,即i18n,类似的l10n是Localization得意思。

通常i18n是国际化的意思,就是在不改变源码的情况下,通过某些简单的配置就能适应不同的语言环境。

l10n,则是本地化的意思,是针对某一些语言进行定制化。

一般一个成熟的产品都要考虑国际化的方案,这样未来的市场容易扩展,代码也容易维护,因此大多也会考虑国际化的方案。

Angular-translate

angular-translate是一款应用简单、上手容易的国际化服务。它提供了很多的特性:

1 以组件化的方式形成国际化

2 异步加载国际化数据

3 使用messageFormat支持多元化

4 使用接口提高可扩展性

上面就是Angular-translate的抽象图,可以看到它的最上面是指令,然后是过滤器,最下面是服务....

也就是说,transalte中指令其实是通过过滤器实现的,过滤器其实是通过服务实现的。

右边的interpolator是修改器,即会根据国际化的数据修改展示的值。最下面是几种异步加载器,可以异步加载国际化数据,提升应用的性能。最左边提供了几种持久化方案,如果应用需要记住用户的选择或者默认设定语言环境,则可以使用这种这种服务,需要额外安装需要的包。

实践

1 下载

鉴于国内的网络环境,还是推荐直接去官网下载zip压缩包吧。当然如果网络允许,也可以直接用bower下载。

官方下载地址

2 引入

由于angular-translate需要使用angular,因此需要在引入angular-translate之前先引入angular。

如果直接使用<script>标签,那么很简单,只要保证angular在angular-translate之前引入即可:

<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="bower-angular-translate-2.8.1/angular-translate.js"></script>
</head>

如果使用了requireJS这种异步加载服务,那么需要声明angular-translate与angular的依赖关系,例如:

  shim: {
....
angular_translate:{
deps: ['angular'],
exports: 'angular_translate'
},
....

3 注入

var app = angular.module("MyApp",['pascalprecht.translate']);

这样angular后续加载的模块都会注入一个translate服务,而不需要每个文件都声明。

4 配置国际化方案

app.config(['$translateProvider',function($translateProvider){
$translateProvider.translations('en',{
'TITLE':'Hello',
'FOO':'This is a paragraph'
}); $translateProvider.translations('zh',{
'TITLE':'你好',
'FOO':'这是一幅图'
}); $translateProvider.preferredLanguage('zh');
}]);

使用服务$translateProvider,配置多种语言方案,可以设置默认的语言。

当然,一般国际化都不会直接写在上面的函数中,可以通过angular声明一个模块或者通过require引入一个自执行的方法,方法返回国际化的JSON对象,这样直接引入:

$translateProvider.translations('en',i18n_en);
$translateProvider.translations('zh',i18n_zh);

5 使用国际化

<h1>{{ 'TITLE' | translate }}</h1>
<span translate="FOO"></span>

第一种是以过滤器的方式使用;第二种是指令的方式使用。

6 全部代码

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="bower-angular-translate-2.8.1/angular-translate.js"></script>
</head>
<body>
<div>
<h1>{{ 'TITLE' | translate }}</h1>
<span translate="FOO"></span>
</div>
<script type="text/javascript">
var app = angular.module("MyApp",['pascalprecht.translate']); app.config(['$translateProvider',function($translateProvider){
$translateProvider.translations('en',{
'TITLE':'Hello',
'FOO':'This is a paragraph'
}); $translateProvider.translations('zh',{
'TITLE':'你好',
'FOO':'这是一幅图'
}); $translateProvider.preferredLanguage('zh');
}]);
</script>
</body>
</html>

参考

【1】AngularTranslate:https://angular-translate.github.io/

AngularJS 国际化——Angular-translate的更多相关文章

  1. AngularJS国际化配置

    AngularJS国际化配置 下载angular-translate 下载zip包:https://github.com/angular-translate/bower-angular-transla ...

  2. 升级 AngularJS 至 Angular

    Victor Savkin 大神撰写了一系列文章详细介绍如何升级 AngularJS 应用: NgUpgrade in Depth Upgrade Shell Two Approaches to Up ...

  3. [Angularjs]国际化

    写在前面 在项目中,有用到国际化,跟着就了解了下使用angularjs实现的国际化,这里做一下记录. 系列文章 [Angularjs]ng-select和ng-options [Angularjs]n ...

  4. 走进AngularJs(一)angular基本概念的认识与实战

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  5. 夺命雷公狗—angularjs—25—angular内置的方法(高级)

    查看版本信息 angular.version console.log(angular.version); 判断是否相等 angular.equals() var str1 = ''; var str2 ...

  6. AngularJS(17)-Angular小程序

    现在可以开始创建您的第一个 AngularJS 应用程序,一个 AngularJS 单页 Web 应用. <!DOCTYPE html> <html lang="en&qu ...

  7. AngularJS方法 —— angular.bootstrap

    描述: 此方法用于手动加载angularjs模板 (官方翻译:注意基于端到端的测试不能使用此功能来引导手动加载,他们必须使用ngapp. angularjs会检测这个模板是否被浏览器加载或者加载多次并 ...

  8. 33.AngularJS 应用 angular.module定义应用 angular.controller控制应用

    转自:https://www.cnblogs.com/best/tag/Angular/ AngularJS 模块(Module) 定义了 AngularJS 应用. AngularJS 控制器(Co ...

  9. [AngularJS] ngAnimate angular way !!

    Idea is set up javascript  as an api, then just change html to control the behavor. var app = angula ...

随机推荐

  1. bc#29 做题笔记

    昨天的bc被坑惨了= = 本来能涨rating的大好机会又浪费了...大号已弃号 A:第一反应是高精度,结果模板找不到了= =,然后现学现卖拍了个java的BigInteger+快速幂,调了好半天不说 ...

  2. subprocess实现管道

    # shell last | cut -d ' ' -f 1 | sort -u #python from subprocess import Popen,PIPE p1 = Popen('last' ...

  3. iOS WebView调用JS的一个小坑

    假如调用一个函数,传入的参数为String,要以这样的格式传入: let resultStr="1234" self.webView.stringByEvaluatingJavaS ...

  4. 常见linux命令释义(第二天)

    查看磁盘与目录的容量. df 与du df  是英语Disk Free的意思.磁盘空余. df -h  -h中h指的是一human(人类)的角度,即用GB,MB的格式显示.这个比较常用,还有其他的选项 ...

  5. 整理CSS引发的相关理论的梳理

    写在前面 因为原先项目中的CSS样式乱得不行,所以领导决定要花大时间整理一下样式,也为了后续维护起来方便.其实也苦了自己,想想也是一件多烦的事情,烦的原因并非是说这件事情做起来没有意义,而是觉得这样的 ...

  6. HTML5 history

    引入history.pushState的来龙去脉 大家都知道web2.0以来,大家都喜欢使用ajax来请求数据,提高用户体验,但是传统的ajax可以无刷新改变页面内容,但无法改变页面URL,无刷新的改 ...

  7. iOS - CALayer相关(CATransform3D)

    一.图层的几何 图层的几何简单通俗,图层的所有几何属性(包括矩阵变换),都可以有隐式和显式动画. 图层几何的属性: 1.position是CGPoint值,她指定图层相对于她图层的位置,该值基于父图层 ...

  8. POJ2185Milking Grid(最小覆盖子串 + 二维KMP)

    题意: 一个r*c的矩形,求一个子矩形通过平移复制能覆盖整个矩形 关于一个字符串的最小覆盖子串可以看这里http://blog.csdn.net/fjsd155/article/details/686 ...

  9. Python核心编程第三版第二章学习笔记

    第二章 网络编程 1.学习笔记 2.课后习题 答案是按照自己理解和查阅资料来的,不保证正确性.如由错误欢迎指出,谢谢 1. 套接字:A network socket is an endpoint of ...

  10. (翻译)如何对python dict 类型按键(keys)或值(values)排序

    如何对dict类型按键(keys)排序(Python 2.4 或更高版本): mydict = {'carl':40, 'alan':2, 'bob':1, 'danny':3} for key in ...