angularjs學習筆記（3）–i18n使用

項目中用到angular-ui-bootstrap插件中的datepicker，但是datepicker顯示的星期和月份是英文的，我須要他們都顯示成中文的，最簡單的方法就是用angularjs的i18n（Internationalization, 簡稱i18n）。
官方文檔告訴咱們，咱們只需引入相應的local文件就行了，例如我要引入中文的i18n文件，只需引入angular-locale_zh-ch.js。而後將ngLocal模塊注入個人當前工做模塊便可。

其中angular-locale_zh-ch.js以下所示：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

define([], function() { angular.module("ngLocale", [], ["$provide", function($provide) { var PLURAL_CATEGORY = { ZERO : "zero", ONE : "one", TWO : "two", FEW : "few", MANY : "many", OTHER : "other" }; $provide.value("$locale", { "DATETIME_FORMATS" : { "MONTH" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "SHORTMONTH" : ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], "DAY" : ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], "SHORTDAY" : ["週日", "週一", "週二", "週三", "週四", "週五", "週六"], "AMPMS" : ["上午", "下午"], "medium" : "yyyy-M-d ah:mm:ss", "short" : "yy-M-d ah:mm", "fullDate" : "y年M月d日EEEE", "longDate" : "y年M月d日", "mediumDate" : "yyyy-M-d", "shortDate" : "yy-M-d", "mediumTime" : "ah:mm:ss", "shortTime" : "ah:mm" }, "NUMBER_FORMATS" : { "DECIMAL_SEP" : ".", "GROUP_SEP" : ",", "PATTERNS" : [{ "minInt" : 1, "minFrac" : 0, "macFrac" : 0, "posPre" : "", "posSuf" : "", "negPre" : "-", "negSuf" : "", "gSize" : 3, "lgSize" : 3, "maxFrac" : 3 }, { "minInt" : 1, "minFrac" : 2, "macFrac" : 0, "posPre" : "\u00A4", "posSuf" : "", "negPre" : "\u00A4-", "negSuf" : "", "gSize" : 3, "lgSize" : 3, "maxFrac" : 2 }], "CURRENCY_SYM" : "¥" }, "pluralCat" : function(n) { return PLURAL_CATEGORY.OTHER; }, "id" : "zh-cn" }); }]); });

ngLocal就是一個模塊，支持日期，數字和貨幣的國際化和本地化。另外，AngularJS還經過ngPluralize指令支持本地多元化。看下面這個例子：

見 https://github.com/angular/angular.js/blob/master/i18n/e2e/localeTest_zh.html

localTest_cn.html：

 

還有一種方法就是自定義i18n，畢竟官方給的i18n支持的本地化僅做用於日期，數字和貨幣。看下面的例子。

見http://jsfiddle.net/7zdpa/
index.html

app.js

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

var myApp = angular.module('myApp',['localization']);   myApp.controller('MyCtrl', function($rootScope) {     // default language setting     $rootScope.language = "en_US";       $rootScope.changeLang = function () {         if ($rootScope.language === "en_US") {             $rootScope.language = "zh_CN";         } else {             $rootScope.language = "en_US";         }     }; })   // i18n filter angular.module('localization', []) .filter('i18n', ['localizedTexts', '$rootScope', function (localizedTexts, $rootScope) {         return function (text) {         currentLanguage = $rootScope.language || 'en_US';         if (localizedTexts[currentLanguage].hasOwnProperty(text)) {             return localizedTexts[currentLanguage][text];         }         return text;     }; }])   // separate dictionary file angular.module('localization') .value('localizedTexts', {     'zh_CN' : {         'firstname': '名',         'lastname': '姓',         'address': '地址'     },     'en_US' : {         'firstname': 'First Name',         'lastname': 'Last Name',         'address': 'Home Address'    } });

效果如圖