最近需要将一个项目转化成英文的, 于是发现一个angular模块angular-translate,实现如下:
1.安装包
bower install angular-translate
bower install angular-translate-loader-static-files
//然后在页面引用进去 <script src="/angular-translate.min.js"></script> <script src="/angular-translate-loader-static-files.min.js"></script>
//路径依据项目路径来
2.新建一个文件夹,里面新建两个文件en.json和cn.json
en.json文件内容如下
{"100001":"Login","100002":"Register"}
cn.json文件内容如下
{"100001":"登录","100002":"注册"}
3.接下来要注入依赖,在config文件夹下面,新建一个translate.config.js文件
(function(angular) { "use strict"; angular.module("app") // angular.module('app', ['pascalprecht.translate'])注意区别,这样写是错误的,
.config(['$translateProvider',function($translateProvider){
var lang = window.localStorage.lang || 'cn'
$translateProvider.preferredLanguage(lang)
$translateProvider.useStaticFilesLoader({
prefix: '/i18n/', //指定文件前缀
suffix: '.json' //指定文件后缀
})
}])
})(angular);
4.在页面中使用
<select ng-model="cur_lang" ng-change="vm.userInfo.switching(cur_lang)"> <option value="en">English</option> <option value="cn">简体中文</option>
</select>
function switching(lang) {
$translate.use(lang)
window.localStorage.lang = lang
window.location.reload()
}
$scope.cur_lang = $translate.use();
5.新建一个filters文件夹,里面新建一个T.js
(function(angular){ angular.module('app.filters').filter("T",['$translate',function($translate){ return function(key){ if(key){ return $translate.instant(key) } } }]) })(angular)
6.在页面应用时候如下:
<li class="m on"><a ui-sref="main.home">{{'100001'|T}}</a></li>
然后就OK了