使用angular-translate实现项目语言的中英文动态转换

贲凌
2023-12-01

1.引入angular-translate.js
2.在script/base文件夹下准备cn.json和en.json两个json文件,用来配置中英文键

//cn.json
{
	"你好!":  "你好!",
	"国际化": "国际化"
}
//en.json
{
	"你好!":  "Hello!",
	"国际化": "Internationalization"
}

3.在app.js中注入依赖

var app = angular.module('myApp', ['pascalprecht.translate'])    //把 angular-translate 模块以一个依赖项加载进来
    .config(['$translateProvider', function ($translateProvider) {
        var lang = window.localStorage.lang || 'cn'; //获取上一次的语言(读取缓存),第一次进入默认显示中文
        $translateProvider.preferredLanguage(lang); //告诉 angular.js 哪种语言是默认已注册的语言.
        $translateProvider.useStaticFilesLoader({
            prefix: '/script/base',  //指定文件前缀
            suffix: '.json'  //指定文件后缀
        });
    }]);

4.放一个选择语言的下拉列表框

<div>
    <div ng-click="changeLanguage('cn')"><span>中文</span></div>
</div>
<div>
    <div ng-click="changeLanguage('en')"><span>English</span></div>
</div>

5.在appController.js中切换语言

angular.module('myApp').controller('appCtrl', [
    '$scope', '$translate', function (scope, $translate) {
        scope.changeLanguage= function(lang){
            $translate.use(lang);  //选择显示什么语言,lang对应的是某个语言的键
            window.localStorage.lang = lang;  //在缓存中存储当前语言
        };
        scope.cur_lang = $translate.use();
}]);

6.使用

//html
<span>{{'你好'|translate}}</span>
//js
var info = $filter("translate")("你好!");
 类似资料: