1. 程式人生 > >angularjs+jquery 實現html國際化

angularjs+jquery 實現html國際化

引入檔案

使用jquery+angularJs 國際化首先要匯入一下檔案

<script type="text/javascript" src="../plug-in/jquery/jquery2.1.0.js"></script>
<script type="text/javascript" src="../plug-in/angular/angular.js"></script>
<script type="text/javascript"
	src="../plug-in/jquery/jquery.i18n.properties-1.0.9.js"></script>
定義propties 檔案

(1)messageResources_en_US.properties內容如下

language=language(re)
firstName=firstName(re)
lastName=lastName(re)
age=age(re)
sex=sex(re)
birthday=birthday(re)
email=email(re)
address=address(re)

(2)messageResources_zh_CN.properties

language=語言

firstName=姓

lastName=名字

age=年齡

sex=性別

birthday=生日

email=電子郵箱

address=地址

<script>
	var app = angular.module("testint", []);
	function test($scope) {
		$scope.info = null;
		jQuery.i18n.properties({// 載入資瀏覽器語言對應的資原始檔
			name : 'messageResources', // 資原始檔名稱
			language : 'en_US', //預設為英文當改為zh_CN時頁面顯示中文語言
			path : '../resource/', // 資原始檔路徑
			mode : 'map', // 用 Map 的方式使用資原始檔中的值
			callback : function() {// 載入成功後設置顯示內容
				$scope.info = $.i18n.map;
			}
		});
	}
</script>
</head>
<body>
	<div ng-controller="test">
		{{info.address}} <br>{{info.firstName}}<br>
		{{info.language}}
	</div>
</body>

英文效果


中文效果