AngularJS 国际化——Angular-translate

对一个用户群面向全球的底以来说,不得不考虑国际化的题材。当然,固然是刚启动之有些应用,假若来心中为大,也相应提前计划国际化的方案。

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

i18n与l10n

i18n是Internationalization得缩写,取第一个假名和终极一个字母,以及中略的假名数目,即i18n,类似之l10n是Localization得意思。

通常i18n是国际化的意,就是于非更改源码的状下,通过一些简单的布局就可知适应不同之语言环境。

l10n,则是本地化的意思,是对有有言语举办定制化。

貌似一个成熟的产品还设考虑国际化的方案,这样将来之市场易扩大,代码也易保障,因而多也会考虑国际化的方案。

Angular-translate

angular-translate是相同慢应用简单、上手容易之国际化服务。它提供了众底特色:

1
以组件化的计形成国际化

2
异步加载国际化数据

3
使用messageFormat襄助多元化

4
使用接口提高而扩充性

图片 1

方就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>

首先种植是坐过滤器的点子以;第三种是令的法门使。

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>

    </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/

相关文章