Go Ionic + AngularJS angular-translate International Localization Solution

This article transferred from: http://www.cnblogs.com/maoyazhi/p/4332362.html

Welcome to our website, there are more technical exchanges on the website: http://www.ncloud.hk/technology sharing/ionic-plus-angularjs-angular-translate-internationalization localization solution/

First, manually switch languages

1. First add a parameter to the App.js file:

?

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

2. Need to reference JS file

?

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

3. Add the Click toggle button to the edit.html file:

?

12	<button class = " Button " ng-click= " Changelanguage (' En ') " translate= " Language_en " ></BUTTON> <button class = " button " ng-click= "changelanguage (' zh ')" translate= "Language_zh" ></BUTTON>

4. Add the switch function to the controller of the Controllers.js file edit:

?

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

5. Define the variables in the App.js file first:

?

12345678

var translationsen = { language_en: ' English ' Language_zh: ' Chinese ' }; var translationzh = { language_en: ' English ' Language_zh: ' Chinese '

Then write the function method:

?

1234567

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

Second, automatically get the phone language is the default language

1. First add a parameter to the App.js file:

?

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

2. Need to reference JS file

?

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

3. Add parameters to the App.js file:

?

123456

.config(function($stateProvider,$translateProvider){$translateProvider.registerAvailabeLanguageKeys([‘en’,’zh’],{　　‘en-*’:’en’,　　‘zh-*’:’zh’});$translateProvider.determinePreferredLanguage();//这个方法是获取手机默认语言设置

4. The variables of the translation can be defined according to the above, can also be changed by the route (but after testing this method does not apply to the mobile phone, the simulator has failed to test (added fifth for the mobile phone can be identified). ）：

"1" can put each translation file into/language/, such as/languages/en.json/language/zh.json

"2" is then configured via Usestaticfilesloader:

?

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

"3" need to reference JS file

?

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

"4" Note:

The JSON file format should be careful not to have comment content;

The referenced JS file requires a static file Angular-translate-loader-static-files.min.js.

5. This is the experience after testing, the above routing method is not feasible, you can change the JSON file to JS file, referenced in the index.html file, and then in the app file:

?

123456789

$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();

Of course this method also does not need to introduce <script src= "Js/angular-translate-loader-static-files.min.js" ></script> this file anymore.

Third, the automatic acquisition of the language of mobile phone add up, instantly feel the software tall on a lot ~

Reference Tutorial: Control the Switching language via plugins: https://blog.nraboy.com/2014/08/internationalization-localization-ionicframework-angular-translate/

This is a little more detailed: Http://angular-translate.github.io/docs/#/guide/07_multi-language

Go Ionic + AngularJS angular-translate International Localization Solution