web-dev-qa-db-ja.com

angularjsによる国際化

私のサイトをangularjsに移動することを考えています。すべての静的サーバー側プレーンテキストテンプレートをDjango to angular（そうしないと、 '{{}}'で構文の問題が発生します）。

これを行う最善の方法は、次の2つのオプションのうちの1つになると思われます。

  1. 私のサイトのすべてのテキストを含むJSONを返すajax呼び出しを行うには。テキストは、HTML要素にバインドされている変数に保存されるため、angularはすべてを更新します。
  2. 静的なjsファイルをディクショナリとともに保存し、それをHTMLに含めて、ディクショナリをangularjsにバインドします。

どちらのオプションでも、ページをリロードせずに言語を切り替えることができます。

どちらがいいですか？一般的に、これは良いアプローチですか、それとももっと正しい方法がありますか？

angularjsinternationalizationtemplating
20
Uri

まず最初に、ここで回答されているように、angularの区切り文字を他の記号に変更する方法があります。 Angular JS custom delimiter

2.オプションの方が簡単です。あなたはそれを一度含めて、あなたはページロードですべての翻訳を持っています。非同期呼び出しも、約束もありません。

それでも、最初のものを使います。 $ translate のようなサービスは、オプション1に従うことであなたの人生を本当に楽にします。さらに、ロードされたデータをLocalStorageとCookieにロードおよび保存するための多くのオプションがあり、拡張とカスタマイズのための十分なスペースがあります。次に、$ translateサービス、ディレクティブ、またはフィルターを使用してコンテンツを翻訳できます。

また、2つのオプションは、キャッシュされたリクエストのオプションを無効にすることを忘れないでください。スタートページへのリクエストごとに、サーバーは静的ファイルを読み取り、htmlに含める必要があります。最初のオプションでは、ユーザーのブラウザーは.jsonを好きなだけキャッシュできます。

9
package

Angular Translateを含む）いくつかのオプションを試してみましたが、私は Angular-gettext がこれまでのところ最高でした。

非常に役に立った1つのことは、TodoMVCを国際化するための実用的なデモがあり、 angular-gettext-example と呼ばれることです。

ワークフローは簡単です：

  1. テンプレートに「translate」ディレクティブを追加します
  2. Gruntを実行して.potテンプレートを抽出します
  3. .potを翻訳ベンダーに渡すか、POEditまたは同様のソフトウェアを使用してDIY
  4. .po翻訳ファイルをプロジェクトに戻す
  5. Gruntを実行して.poファイルをコンパイルします
  6. スコープにデフォルト言語を設定する
  7. 魔法を見てください！

ここに掲載されている他のソリューションも良いと思いますが、angular-gettext-exampleのようにうまく構成されたエンドツーエンドの例は見たことがありません。

乾杯、JD

33
JD Smith

AngularJSは、通貨、日付、数値のフィルターに対してのみil8n/L10nをサポートしています。 この本 によると：

Book-shot!（低品質で申し訳ありません！携帯電話のカメラ）

最初のアプローチに従い、翻訳を動的にロードします。多くの作業が必要になりますが、他に方法はありません

4
Ahmad Alfy

angular-translate を見てください:)

両方のシナリオを解決します！

4
Pascal Precht