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/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。