掌握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庫等多少種實現方法，盼望對妳有所幫助。在現實開辟過程中，妳可能根據項目須要跟團隊經驗抉擇合適的國際化打算。