最近需要將一個(gè)項(xiàng)目轉(zhuǎn)化成英文的， 于是發(fā)現(xiàn)一個(gè)angular模塊angular-translate，實(shí)現(xiàn)如下：

1.安裝包

bower install angular-translate bower install angular-translate-loader-static-files //然后在頁面引用進(jìn)去 <script?src="/angular-translate.min.js"></script> <script?src="/angular-translate-loader-static-files.min.js"></script>
//路徑依據(jù)項(xiàng)目路徑來

2.新建一個(gè)文件夾，里面新建兩個(gè)文件en.json和cn.json

en.json文件內(nèi)容如下

{"100001":"Login","100002":"Register"}

cn.json文件內(nèi)容如下

{"100001":"登錄","100002":"注冊(cè)"}

3.接下來要注入依賴，在config文件夾下面，新建一個(gè)translate.config.js文件

(function(angular) {"use strict";angular.module("app") //?angular.module('app',?['pascalprecht.translate'])注意區(qū)別，這樣寫是錯(cuò)誤的， .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">簡(jiǎn)體中文</option>
</select> function switching(lang) { $translate.use(lang) window.localStorage.lang = lang window.location.reload() } $scope.cur_lang = $translate.use();

5.新建一個(gè)filters文件夾，里面新建一個(gè)T.js

(function(angular){angular.module('app.filters').filter("T",['$translate',function($translate){return function(key){if(key){return $translate.instant(key)}}}]) })(angular)

6.在頁面應(yīng)用時(shí)候如下:

<li class="m on"><a ui-sref="main.home">{{'100001'|T}}</a></li>

然后就OK了

?

轉(zhuǎn)載于:https://www.cnblogs.com/alhh/p/8421142.html

總結(jié)

以上是生活随笔為你收集整理的angular.js国际化模块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。