最近需要將一個項目轉化成英文的， 于是發現一個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了

?

轉載于:https://www.cnblogs.com/alhh/p/8421142.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。