Ionic + AngularJS angular-translate 國際化本地化解決方案

歡迎訪問我們的網站，網站上有更多關於技術性的交流：http://www.ncloud.hk/技術分享/ionic-plus-angularjs-angular-translate-國際化本地化解決方案/

一、手動切換語言

1.在app.js文件中首先要加上一個參數：

angular.module（’passbox’,[‘ionic’,’pascalprecht.translate’]）

2.需要引用js文件

<script src=”js/angular-translate.js”></script>

 3.在edit.html文件中加入點擊切換按鈕：

<button class="button" ng-click="changeLanguage('en')" translate="Language_en"></button>
<button class="button" ng-click="changeLanguage('zh')" translate="Language_zh"></button>

 4.在controllers.js文件edit的控制器中加入切換的函數：

.controllers(‘edit’,[‘$scope’ ，function($scope, $translate){
　　$scope.changeLanguage = function (langkey) { 
　　　　$translate.use(langkey); 
　　};
}])

 5.在app.js文件中先定義變量：

var translationsEN = { 
　　Language_en: 'english', 
　　Language_zh: 'chinese',
}; 
var translationZH = { 
　　Language_en: '英文',
　　Language_zh: '中文',
};

之后再寫函數方法：

angular.model(‘passbox’,[‘ionic’,’pascalprecht.translate’]);
.config(function($stateProvider,$translateProvider){
　　$translateProvider.translations(‘en’,translationEN);
　　$translateProvider.translations(‘zh’,translationZH);
　　$translateProvider.preferredLanguage(‘en’);//首選語言
　　$translateProvider.fallbackLanguage(‘en’);
}

 二、自動獲取手機語言為默認語言

1.在app.js文件中首先要加上一個參數：

angular.module（’passbox’,[‘ionic’,’pascalprecht.translate’]）;

2.需要引用js文件

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

 3.在app.js文件中添加參數： 

.config(function($stateProvider,$translateProvider){
$translateProvider.registerAvailabeLanguageKeys([‘en’,’zh’],{
　　‘en-*’:’en’,
　　‘zh-*’:’zh’
});
$translateProvider.determinePreferredLanguage();//這個方法是獲取手機默認語言設置

 4.翻譯的變量可一根據上面那樣來自己定義，也可以通過路由來改變（但是經過測試這種方法不適用在手機上，模擬機上都測試失敗（增加第五條為手機可以識別的）。）：

【1】可以將每個翻譯文件放到/language/中，比如/languages/en.json  /language/zh.json

【2】然后通過useStaticFilesLoader來配置：

$translateProvider.useStaticFilesLoader({
　　Prefix:’/languages/’,
　　Suffix:’.json’
});

 【3】需要引用js文件

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

 【4】注意：

json文件格式要注意不可以有注釋內容；

引用的js文件需要的是靜態的文件angular-translate-loader-static-files.min.js。

5.這是經過測試研究后又得到的經驗，上邊路由方法其實是不可行的，可以將json文件改為js文件，在index.html文件中引用，接着在app文件中：

$translateProvider.translations('en',_translate_EN);
$translateProvider.translations('zh',_translate_ZH);
$translateProvider.translations('ja',_translate_JA);
$translateProvider.registerAvailableLanguageKeys(['en','zh','ja'],{
    'en-*': 'en',
    'zh-*': 'zh',
    'jp-*': 'ja'
});
$translateProvider.determinePreferredLanguage();

 當然這種方法也不需要再引入<script src=”js/angular-translate-loader-static-files.min.js”></script>這個文件了.

三、這個自動獲取手機語言一加上去，瞬間感覺軟件高大上了好多~

參考教程：通過插件來控制切換語言的：https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/

這個更詳細一點：http://angular-translate.github.io/docs/#/guide/07_multi-language