掌握AngularJS，轻松实现国际化与本地化解决方案

在当今全球化的时代，软件产品的国际化与当地化成为晋升用户休会跟市场竞争力的关键。AngularJS作为一款富强的前端JavaScript框架，为开辟者供给了实现国际化与当地化的便捷方法。本文将深刻探究怎样利用AngularJS轻松实现国际化与当地化处理打算。

一、国际化与当地化的不雅点

1. 国际化（i18n）

国际化（Internationalization）是指在软件计划初期就考虑差别地区跟文化的须要，确保软件可能在世界各地正常运转。它重要包含以下方面：

言语支撑：支撑多种言语的文本表现跟交互。
文化顺应性：考虑差别地区的日期、时光、货币、数字等格局。

2. 当地化（l10n）

当地化（Localization）是在国际化的基本上，根据目标市场的言语、文化跟习气停止响应调剂。它重要包含以下方面：

翻译：将软件中的文本翻译成目标言语。
调剂：根据目标市场的文化、法律跟习气调剂软件界面跟功能。

二、AngularJS国际化与当地化实现

AngularJS供给了多种方法实现国际化与当地化，以下将具体介绍多少种常用方法：

1. 利用AngularJS内置国际化支撑

AngularJS自带国际化支撑，供给了一些言语的国际化资本文件。以下是实现步调：

1.1 静态加载

剖析国际化资本文件跟AngularJS库文件：


cat angular.js i18n/angular-localede-ge.js > angularde-ge.js

在HTML中引用剖析后的文件：


<html ng-app>
<head>
   ...
   <script src="angularde-ge.js"></script>
   ...
</head>
...
</html>

1.2 静态加载

利用angular-translate库实现静态加载国际化资本文件：


<!-- i18n -->
<script type="text/javascript"
src="lib/angular/i18n/<% (new com.hero.admin.ui.i18n.JSResourceResolver("lib/angular/i18n","angular-locale")).geti18NFile(request) %>">
</script>

在AngularJS中，利用过滤器停止国际化文本处理。

2. 利用Angular-translate库

Angular-translate是一款利用简单、上手轻易的国际化效劳。以下是利用Angular-translate的步调：

2.1 安装

利用Bower（前端担保理器）安装：

bower install angular-translate --save

2.2 引入

在HTML中引入Angular-translate库：

<script src="path/to/angular-translate.js"></script>

2.3 设置

在AngularJS利用中设置Angular-translate：

angular.module('app', ['pascalprecht.translate']).config(['$translateProvider', function ($translateProvider) {
    $translateProvider.preferredLanguage('en');
    $translateProvider.useStaticFilesLoader({
        prefix: 'i18n/locale_',
        suffix: '.json'
    });
}]);

2.4 利用

在AngularJS中，利用$translate效劳停止国际化文本处理：

angular.module('app').controller('myController', ['$scope', '$translate', function ($scope, $translate) {
    $scope.changeLanguage = function (lang) {
        $translate.use(lang);
    };
    $scope.$watch('$translate.lang', function (lang) {
        if (lang === 'en') {
            $scope.message = 'Hello, World!';
        } else if (lang === 'zh') {
            $scope.message = '你好，世界！';
        }
    });
}]);

3. 利用i18next库

i18next是一款风行的国际化框架，支撑多种前端跟后端技巧。以下是利用i18next的步调：

3.1 安装

利用npm（Node.js担保理器）安装：

npm install i18next --save

3.2 设置

在AngularJS利用中设置i18next：

import i18next from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18next.use(Backend).use(LanguageDetector).init({
    fallbackLng: 'en',
    backend: {
        loadPath: 'i18n/locale_{{lng}}.json'
    }
});

3.3 利用

在AngularJS中，利用i18next停止国际化文本处理：

import { translate } from 'i18next';

angular.module('app').controller('myController', ['$scope', function ($scope) {
    $scope.changeLanguage = function (lang) {
        i18next.changeLanguage(lang, function (err, t) {
            if (err) throw err;
            $scope.message = t('hello');
        });
    };
    $scope.message = i18next.t('hello');
}]);

三、总结

控制AngularJS，开辟者可能轻松实现国际化与当地化处理打算。本文介绍了AngularJS内置国际化支撑、Angular-translate库跟i18next库等多少种实现方法，盼望对你有所帮助。在现实开辟过程中，你可能根据项目须要跟团队经验抉择合适的国际化打算。