18 国际化

以你之姓@ 2022-05-26 01:00 222阅读 0赞

# 国际化 #

## 什么是i18n和l10n? ##

国际化，简写为i18，指的是使产品快速适应不同语言和文化。本地化，简称l10n，是指使产品在特定文化和语言市场中可用。对开发者来说，国际化一个应用意味着将所有的文字和其他因地区而异的数据从应用中抽离出来。本地化意味着为这些抽离的数据和文字提供翻译和转变成本地的格式。

## 什么是地区 id ##

一个地区(locale)是指一个按地理上，政治上，文化上划分的区域。常用的地区ID由两部分组成:语言代号和国家代号。比如，en-US, en-AU, zh-CN就是合法的地区ID，它们都含有语言代号和国家代号。 因为国家代号是可选的，所以像en, zh, and sk这样的id也是合法的。

对于AngularJS支持的地区，AngularJS将数字，事件格式等规则分隔放在不同的文件里，每个文件对应一个指定地区。你在AngularJS文件夹里可以找到一系列支持的的地区。

## angular-translate详解 ##

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

1.  以组件化的方式形成国际化
2.  异步加载国际化数据
3.  使用messageFormat支持多元化
4.  使用接口提高可扩展性

![这里写图片描述][70]

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

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

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

### 前期准备 ###

#### 1.安装angular-translate模块 ####

打开 cmd 命令行界面并进入项目目录，通过命令安装 angular 插件：

bower install angular-translate
    bower install angular-translate-loader-static-files

安装完毕后，项目目录/www/lib/ 下会看到 angular-translate、angular-translate-loader-static-files 两个文件夹，里边有我们接下来需要用到的相关 js 文件。

angular-translate.min.js 是angular官方提供的国际化模块  
angular-translate-loader-static-files.min.js 模块是用来读取本地文件的模块,因为我们的翻译内容都是独立的 json 文件.

#### 2.引入js文件 ####

在html里，找到合适的位置导入两个相关的 js 文件 angular-translate.min.js 和 angular-translate-loader-static-files.min.js：

<script src="lib/angular-translate/angular-translate.min.js"></script>
    <script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>

#### 3.依赖注入 ####

把翻译插件关联到我们的模块里，app.js 配置如下：

//把 angular-translate 模块以一个依赖项加载进来
    var app = angular.module('myApp', ['pascalprecht.translate'])
    //config 函数用 $translateProvider 服务配置 $translate 服务实现
    .config(['$translateProvider',function($translateProvider){ 
    //使用了 localStorage.lang 来存储用户上一次选择的语言,如果用户是第一次范围,默认显示中文(及 加载 cn.json 文件来翻译)
    var lang = window.localStorage.lang||'cn';
    //告诉 angular.js 哪种语言是默认已注册的语言.
    $translateProvider.preferredLanguage(lang);
    //告诉angular.js 应该加载本地哪些国际化语言配置文件
    $translateProvider.useStaticFilesLoader({
    prefix: '/i18n/',   //prefix : 指定文件前缀.
    suffix: '.json' //suffix: 指定文件后缀.
    });
    }]);

#### 4.创建翻译文件 ####

在项目下创建文件夹 i18n 用来放json 文件，并新建 en.json、cn.json 两个文件用于存储中英文翻译文字。

目录及文件如下层级关系:

/i18n/
    en.json
    cn.json

en.json 文件内容如下:

`{"100001":"Login","100002":"Register"}`

cn.json 文件内容如下:

`{"100001":"登录","100002":"注册"}`

上面2个json文件对应相同的键 ,我们称之为 翻译键. 不同的语言文件中,相同的翻译键对应相应的翻译值即可.如 “Login” 对应 “登录”

配置完毕后，就可以在页面里使用翻译。

#### 5.切换语言 ####

<select class="language-switching" ng-controller="LanguageSwitchingCtrl" ng-model="cur_lang" ng-change="switching(cur_lang)">
    <option value="en">English</option>
    <option value="cn">简体中文</option>
    </select>

angular.module('myApp').controller('LanguageSwitchingCtrl', ['$scope', '$translate', function ($scope, $translate) { 
    $scope.switching = function(lang){ 
    $translate.use(lang);
    window.localStorage.lang = lang;
    window.location.reload();
    };
    $scope.cur_lang = $translate.use();//此方法实现了在运行时切换语言的功能.
    }]);

### 使用国际化 ###

#### 1、在html中使用国际化 ####

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

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

#### 2、在javascript 脚本中使用国际化 ####

angular.module('myApp').factory('T', ['$translate', function($translate) { 
    var T = {
    T:function(key) { 
    if(key){
    return $translate.instant(key);
    }
    return key;
    }
    }
    return T;
    }]);

服务T 返回了一个方法 T.下面我们演示一下如何在controller 里使用国际化.  
假如登录的控制器 LoginCtrl.js 有一个登录标签需要做国际化:

angular.module('myApp').controller('LgoinCtrl', ['$scope','T',
    function($scope,T) { 
    $scope.login_title=T.T(100001);
    }
    ]);

首先需要把 T 服务依赖注入到控制器,然后在需要国际化的地方直接调用 T 服务的 T 方法,传入翻译ID 返回 翻译值.

[70]: /images/20220526/1083ca8dba5b4d3a9050de6ed0d75073.png