AngularJS Internationalization--angular-translate

Read Catalogue

• i18n and l10n
• Angular-translate
• Practice
• Reference

For a user group of global-oriented applications, we have to consider the internationalization of the problem. Of course, even if it is just starting small application, if the intention to make big, also should design the internationalization plan ahead of time.

This article is about the simple internationalization of applications built using ANGULARJS, which, to be precise, is an international service ....

Back to the top of i18n and l10n

I18N is an abbreviation for internationalization, taking the first letter and the last letter, and the number of letters omitted in the middle, namely i18n, similar l10n is localization meaning.

Usually i18n is the meaning of internationalization , that is, in the case of not changing the source code, through some simple configuration can adapt to different language environment.

L10N, which is localized , is customized for some languages.

Generally a mature product to consider the internationalization of the scheme, so that the future of the market is easy to expand, code is easy to maintain, so most will also consider the internationalization of the program.

Back to top of angular-translate

Angular-translate is a simple and easy to use international service. It offers a number of features:

1 internationalization in a modular way

2 Asynchronously loading internationalized data

3 using Messageformat to support diversity

4 using interfaces to improve scalability

The above is the abstract diagram of angular-translate, you can see the top of it is the instruction, then the filter, the bottom is the service ....

In other words, the instructions in Transalte are actually implemented through filters, and the filters are actually implemented through the service.

The interpolator on the right is the modifier, which modifies the displayed values according to the internationalized data. At the bottom are several asynchronous loaders that can asynchronously load internationalized data and improve the performance of your application. There are several persistence scenarios on the left, which can be used if the application needs to remember the user's choice or the default locale, which requires additional packages to be installed.

Back to the top of practice

1 Downloads

In view of the domestic network environment, it is recommended to go directly to the official website to download the ZIP compression package it. Of course, if the network allows, you can also download directly with Bower.

Official

2 Introduction

Because angular-translate requires the use of angular, it is necessary to introduce angular before introducing angular-translate.

If you use the <script> tag directly, it is simple, just make sure that angular is introduced before Angular-translate:

< Head >    <  src= "Http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></ Script >    <  src= "Bower-angular-translate-2.8.1/angular-translate.js"></ Script > </ Head >

If this asynchronous load service is used with Requirejs, then you need to declare angular-translate and angular dependencies, for example:

Shim: {....    angular_translate:{      deps: [' angular '],      ' angular_translate '    },....

3 Injection

var app = Angular.module ("MyApp", [' pascalprecht.translate ']);

This angular the subsequent loaded modules into a translate service, without requiring each file to be declared.

4 Configuring Internationalization Scenarios

App. Config ([' $translateProvider ',function($translateProvider) {          $ Translateprovider.translations (' en ', {            ' TITLE ': ' Hello ',            ' FOO ': ' This is a paragraph '         });               $translateProvider. Translations (' zh ', {            ' TITLE ': ' Hello ',            ' FOO ': ' This is a picture '         });               $translateProvider. Preferredlanguage (' zh ');    }]);

Using the service $translateprovider, configure multiple language scenarios to set the default language.

Of course, the general internationalization is not directly written in the above function, you can declare a module through angular or introduce a self-executing method through require, the method returns the Internationalized JSON object, and introduces directly:

$translateProvider. Translations (' en ', i18n_en); $translateProvider. Translations (' zh ', i18n_zh);

5 using Internationalization

The first is used in the form of a filter, and the second is the way the instruction is used.
6 All Codes
<!DOCTYPE HTML><HTMLNg-app= "MYAPP"><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <Scriptsrc= "Http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></Script>    <Scriptsrc= "Bower-angular-translate-2.8.1/angular-translate.js"></Script></Head><Body>    <Div>        <H1>{' TITLE ' | translate}}</H1>        <spanTranslate= "FOO"></span>    </Div>    <Scripttype= "Text/javascript">    varapp=Angular.module ("MyApp",['pascalprecht.translate']); App. Config (['$translateProvider',function($translateProvider) {$translateProvider. Translations ('en',{            'TITLE':'Hello',            'FOO':'This is a paragraph'        }); $translateProvider. Translations ('ZH',{            'TITLE':'Hello',            'FOO':'This is a picture'        }); $translateProvider. Preferredlanguage ('ZH');    }]); </Script></Body></HTML>
Back to the top of the reference
"1" angulartranslate:https://angular-translate.github.io/
AngularJS Internationalization--angular-translate