Clever Geek Handbook

AngularJSによるローカライズ

画像 こんにちは、ガブラジテリ。



AngularJSは、サイトを構築するための優れたフレームワークです。 Habréで彼についてかなり多くのことが書かれていますが、何らかの理由でアプリケーションのローカリゼーションの話題に触れたことはありません。 それにもかかわらず、ローカライズのサポートがあり、今日はそれに対処しようとします。



ローカライズする方法はいくつかあり、そのうちのいくつかを検討します。



方法1.ドキュメントのとおり



i18nおよびl10nのドキュメントには、Angularjsが日付、数値、通貨の表示をサポートし、それぞれの国のユーザーがそれらを見るのに使用される形式で表示されることが記載されています。 つまり、オンラインストアを作成するときに、 {{amount | currency}}



{{amount | currency}}



、必要なロケールを接続し、ロシアとアメリカの購入金額がどうなるかを考えないでください。 AngularJSはあなたのためにそれを行います：



1 234,56こする-ロシアで

$ 1,234.56-アメリカで




状況は日付と同様です。 {{currentDate | date}}と表示されます：



9月23日 2014-ロシアで

2014年9月23日-米国




同じページで両方の通貨を使用する場合は、測定単位{{amount | currency:"USD$"}}



{{amount | currency:"USD$"}}



。

通貨と日付の使用例 
 <!doctype html> <html ng-app="testApp"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.js"></script> <!--      --> <!--   --> <!-- <script src="https://code.angularjs.org/1.3.0-rc.2/i18n/angular-locale_en-us.js"></script>--> <!--   --> <script src="https://code.angularjs.org/1.3.0-rc.2/i18n/angular-locale_ru-ru.js"></script> <script> angular.module('testApp', []) .controller('mainController', ['$scope', function($scope){ $scope.amount = 1234.56; $scope.currentDate = new Date(); }]) </script> </head> <body ng-controller="mainController"> <input type="number" ng-model="amount"> <br>   : <span id="currency-default">{{amount | currency}}</span><br>     (USD$): <span>{{amount | currency:"USD$"}}</span><br>  : <span>{{currentDate | date}}</span> </body> </html>


プランカーの例 。



一部のテキスト変換では、開発者はngPluralizeの使用を推奨していますが、アプリケーションの単純なローカライズではこれはあまり役に立ちません。



方法2.バイク



json形式で保存された翻訳を含む2つのファイルがあるとします。

translation_ru.json 
 { "COLOR" : "", "HELLO" : "", "HELLO_HABR" : " !" }




translation_en.json 
 { "COLOR" : "Color", "HELLO" : "Hello", "HELLO_HABR" : "Hello Habrahabr!" }




また、ユーザーが選択した言語に応じて、これらのメッセージがページに表示されるようにします。 これを行うには、 myApp



アプリケーションを作成します。

angularApp.js 
 var app = angular.module('myApp', ['ngResource']);






そして、これらのファイルを私たちにダウンロードするtranslationService



。

angularTranslationService.js 
 app.service('translationService', function($resource) { this.getTranslation = function($scope, language) { var languageFilePath = 'translation_' + language + '.json'; console.log(languageFilePath); $resource(languageFilePath).get(function (data) { $scope.translation = data; }); }; });




また、このサービスを接続するコントローラーmyController



作成します。

angularController.js 
 app.controller('myController',['$scope', 'translationService', function ($scope, translationService){ // ,      $scope.translate = function(){ translationService.getTranslation($scope, $scope.selectedLanguage); }; //  $scope.selectedLanguage = 'en'; $scope.translate(); }]);




そして、すべてのスクリプトを接続するindex.html



テスト提供。

翻訳のテキストを表示するには、次のように説明する必要があります。



{{translation.HELLO_HABR}}




angular.js



に加えてangular.js



angular-resource.js



を操作するangular-resource.js



も含まれていることに注意してください。

index.html 
 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-resource.min.js"></script> <script src="angularApp.js"></script> <script src="angularController.js"></script> <script src="angularTranslationService.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myController"> <section> <h4>Select language for translation:</h4> <select ng-change="translate()" ng-model="selectedLanguage"> <option value="en">English</option> <option value="ru"></option> </select> </section> <h4> : <strong>{{selectedLanguage}}</strong></h4> <h4> :</h4> <p> {{translation.HELLO_HABR}} </p> </div> </body> </html>






結果が得られます。







ここで実際の例を見ることができます 。



方法3.正しい



ローカライズの問題を解決するために、世界のコミュニティは何を提供しますか？ 優れたドキュメントを備えた2つの大きなプロジェクトのみを見つけました。 これらはAngular-TranslateとAngular-Gettextです。

角度変換の例 
 var app = angular.module('at', ['pascalprecht.translate']); app.config(function ($translateProvider) { $translateProvider.translations('en', { TITLE: 'Hello', FOO: 'This is a paragraph.', BUTTON_LANG_EN: 'english', BUTTON_LANG_DE: 'german' }); $translateProvider.translations('de', { TITLE: 'Hallo', FOO: 'Dies ist ein Paragraph.', BUTTON_LANG_EN: 'englisch', BUTTON_LANG_DE: 'deutsch' }); $translateProvider.preferredLanguage('en'); }); app.controller('Ctrl', function ($scope, $translate) { $scope.changeLanguage = function (key) { $translate.use(key); }; });




Angular-Gettextの例 
 angular.module("myApp").controller("MyCtrl", function ($scope, gettextCatalog) { // Do things with gettextCatalog });




個人的にはAngular-Gettextが好きです。 その中の翻訳はいくつかのステップで実行されます：



  1. サイトを完全に1つの言語で作成します。
  2. translate



    する必要がある行の横にあるhtml内の単語translate



    を使用します。
  3. angular-gettext tools



    を使用して「po」テンプレートを生成します。
  4. Poeditを使用して、必要なすべての言語に翻訳します。 専門家に渡す方が良いですが、
  5. gettextとテンプレートを接続します。
  6. 使用します。




Angular-Translateでは、すべての翻訳をファイルに書き込む必要があります。



おわりに



今日、私たちは教育目的で自転車を発明しました。 ただし、このようなコードは実際のプロジェクトでは使用できません。 よく開発されたライブラリを使用するのは良いことです。 どちらを選ぶかはあなた次第です。 それぞれが個別の記事に値し、独自の特性があります。 次の投稿では、それぞれについて詳しく説明します。



注意と開発とローカリゼーションの成功に感謝します！



参照資料



バージョン1.3.0-rc2のロケールサポートファイルはここにあります。

Plunkerの最初の例 ;

Plunkerの2番目の例 。

Angular-Gettext ;

角度変換 。


More articles:


All Articles