angularjs实现国际化

目的:利用angularjs自带模块实现网站的中英文切换

解:依据https://angular-translate.github.io/docs/#/guide

代码:
A:

 <!-- 开始引入国际化文件 xk -->
        <script src="../assets/global/plugins/angularjs/angular-translate.min.js" type="text/javascript"></script>
        <script src="../assets/global/plugins/angularjs/angular-translate-loader-static-files.min.js" type="text/javascript"></script>
        <!-- 结束引入国际化文件 xk -->

B:

var MetronicApp = angular.module("MetronicApp", [
    "ui.router", 
    "ui.bootstrap", 
    "oc.lazyLoad",  
    "ngSanitize",             //保证可以读到自定义的en.json cn.json文件
    "pascalprecht.translate"  //引入国际化模块
]); 

C:

//开始国际化配置 xk
MetronicApp.config(['$translateProvider',function($translateProvider){
    var lang = window.localStorage.lang||'cn';  //可动态修改值
    $translateProvider.preferredLanguage('cn'); 
    //保证可以安全的获取到json文件
    $translateProvider.useSanitizeValueStrategy('sanitize');
    //保证可以正确的解析带有中文的json ---不加中文显示unicode 
    $translateProvider.useSanitizeValueStrategy('escapeParameters');
    $translateProvider.useStaticFilesLoader({
        prefix: 'i18n/',  //相对上下文环境路径
        suffix: '.json'
    });
}]);
//自定义过滤器
MetronicApp.filter("T", ['$translate', function($translate) {
    return function(key) {
        if(key){
            return $translate.instant(key);
        }
    };
}]);
// 结束国际化配置 xk

C:使用

<span>{{ 'china' | T }}</span>  //多虑器实现 
<span>{{ 'english' | T }}</span>

D: json文件

{
    "china": "中国",
    "english": "英国"
}

E:controller.js文件中使用国际化

angular.module('MetronicApp').controller(
        'siteListController',
        function($rootScope, $scope, $http, $timeout, $location, $state,$stateParams,$filter) {  //全局过滤器容器
            // 全局变量 F5键刷新界面数据结束
//          $rootScope.namexk = "rootName_123";
//          $rootScope.agexk = "age_123";
            console.log($filter('T')('china'));  //使用方式
            layer.confirm($filter('T')('sureDelete'), {
                      btn: ['确定','取消'] //按钮
                    }, function(){
                         $http.post("/portalmgr/wifiSite/deleteSiteById", {
                                "ids" : idss.join(','), //绝佳的处理方式  此处保证数据的准确性 至于如何解析交给spring mvc了
                                "siteNames" : siteNames.join(',')
                            }).then(function(response) {
                                console.log(response.data.status);
                                if(response.data.status == 200) {
                                    layer.msg('删除成功', {icon: 6});//笑脸
                                }else if(response.data.status == 8888){
                                    var alertt = response.data.data;
                                    layer.msg('站点:' + alertt + "---下面存在设备,请先删除设备之后再删除站点", {icon: 5}); //哭脸
                                }else {
                                    layer.msg('删除失败', {icon: 3});//叉叉
                                }
                                $("#siteList").bootstrapTable('refresh');
                            });
                    }, function(){
                    })
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值