Ionic App之國際化(1)單個參數的處理

標籤：asc   cap   載入本地   翻譯   home   compile   cfile   translate   pos   

最近的app開發中需要考慮多語言國際化的問題，經查資料，目前大部分使用的是angular-translate.js這個組件，網站說明是這個:https://angular-translate.github.io

具體步驟：

1.下載angular-translate.min.js和angular-translate-loader-static-files.min.js,並在index.html中添加引用

    <!--多語言模組-->    <script src="lib/angular-translate/angular-translate.min.js"></script>    <script src="lib/angular-translate/angular-translate-loader-static-files.min.js"></script>

2.設定依賴項

var app = angular.module("ionicApp", ["ionic","pascalprecht.translate"]);

3.配置多語言，此處是載入本地化的json檔案，在www目錄下建立languages目錄,有兩個json檔案：en.json和zh.json

{  "LOGIN_REGISTER": "Login/Register",  "A" : "電動單車A",  "B" : "電動三輪車B",  "MyLa":  {    "length" : 2,   "values":[    {      "name" : "Huanhuan","value" : "1"    },    {      "name" : "Alex","value" : "2"    }  ]  }}

en.json

{  "LOGIN_REGISTER": "登入/註冊",  "A" : "電動單車",  "B" : "電動三輪車",  "MyLa":{    "length" : 2,    "values":[    {      "name" : "郭歡歡","value" : "1"    },    {      "name" : "大海","value" : "2"    }  ]}}

zh.json

這兩個檔案就是我們的多語言檔案，相關內容應該日後都放在這裡。

4.載入多語言檔案，這個是需要提前載入的（貌似也可以消極式載入,還沒研究到)

app.config(function($locationProvider,$stateProvider, $urlRouterProvider, $ionicConfigProvider, $sceDelegateProvider, $compileProvider,$translateProvider){    $ionicConfigProvider.tabs.style("standard");    $ionicConfigProvider.tabs.position("bottom");    $ionicConfigProvider.navBar.alignTitle("center");    $ionicConfigProvider.views.transition("ios");    $ionicConfigProvider.views.maxCache(2);    $ionicConfigProvider.views.swipeBackEnabled(false);    $ionicConfigProvider.backButton.text("");    $ionicConfigProvider.backButton.previousTitleText(false);    $ionicConfigProvider.templates.maxPrefetch(5);/*       Url replace by dynamic load urls.json 2016.10.25  */  $urlRouterProvider.deferIntercept();  $urlRouterProvider.otherwise(‘tab/home‘);  $locationProvider.html5Mode({enabled: false});  $stateProviderRef = $stateProvider;  /*     添加多語言設定  */  $translateProvider.useStaticFilesLoader({      prefix: ‘languages/‘,      suffix: ‘.json‘  });  $translateProvider.use(‘en‘);})

這裡的prefix，suffix和en三個參數，實際上會合成一個類似{prefix}{en}{suffix}的字串，即languages/en.json,也就是我們的多語言檔案地址

5.使用指令實現翻譯效果，比如我們在view中有如下一段代碼，LOGIN_REGISTER實現不同語言下的顯示。

          <div class="sign" ng-if=!$root.user>              <a href="#/login/">                <h2 translate>LOGIN_REGISTER</h2>              </a>          </div>

由於我們在第4步中預設使用的是英文en,所以第一次啟動的時候對應的內容是en.json中LOGIN_REGISTER對應的值"Login/Register"

6.語言的切換，我們設定兩個按鈕事件，對應中文/英文的切換

$scope.chinese= function()              {                $translate.use("zh");              };

$scope.english= function()              {                $translate.use("en");              };

每點擊下中文按鈕，LOGIN_REGISTER就即刻變為zh.json中對應的 "登入/註冊"，點下英文按鈕，則寫換到"Login/Register"

 

這樣我們基本完成了單個值的多語言的實現.

Ionic App之國際化(1)單個參數的處理