AngularJS 国际化——Angular-translate

时间 2019-11-29

标签 angularjs 国际化 angular translate 栏目 AngularJS 繁體版

原文原文链接

对于一个用户群面向全球的的应用来讲，不得不考虑国际化的问题。固然，即使是刚刚起步的小应用，若是有心搞大，也应该提早设计国际化的方案。javascript

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

i18n与l10n

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

一般i18n是国际化的意思，就是在不改变源码的状况下，经过某些简单的配置就能适应不一样的语言环境。git

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

通常一个成熟的产品都要考虑国际化的方案，这样将来的市场容易扩展，代码也容易维护，所以大多也会考虑国际化的方案。网络

Angular-translate

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

1 以组件化的方式造成国际化异步

2 异步加载国际化数据ide

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/