angularjs+jquery 实现html国际化

最新推荐文章于 2025-05-29 09:49:30 发布

caofeilong20941

最新推荐文章于 2025-05-29 09:49:30 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery angularjs html i18n 国际化

本文链接：https://blog.youkuaiyun.com/caofeilong20941/article/details/25328111

jquery 同时被 3 个专栏收录

2 篇文章

订阅专栏

html

2 篇文章

订阅专栏

angularjs

1 篇文章

订阅专栏

本文介绍如何利用 jQuery 和 AngularJS 实现网站的国际化功能，通过加载不同的语言包来实现页面元素的多语言切换。展示了英文和中文两种语言效果，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入文件

使用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>

英文效果

中文效果