angular-translate加载.json文件进行翻译
Posted 技术让世界更精彩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular-translate加载.json文件进行翻译相关的知识，希望对你有一定的参考价值。
这是这个demo的目录结构，总共有两个文件：locale-chinese.json和translation11.html
locale-chinese.json文件的内容是：
{ "beauty":"漂亮的", "ugly":"丑陋的", "people":"人民" }
translation11.html的代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta charset="UTF-8"> 6 <script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script> 11 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.16.0/angular-translate.js"></script> 12 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.16.0/angular-translate-interpolation-messageformat.js"></script> 13 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.16.0/angular-translate-storage-cookie.js"></script> 14 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.16.0/angular-translate-storage-local.js"></script> 15 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.16.0/angular-translate-loader-url.js"></script> 16 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.16.0/angular-translate-loader-static-files.js"></script> 17 <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.16.0/angular-translate-handler-log.js"></script> 18 </head> 19 <script> 20 angular.module(\'myApp\',[\'ngCookies\', \'pascalprecht.translate\']) 21 .config([\'$translateProvider\',function ($translateProvider) { 22 //加载json文件：$translateProvider.useStaticFilesLoader()这个方法非常重要： 23 $translateProvider.useStaticFilesLoader({ 24 prefix:\'locale-\', 25 suffix:\'.json\' 26 }); 27 //load chinese table on start up: 28 $translateProvider.preferredLanguage(\'chinese\'); 29 }]) 30 .controller(\'myCtrl\',[\'$translate\',\'$scope\',function ($translate,$scope) { 31 $scope.changeLanguage=function (langKey) { 32 $translate.use(langKey); 33 } 34 }]); 35 </script> 36 <div ng-app="myApp" ng-controller="myCtrl"> 37 <h1 translate="beauty"></h1> 38 <h1 translate="ugly"></h1> 39 <h1 translate="people"></h1> 40 </div> 41 </body> 42 43 </html>
运行结果如下：
以上是关于angular-translate加载.json文件进行翻译的主要内容，如果未能解决你的问题，请参考以下文章
国际化模块 angular-translate 简单方便快捷翻译中英文等多语言环境
AngularJS 1.x 国际化——Angular-translate例子
深究AngularJS——angular-translate详解
angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效