angularjs+jquery 实现html国际化

来源：互联网发布：空调知乎编辑：程序博客网时间：2024/05/17 02:19

引入文件

使用jQuery+AngularJS 国际化首先要导入一下文件

[javascript] view plain copy
 
<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=地址

[html] view plain copy
 
<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>  

英文效果

中文效果

1 0