1. i18n and i10n
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.
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
650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/449064/201511/449064-20151123212305670-1306927159. PNG "width=" 748 "height=" 561 "style=" border:none;margin:20px; "/>
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, theinstructions 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.
2. 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:
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 '], exports: ' 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>Reference"1" angulartranslate:https://angular-translate.github.io/
Delve into Angularjs (2)--angular-translate detailed