AngularJS国际化

时间:2020-01-09 10:34:01  来源:igfitidea点击:

AngularJS内置了对数字和日期国际化的支持。在本文中,我将介绍它们的工作原理。

过滤器的国际化

一些内置的AngularJS过滤器支持国际化。例如,datecurrency过滤器内置了对国际化的支持。以下是通常使用这些过滤器的方式:

{{ theDate  | date: 'fullDate' }}
{{ theValue | currency }}
{{ theValue | number }}

日期过滤器会根据网络应用中选择的语言环境将变量theDate格式化为日期。 " currency"和" number"过滤器也是如此。

我的视图和指令教程:AngularJS过滤中有关过滤的部分将更详细地介绍过滤器。

日期过滤器

"日期"过滤器接受以下值,用于指定日期格式:

  • fullDate
  • shortDate
  • mediumDate
  • longDate
  • shortTime
  • mediumTime

以下是一些日期过滤器示例:

{{ theDate  | date: 'shortDate' }}
 {{ theDate  | date: 'longDate'  }}

货币过滤器

在将数字格式化为货币时,货币过滤器将使用与所选语言环境关联的货币符号。如果我们需要使用其他货币符号,例如,如果用户希望以其他货币查看价格,则可以将货币符号指定给货币过滤器,如下所示:

{{ theValue | currency : '$' }}
{{ theValue | currency : '£' }}
{{ theValue | currency : '€' }}

请注意,最后两个示例如何将HTML实体用于英镑和欧元。

号码过滤器

数字过滤器根据所选区域设置对数字进行格式化。例如,英语中的千位分隔符为。小数点分隔符是,而在丹麦语中则相反。这是一个数字过滤器示例:

{{ theValue | number }}

设定地区

要告诉AngularJS在编写本地化输出时使用什么语言环境(语言和国家),我们需要包括相应的AngularJS语言环境文件。这是一个包含丹麦语区域设置的示例:

<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>

在包含AngularJS主JavaScript文件之后添加此文件,它应该可以立即使用。除了包含此文件外,无需执行其他任何操作。

要找到适合我们所在国家/地区的正确语言环境,请查看" code.angularjs.org",单击我们使用的AngularJS版本,然后单击" i18n"目录。在该目录中,我们会看到所有可用语言环境的列表。找到与我们要支持的国家或者地区相匹配的国家/地区,然后下载它们并将其包含在HTML页面中(或者直接在code.angularjs.org上进行引用)。

完整的AngularJS国际化示例

这是完整的AngularJS国际化示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS Routes example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>
</head>

<body ng-app="myapp">

AngularJS I18n

<div ng-controller="mycontroller">
    {{theDate  | date : "fullDate"}} <br/>
    {{theValue | currency }}
</div>

<script>
    var module  = angular.module("myapp", []);

    module.controller("mycontroller", function($scope) {

        $scope.theDate  = new Date();
        $scope.theValue = 123.45;

    });
</script>

</body>
</html>

此行包括语言(语言环境)JavaScript文件:

<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>