AngularJS国际化
AngularJS内置了对数字和日期国际化的支持。在本文中,我将介绍它们的工作原理。
过滤器的国际化
一些内置的AngularJS过滤器支持国际化。例如,date和currency过滤器内置了对国际化的支持。以下是通常使用这些过滤器的方式:
{{ theDate | date: 'fullDate' }}
{{ theValue | currency }}
{{ theValue | number }}
日期过滤器会根据网络应用中选择的语言环境将变量theDate格式化为日期。 " currency"和" number"过滤器也是如此。
我的视图和指令教程:AngularJS过滤中有关过滤的部分将更详细地介绍过滤器。
日期过滤器
"日期"过滤器接受以下值,用于指定日期格式:
短- 中
fullDateshortDatemediumDatelongDateshortTimemediumTime
以下是一些日期过滤器示例:
{{ 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>

