angular.js國際化模塊

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

?