angularjs国际化

1，引入文件

<script type="text/javascript" src="./plugin/angular-1.3.16/angular.js"></script>

<!--angularjs官方提供的国际化文件-->

<script type="text/javascript" src="./plugin/angular-1.3.16/angular-translate.js"></script>

<!--用来读取本地配置文件的模块-->

<script type="text/javascript" src="https://cdn.bootcss.com/angular-translate-loader-static-files/2.15.1/angular-translate-loader-static-files.js"></script>

 

2，js配置依赖关系

var app = angular.module('myApp', ['pascalprecht.translate'])------加载angularjs-translate依赖模块
.config(['$translateProvider',function($translateProvider){ -----$translateProvider 服务配置 $translate 服务实现
　　var lang = window.localStorage.lang||'cn';
　　$translateProvider.preferredLanguage(lang);-------->告诉 angular.js 默认已注册的语言
　　$translateProvider.useStaticFilesLoader({ ---------->告诉 angular.js 应该加载本地那些国际化语言配置文件
　　　　prefix: '/i18n/', ----->指定文件前缀,即路径
　　　　suffix: '.json' ------->指定文件后缀
})     ----->不会加载路径下全部语言文件，它会按照默认注册的语言去加载.

.filter("T", ['$translate', function($translate) {
　　　　return function(key) {
　　　　　　if(key){
　　　　　　　　return $translate.instant(key);
　　　　　　}
　　　　};
}])

 

3，配置文件

 

4，页面使用

<input type="text" class="username" placeholder="{{'username' | translate}}"  ng-model="username" name="username" >

 

或者(配置filter才可使用此方法)

<input type="text" class="username" placeholder="{{'username' | T}}"  ng-model="username" name="username" >