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了