AngularJS国际化
AngularJS内置了对数字和日期国际化的支持。在本文中,我将介绍它们的工作原理。
过滤器的国际化
一些内置的AngularJS过滤器支持国际化。例如,date
和currency
过滤器内置了对国际化的支持。以下是通常使用这些过滤器的方式:
{{ 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>