这是这个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文件进行翻译
原文地址：http://www.cnblogs.com/1540340840qls/p/7814107.html