globalization

What are i18n and l10n?

Internationalization, abbreviated as i18, refers to quickly adapting products to different languages and cultures. Localization, or l10n for short, refers to making a product available in a specific cultural and language market. For developers, internationalizing an app means pulling all text and other region-specific data out of the app. Localization means providing translation and translation into local formats for these abstracted data and text.

what is area id

A locale is a geographically, politically, and culturally divided area. The commonly used area ID consists of two parts: language code and country code. For example, en-US, en-AU, zh-CN are legal regional IDs, and they all contain language code and country code. Because the country code is optional, ids like en, zh, and sk are also legal.

For the regions supported by AngularJS, AngularJS separates rules such as numbers and event formats into different files, each file corresponding to a specified region. You can find a list of supported locales in the AngularJS folder.

Detailed explanation of angular-translate

angular-translate is an internationalization service that is simple to use and easy to use. It provides many features:

Form internationalization in a componentized way
Load internationalized data asynchronously
Use messageFormat to support pluralism
Using Interfaces to Improve Scalability

write picture description here

The above is the abstract diagram of Angular-translate. You can see that the top of it is the directive, then the filter, and the bottom is the service....

That is to say, instructions in transalte are actually implemented through filters, and filters are actually implemented through services.

The interpolator on the right is a modifier, which modifies the displayed value according to the internationalized data. At the bottom are several asynchronous loaders that can asynchronously load internationalized data and improve application performance. Several persistence schemes are provided on the far left. If the application needs to remember the user's choice or set the locale by default, it can use this kind of service, and additional packages need to be installed.

Preliminary preparation

1. Install the angular-translate module

Open the cmd command line interface and enter the project directory, and install the angular plugin through the command:

bower install angular-translate
bower install angular-translate-loader-static-files

After the installation is complete, you will see two folders, angular-translate and angular-translate-loader-static-files, in the project directory /www/lib/, which contain the relevant js files that we need to use next.

angular-translate.min.js is an internationalization module officially provided by angular. The
angular-translate-loader-static-files.min.js module is a module used to read local files, because our translation content is an independent json file .

2. Introduce js files

In the html, find the appropriate location to import the two related js files angular-translate.min.js and angular-translate-loader-static-files.min.js:

<!-- your app's js -->
<script src="lib/angular-translate/angular-translate.min.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>

3. Dependency Injection

To associate the translation plugin with our module, the app.js configuration is as follows:

//把 angular-translate 模块以一个依赖项加载进来
var app = angular.module('myApp', ['pascalprecht.translate'])
//config 函数用 $translateProvider 服务配置 $translate 服务实现
.config(['$translateProvider',function($translateProvider){
//使用了 localStorage.lang 来存储用户上一次选择的语言,如果用户是第一次范围,默认显示中文(及 加载 cn.json 文件来翻译)
var lang = window.localStorage.lang||'cn';
//告诉 angular.js 哪种语言是默认已注册的语言.
$translateProvider.preferredLanguage(lang);
//告诉angular.js 应该加载本地哪些国际化语言配置文件
$translateProvider.useStaticFilesLoader({
prefix: '/i18n/',   //prefix : 指定文件前缀.
suffix: '.json' //suffix: 指定文件后缀.
});
}]);

4. Create translation files

Create a folder i18n under the project to put json files, and create two new files, en.json and cn.json, to store Chinese and English translations.

The hierarchy of directories and files is as follows:

/i18n/
en.json
cn.json

The contents of the en.json file are as follows:

{"100001":"Login","100002":"Register"}

The content of the cn.json file is as follows:

{"100001":"登录","100002":"注册"}

The above two json files correspond to the same key, which we call the translation key. In different language files, the same translation key corresponds to the corresponding translation value. For example, "Login" corresponds to "Login"

Once configured, the translation can be used in the page.

5. Switch language

<select class="language-switching" ng-controller="LanguageSwitchingCtrl" ng-model="cur_lang" ng-change="switching(cur_lang)">
<option value="en">English</option>
<option value="cn">简体中文</option>
</select>

angular.module('myApp').controller('LanguageSwitchingCtrl', ['$scope', '$translate', function ($scope, $translate) {
$scope.switching = function(lang){
$translate.use(lang);
window.localStorage.lang = lang;
window.location.reload();
};
$scope.cur_lang = $translate.use();//此方法实现了在运行时切换语言的功能.
}]);

use internationalization

1. Use internationalization in html

<h1>{{ 'TITLE' | translate }}</h1>
<span translate="FOO"></span>

The first is used as a filter; the second is used as an instruction.

2. Use internationalization in javascript scripts

angular.module('myApp').factory('T', ['$translate', function($translate) {
var T = {
T:function(key) {
if(key){
return $translate.instant(key);
}
return key;
}
}
return T;
}]);

Service T returns a method T. Let's demonstrate how to use internationalization in the controller.
Suppose the login controller LoginCtrl.js has a login tag that needs to be internationalized:

angular.module('myApp').controller('LgoinCtrl', ['$scope','T',
function($scope,T) {
$scope.login_title=T.T(100001);
}
]);

First, you need to inject the T service dependency into the controller, and then directly call the T method of the T service where internationalization is required, and pass in the translation ID to return the translation value.

18 Internationalization