AngularJS Internationalization--angular-translate

Source: Internet
Author: User
Tags i18n

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.