ng-i18next 项目教程

ng-i18next 项目教程

ng-i18nexttranslation for AngularJS using i18next项目地址:https://gitcode.com/gh_mirrors/ng/ng-i18next

项目介绍

ng-i18next 是一个用于 AngularJS 应用的国际化（i18n）库，基于 i18next 构建。它提供了 AngularJS 的 provider、directive 和 filter，支持变量绑定、嵌套翻译、作用域变量和 sprintf 等功能。

项目快速启动

安装

首先，通过 Bower 或 npm 安装 ng-i18next：

# 使用 Bower
bower install ng-i18next

# 使用 npm
npm install ng-i18next

配置

在 AngularJS 应用中引入必要的模块：

<script src="path/to/angular.js"></script>
<script src="path/to/angular-sanitize.js"></script>
<script src="path/to/i18next.js"></script>
<script src="path/to/i18next-xhr-backend.js"></script>
<script src="path/to/ng-i18next.js"></script>

在 AngularJS 应用中配置 i18next：

angular.module('myApp', ['ngSanitize', 'ngI18next'])
  .config(function($i18nextProvider) {
    window.i18next.use(window.i18nextXHRBackend);
    window.i18next.init({
      debug: true,
      lng: 'de', // 如果未提供，i18n 将检测浏览器语言
      fallbackLng: 'dev', // 默认是 dev
      backend: {
        loadPath: '/locales/{{lng}}/{{ns}}.json'
      },
      useCookie: false,
      useLocalStorage: false
    }, function(err, t) {
      console.log('resources loaded');
    });
  });

使用

在 HTML 中使用 ng-i18next 指令：

<p ng-i18next="hello"></p> <!-- 翻译 hello -->
<p ng-i18next="[[hello]]"></p> <!-- 翻译 $scope 中的 hello -->
<p ng-i18next="[html]hello"></p> <!-- 翻译 hello 并编译 HTML -->

应用案例和最佳实践

变量绑定

ng-i18next 支持变量绑定，当变量变化时自动重新翻译：

<p ng-i18next="[[greeting]]"></p>

在控制器中：

$scope.greeting = 'hello';

嵌套翻译

支持嵌套翻译，使用 $t 方法：

<p ng-i18next="$t('nested.key')"></p>

作用域变量

在翻译中使用作用域变量：

<p ng-i18next="[[greeting]] [[name]]"></p>

在控制器中：

$scope.greeting = 'Hello';
$scope.name = 'World';

典型生态项目

i18next

i18next 是一个强大的国际化框架，支持多种语言和后端加载方式。ng-i18next 基于 i18next 构建，提供了 AngularJS 的集成。

angular-sanitize

angular-sanitize 是 AngularJS 的一个模块，用于安全地处理 HTML 内容。在使用 ng-i18next 时，通常需要引入 angular-sanitize 模块。

i18next-xhr-backend

i18next-xhr-backend 是 i18next 的一个后端插件，用于通过 XHR 加载翻译资源。在 ng-i18next 中，通常使用 i18next-xhr-backend 来加载翻译文件。

通过以上步骤，您可以快速启动并使用 ng-i18next 进行 AngularJS 应用的国际化。希望本教程对您有所帮助！

ng-i18nexttranslation for AngularJS using i18next项目地址:https://gitcode.com/gh_mirrors/ng/ng-i18next