通过angular-translate来实现国际化

来源:互联网 发布:java实现公告管理系统 编辑:程序博客网 时间:2024/04/29 19:26

通过angular-translate来实现国际化

1.安装插件

bower install angular-translatebower install angular-translate-loader-static-files

2.添加依赖

var app = angular.module('myApp', ['pascalprecht.translate']);

3.配置插件

.config(function($translateProvider){      //使用静态资源实现国际化      $translateProvider.useStaticFilesLoader({          files: [{            prefix: 'json/locale-',//静态资源文件的前缀            suffix: '.json'        //静态资源文件的后缀           }]      });      //在这里添加所支持的语种      $translateProvider.registerAvailableLanguageKeys(['en', 'zh'], {         'en_US': 'en',         'zh_CN': 'zh'      });       //设置默认语言      // $translateProvider.preferredLanguage('zh');      //跟随系统设置语言      $translateProvider.determinePreferredLanguage();      //当不能使用系统语言时 选择该语言      $translateProvider.fallbackLanguage('zh');  })

4.资源文件

// locale-zh.json{    "test": {       "title": "angular-translate",       "subtitle": "Angular应用的国际化工具。"    },    "content": {       "firstline": "这是第一行。",       "secondline": "这是第二行。",       "hello": "你好 {{name}} !!!"     },    "BUTTON_LANG_ZH": "中文",    "BUTTON_LANG_EN": "英文"    }// locale-en.json{    "test": {       "title": "angular-translate",       "subtitle": "i18n in your Angular apps, made easy."    },    "content": {       "firstline": "This is the first line.",       "secondline": "This is the second line.",       "hello": "hello {{name}} !!!"      },    "BUTTON_LANG_ZH": "Chinese",    "BUTTON_LANG_EN": "English"    }

5.更换语言

$scope.language= function(){      $translate.use("en"); //选择所需要的语言}
0 0
原创粉丝点击